Thread: CSS Question
View Single Post
Old 11-09-2020, 03:44 PM   #10
hobnail
Running with scissors
hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.
 
Posts: 1,589
Karma: 14328510
Join Date: Nov 2019
Device: none
Dunno if this is helpful but another thing I do is chain or stack classes. There are things that I consider "blocks" that are inset and styled differently than the running body; letters, telegrams, articles, etc. A lot of times you see blockquote used for this but some argue that that's semantically incorrect, which I go along with (although to me it's 50/50 but I'll go along with those who probably know more than I do).

So I have a basic block that's a div
Code:
div.block {
    margin-left: auto;
    margin-right: auto;
    margin-top: 1em;
    width: 85%;
}
Then for the specific type things like
Code:
div.article {
    font-family: sans-serif;
}
div.letter p {
    font-style: italic;
    hyphens: none;
}
And to use it it's
Code:
<div class="block letter"><p>blah</p><p>blah</p></div>
As a side note I don't understand (or have forgotten) why the div.article doesn't need the space p while the div.letter does. E.g., if you do
Code:
<div class="article block">First article sentence.</div>
<div class="letter block">First letter sentence.</div>
The article sentence is sans serif but the letter sentence is not italic.
hobnail is offline   Reply With Quote