CSS Starter Kit
For those of you who don't know what CSS is, here's a primer! Just enough to get you started, not the real 'hardcore', pushing the edge, super-compatibility stuff. Knowledge of basic HTML is assumed.
See-Ess-Ess?
CSS Stands for Cascading Style Sheets. Let's start with the easy part, working backwards. Sheets as in 'pages'. CSS can either be in a seperate page, or as part of an HTML document.
Style. Here's the heart of the matter: CSS deals with the appearance or arrangement of HTML elements. How they look, how they are positioned, how (or if!) they are displayed. Typical HTML changes the appearance of the elements through formatting tags (<b>, <i>, <h1>) or tag attributes (WIDTH=, BGCOLOR=, ALIGN=). On the most basic level, CSS redefines HTML tags; saying "whenever you see tag X, draw it this way.". Through CSS 'classes', you can define several ways to display any given tag.
Now... Cascading? Merriam-Webster Online defines cascade as "something arranged or occurring in a series or in a succession of stages so that each stage derives from or acts upon the product of the preceding".
That's a very appropriate definition. Not only can CSS build upon and override the default style for a tag, successive CSS is cumulative and can overide all or part of previous CSS definitions (more on that in the next section.)
What? Where?
Look at the that title above. It should be green, spaced out, and have a line over it. But if you look in the source of this page you'll only see<h2>What? Where?</h2>But what you see is not a normal Level 2 Heading. It looks that way because in my style sheet is a entry that looks like this:
H2 {
MARGIN-TOP: 2em;
FONT-WEIGHT: normal;
FONT-SIZE: 150%;
MARGIN-BOTTOM: 0;
MARGIN-LEFT: 0.5em;
COLOR: #393;
FONT-FAMILY: haettenschweiler, impact, verdana, tahoma, arial, helvetica;
LETTER-SPACING: 0.6em;
TEXT-DECORATION: overline
}
First, the tag: H2. Then a opening brace { followed by a series of attribute/value pairs. The attributes are separated from the values by a colon : and the pairs are separated by semicolons ;. The whole thing wraps up with a closing brace } after which the style for another tag can be defined.
Let's walk through the style attributes for this one, just to get the idea:
- margin-top: The space above the element's 'bounding box'. In this case 2 'ems', a relative size based on the font in use (the height or width of a capital letter M). (The bounding box concept is discussed more on the Inside the Box page)
- font-weight: the 'boldness' of a font. There are many values, but most of them are only displayable on a Macintosh. Only normal and bold are distinguisable in Windows. In this case, however, the default font-weight for H2 is bold, so we're turning that off. If you're writing a page that will only be viewed by Mac users, fine, but don't count on there being a difference between bold and bolder if Windows users see it.
- font-size: there are many different values, both relative and fixed. This one is set for 150% of the normal page font size, so it will grow proprotionally if the user adjusts the font size for their browser.
- margin-bottom: The space under the element's 'bounding box'. Once again, we're overriding the default of the normal H2.
- margin-left: The space to the left of the element's 'bounding box'. Slightly indented, but done in such a way that if the header is ever so long it wraps the second line will not go back to the left edge but stay flush with the first.
- color: The foreground color (font color). CSS lets us use a sort of shorthand for defining colors: whenever CSS sees three hex characters instead of the usual 6, it simply doubles each digit. #933 becomes #993333. Yeah, you can still use six digit hex codes if you want an exact color, but three digits still gives you 4,096 colors to work
with-- plenty of variety! - font-family: Just like the now-obsolete <FONT FACE=...> tag and attribute, this is simply a list of preferred fonts. The heading will display in the first font on the list which is available on the user's system, or the default body font if none are installed.
- letter-spacing: Extra space between letters. In this case, an extra 60% of the width of an M. If we wanted the letters to scrunch up closer, we could use a negative value here.
- text-decoration: This attribute we usually use to underline text, but overline is another valid option! We could also use line-through to simulate the <STRIKE> tag, or use none to override the underline on a <U> or (better yet) an <A HREF= tag.
We could also define a 'class' by starting with a period and making up a name:
.Atten {
FONT-SIZE: 110%;
COLOR: #900
}We can now apply that style to almost any tag by adding the CLASS= attribute to it:
<B CLASS=Atten>ATTENTION!</B>Renders as ATTENTION! Further more, if we wanted to ONLY define the 'Atten' class for use with B, we could have started the style definition with B.Atten (note: no spaces!) In the B tag in the document would look the same, but
Ok, that's a enough about 'What?'. Now let's wrap up this lesson with a look at Where you put CSS in your document.
The ideal answer to that question is: in a document of it's own. The above bit of CSS is in the default stylesheet for my site, which is called bk.css. In each page that uses it, the following line or one like it appears in the <head> section of the document:
<link rel="stylesheet" type="text/css" href="bk.css">This associates the stylesheet with the document. The great thing about this method is that all the settings are in one place. My level 2 headings used to be a browninsh red. One day decided I wanted them to be green. So I simply opened my css file and changed color: from #933 to #393
Now if you can't or don't want to use this method, or if you have settings that only need to be used on one page, you can define a <STYLE> block in the <head> section of the document:
<STYLE type="text/css"><!-- /* Style Definitions Here */ --></STYLE>Here's where the first of that cascading stuff starts to kick in. My css file has a definition for the STRONG tag that looks like this:
STRONG {
FONT-WEIGHT: bold;
FONT-SIZE: 105%;
COLOR: #0405b2;
FONT-FAMILY: Arial
}
Which, when rendered, looks like THIS. But this document not only imports my css file, but has a STYLE block of it's own. That block contains this definition:
STRONG {
font-family: Times New Roman, Times Roman;
background:#ffc;
border-bottom:1px dotted #960;
}
Which makes STRONG look like THIS. Color, font-weight, and font-size carry over from the original definition, but the font-family definition on this page override the one in the style sheet. background and border-bottom are added on top. The new strong tag looks smaller because of differences between the font faces, but it is still slightly larger than normal 'Times' text would be. (Note also that font-weight:bold is a little redundant anyway, because mose systems render <STRONG> the same as <B> anyway.)
This page also contains a special class:
.HiVis {
color:#ff0;
background:#f00;
border-bottom:none;
}
Which makes <STRONG CLASS="HiVis"> look like THIS. The three attributes of HiVis override the ones in the local STRONG definition. font-family is still Times (as defined on this page), and the font-size is still coming from the external css file.
Finally, for 'one-time' use, you can use the STYLE= attribute in any tag. For example,
Cascading, indeed!
Lagniappe*
Well, there's one more twist on 'Cascading' that should be thrown in. We can set special definitions when tags are nested:
H1 STRONG {
color:#090;
background:#ff0;
border:3px groove #090;
padding-left:.5em;
padding-right:.5em;
}
This sets a special 'class' of STRONG that is automatically used only when STRONG is nested inside an H1 tag. Wanna see what it looks like? Scroll to the top of the page and look at 'CSS' in the title. Note that the font-family is still Times New Roman, as definied in the 'normal' STRONG tag for this page.
I should point out that only a space separates the H1 and the STRONG in the definition. If there was a comma, the style definition would be applied to the default styles for both H1 and STRONG.