I learned how to build websites the old fashioned way: looking at website source code and trying to replicate the things I saw. I threw in the odd ...
For further actions, you may consider blocking this person and/or reporting abuse
I have a few tips I want to say around the image thing which can help to understand relation of
inline
,inline-block
andblock
:inline-block
.inline-block
s are like a single character of text.vertical-align: baseline
by default.display: block
on image you can sayvertical-align: top
.span
wrapper to do cool stuff with characters).If you study technicalities of fonts you can understand a whole lot better the whole
vertical-align
stuff and relation toinline
andinline-block
.This is such a great list!!! This is the "foundations" that so many people skip / and can't seem to get back to.
"Things we wish - everyone knew about CSS."
Side note on your formatting: You can write
'''css
'''
(or whatever language, html, css, js) and get the right syntax highlighting. : )
Great post!
Thank you! Great tip :)
Three things about CSS I wish I'd understood earlier:
oh wait you have an article about the first one dev.to/alohci/mapping-html-to-css-...
Can you explain the first 2 in a couple clarifying sentences please?
We always strip collapsing margins and use margin-top. Do you like the collapsing margin?
I’m all-in on the Lobotomised Owl :)
Wow! Really! I haven't used it in forever. I'll have to look at it again.
Yeah! Wrote a bit more about it here:
cssfordesigners.com/articles/manag...
Ok. It's coming back to me: Good ol 2014
I've been teaching some CSS typography this last week - and I was giving them this challenge.
Here's my solution. (of course I tell them they don't need to do it that way / and it's more about the outcome - and understanding the tools)
I think the owl would do the trick... but - it also might give me a little less control. In many cases - we're just styling one big article CMS block. What are your thoughts on that?
Basically:
vs / a more specific rule
and I guess - to add to that, sometimes we're working with 'event' type lists / and there might be a headliner band... and 1 or 4 support bands, and a DJ - and a special note about the costs, and all ages or not, - and so the markup is always on the fly. In those cases there isn't necessarily space between each of those - so, that's another reason why we use the
+
with so much specificity. It's complex at first / but then it just works and can handle anything we throw at it. So, that's another edge on that case. Same might be if your headings had padding and background colors.My general approach is to set the general spacing then define exceptions, so it might be something like:
...etc. I write exceptions often, but I reckon it’s still fewer than if I wrote each margin. There are other benefits to this approach, though, particularly when trying to make CMS blocks that are interchangeable.
It’s also really useful for horizontal lists, but I guess you might already use it for that. :)
I like your point and explanation about styling
:focus
states differently. I had seen similar examples (probably while googling a related problem) and took away that:focus
and:active
states are meant to be styled together. I hadn't thought to question why those two states are distinct. This seems like an easy/fast way to start incorporating accessibility into our initial builds, and a great cue to read up on those pseudo-classes!Thanks, Jack. Yeah, it’s definitely something that seems obvious in hindsight, but something that isn’t seen that regularly on the web.
Glad that was useful :)
DHTML was a thing. But
<p size="4" color="#000000">
wasn't. I think you mean<font size="4" color="#000000">
Thanks! What a typo :) Corrected...
I learned stuff that had evaded me because it had never been explained this simply even though it was always dreadfully simple I guess. So embarrassed and grateful.
Thank you, John. Absolutely no embarrassment needed: lots of these things aren’t explained clearly in docs, and some of these things took me a longer time to discover than I’d care to admit. :)
Ahhhh, of course! 🤦🏻♂️
Consider it updated. Thanks 🙌