Style Sheets and HTML Elements
Whilst writing up today’s entry, I came up with the idea that maybe I should make a stylistic distinction for different flavours of content. Most notably, the techy talk in this section. Don’t like techy talk? Skim through it quick. Easier to pick bits out.
Since we like to re-use code, and defer to precedence, I told this document to source in an additional style sheet, instead of replacing the site-wide style sheet. This way I can override the bits I want to change for this log document, while also catching whatever style properties change for the site as a whole.
The problem is that in the main style sheet, I had spelled out “monospace” as the “font-family” attribute for several elements, and now I wanted to change this part of several elements by using the DIV tag on a set of elements. For example:
<h3>Car</h3> <p>Stuff about the car.</p> <div class="techy"> <h3>Techy Stuff</h3> <p>Blah blah blah</p> </div>
In this way, I wanted the text within the techy DIV to come out monospace, while everything else was in the nice Helvetica font. The problem is that I had already defined the P, and H3 attributes to use Helvetica, so they never came out in monospace.
The answer came out to be that in the site-wide style sheet, I should stick with monospace as an attribute for the BODY parent tag, and tell the P and H3 elements to inherit:
BODY {
font-family: monospace;
color: black;
background-color: white;
margin: 1em 2em;
}
P {
font-family: inherit;
}
H3 {
font-family: inherit;
color: maroon;
}
So, in this document, I set the BODY font-family to Helvetica. Now the P elements in this page inherit Helvetica, instead of monospace, and everything comes out Helvetica. Unless, of course, the P is contained in a DIV tag that spells out a different font-family.
Ah, so let’s take this a step further, and change the colors of the H3 elements from maroon to a green color. Again I run in to that same problem that I have already set my H3 elements to be maroon! But since I want black text, I can’t just inherit maroon from the BODY element. What to do!?
After much searching through w3c’s recommendations, and different style sheet guides, I found a reference to an entry in Tantek Çelik’s log that invokes CSS syntax in a way I have never noticed before:
.techy H3 {
color: #003300;
}
This makes H3 elements within a techy parent class turn dark green. This is different, and vastly more useful to me than specifying H3:techy as I am used to doing. This allows me to take the techy class from my parent DIV, instead of having to specify techy as the class for each element. Yay!
It took a lot of effort on my part to figure this one out, so I had to share here. This is why you see this part of my document in green shades with a monospace font, and all I have to do to apply these styles to this section of the document is to wrap it in a DIV element of the appropriate class!
