Hey folks!
I’ve been seeing on the web lately that a lot of people are still having a hard time “getting” CSS. It’s not really code, in that it doesn’t execute, so it doesn’t really look right to programmers. Yet, it a kind of language, in that it has a syntax and a grammar, that is very terse, and not exactly straightforward – tough on the graphic design folks I know.
However, CSS has distinct advantages over the classic ways of styling and laying out HTML. It’s biggest advantage is write-once / style-anywhere: change a line of CSS in your stylesheet file, and every page that uses that stylesheet has the new style applied. This is a double-edged sword: it saves a lot of time once your style is put together, because any style changes do not have to be applied across every page (remember the <font> tag? Ick!). But, change the wrong line, and every linked page suffers! With great power, comes great responsibility.
Really, though, there’s a few simple rules to CSS, and a few caveats to learn. To try and help, I thought I’d lend a hand and share what I know. This is all from my experience building web pages. I’ve not found a teacher yet that really tries to teach CSS; often given the tools we currently have, it’s easier to use tables and tags for layout and style, respectively.
Here’s the basics:
- A line or block of CSS is called a rule. The rule has two parts: the “Selector”, and the style block. The style block contains one or more style statements, with an attribute, and value specified for that attribute.
- Styles apply to elements in HTML. The CSS Selector determines to which elements the style applies.
- Styles apply in order. This means that if more than one rule applies to an element, the later one, either later in the same stylesheet, or in a stylesheet that is loaded after a previous sheet, override the earlier.
- More specific selectors get preference – even if the more specific rule is before the more generic rule.
- The !important also gets preference.
- Extra white space is ignored.
- In the style block, style attribute/value pairs should be separated with a ‘:’ and end with a ‘;’.
Building Selectors
Tag Selectors
You can specify all <p> tags very easily. The selector? Just p.
p { text-align: left; }
With that rule applied, all paragraphs specified by a p tag in the HTML will have text aligned left. More examples:
h1 {
font-weight: bold;
text-align: right;
font-size: 18pt;
}
div {
display: block;
}
It’s should be easy enough to interpret that h1 rule: the text will be bold, aligned right, and 18pt. The div – diplay: block – is a layout thing. In HTML, there are block elements and inline elements – headers (h1-h6) and paragraphs are block by default, but <em> or <strong> tags are rendered inline.
What does that mean? A block element renders on it’s own line. There will be a line break before and after a block element. Essentially, it “blocks off” it’s own part of the page. An inline element displays exactly so: in-line. A <strong> tag is intended to bold text within a paragraph or heading, for example. Of course, using CSS, you can change this behavior. You could make the strong tag render as a block, and make it italicize the text rather than bold it, if you wanted to. CSS styles always override the browser’s default styling (this will be useful later!).
Tag based selectors are fantastic – you can re-purpose HTML to display exactly as you like it, and it will do your bidding. Any time you can use an existing tag to mark up your data or content in a way that makes sense, you should do it – this is called semantic HTML. The best semantic tags are the basic ones:
- Headers (h1–h6)
- Paragraphs (p)
- Numberd Lists (ol and li)
- Bullet lists (ul and li)
- Abbreviations (
abbr and the title attribute – look at the word CSS in the first paragraph of this article)
Class Selectors
Sometimes, you need to specialize a tag so that it has a specific style. You want to re-use the tag and style, but not in absolutely every instance of the tag. This is where classes come into play.
<div class="note">
This is a special note.
</div>
Above we have a <div> tag, and we’d like to make it look like a “note” or a notation of some kind. It should get set apart from our content in some way, and styled appropriately. However, we don’t want every <div> block to look like a note. So, we’ve added “note” to the class attribute of the <div> tag. That way, we can craft a CSS selector that doesn’t target the tag, it targets the class. That CSS selector will look like this:
.note {
background-color: yellow;
margin: 5px;
}
Now the <div> tag shown above will have a yellow background, and a 5 pixel margin surrounding the block. div’s are rendered as blocks by default; the <span> tag is the inline equivalent.
Don’t be too hasty to mark up your code with a bunch of classes. There are times when they make sense – you have a class of block elements that need to be styled a specific way. However, if there’s an HTML tag that already makes sense for that purpose, use it instead. That makes your code more semantic, which means it is easier to maintain and read. It also keeps the code shorter if you can use a tag rather than a tag + class combo.
ID selectors
OK, so let’s say you have a specific element on a page that you need to target. Say it’s the logo, and you want to make sure it appears in the top-left corner of your page. You can give that element an ID, and then build a selector to style it. Like so:
<img id="logo" src="/img/logo.jpg">
Now that you’ve got the id in your HTML, you can style it like so:
#logo {
position: absolute;
top: 0px;
left: 0px;
}
That bit of CSS will grab the logo image and put it in the top, left corner of the page. (It also pulls it out of the document flow – that’s a whole other article, though!)
Specificity
So now that you’ve got an idea of how these selectors get built, you can start to get a feel for specificity. Here’s the rules on that:
- Tag selectors are the most general.
- Class selectors are more specific than tags. Given a tag rule and a class rule, the browser will apply override styles in the tag rule with those from the class rule.
- ID selectors are the most specific. Given a tag, class, and id rule, the browser will over ride tag and class style with those of the id rule.
So, given this CSS:
#logo {
border: none;
position: absolute;
top: 0px;
left: 0px;
}
img {
display: block;
border: 1px solid black;
}
.special {
border: 2px solid red;
margin: 3px;
}
The <img> with id=”logo” will have no border, and it will be positioned in the upper left corner. This is because the id rule is considered the most specific rule, even though it’s an img tag.
All images in the document will have a black border of 1px width. An image with a class=”special”, however, will drop the 1px black border, and have a 2px red border, as well as a 3px margin on all sides. The class rule is more specific than the tag rule.
Note that in this case, the order of these rules doesn’t matter; they have clear specificity distinctions. Order only matters when the specificity is equal: if you are styling the img tag in one stylesheet, and then re-styling it in a second stylesheet, whichever sheet loads second in the HTML will be the overriding rule.
Conclusion
There’s a lot more that you can do with stylesheets beyond this. Look out for the next post, which will be about combining selectors (using tags, ids, and classes in the same rule), and give you some more style attributes.