Much of styling a page is to do with personal preference, so I'll only discuss some of the technical aspects of using CSS. You'll have to decide, for yourself, just what you'd want to do with it. You're far better off reading the specifications (while realising that only some of them are supported) to find out what you can do, and how to do it. Remember that I consider this guide to be little more than a primer.
However, one tip I strongly encourage is to use classes (if you use classes) in a “structured” manner: For instance, if you're styling “comments” and “examples” written on a page, then make “comments” and “examples” named classes, which you can style as appropriate, across the entire document. Rather than make some “highlighted-red-and-boxed” class, which has no particular meaning, and is a nuisance if you decide to change the look of how you style your examples to something different. This keeps both your CSS and HTML in a well structured manner, and makes it easier to maintain and modify.
CSS has far more possiblities than are mentioned in this guide, you really want to read the official specifications, to find out what else you can do. Though, remember that only some browsers support only some of what CSS can do.
CSS (Cascading Style Sheets), like HTML is a plain text format, you can create it in any plain text editor. So, open your preferred one, and start a new file (call it example.css, for the sake of this exercise). Avoid using word processors, unless you know how to make them create a plain text file (their own document format is useless, for this task). We'll use this stylesheet with the page you created before (the example.html page, from the writing webpages document).
To associate your new stylesheet (when it's written) with your webpage, we'll need to modify the webpage to refer to the stylesheet. Assuming that you've got both files in the same directory, you can add a link element in the document's “head” pointing to the stylesheet, with appropriate “rel” and “type” attributes.
<link rel="stylesheet" type="text/css"
href="example.css">
This is, probably, the best way to use stylesheets with webpages (separate files, linked together).
We'll start off by writing a CSS file that modifies standard HTML elements, so you can play with CSS without having to do many changes to your HTML page, yet. CSS works by using “selectors” to select which elements to style. We'll start with a style rule to modify the h1 (first heading) element on your page, with a declaration block that changes the colours that it might be displayed with to white text on a blue background. Write the following into your example.css file:
h1
{
color: white;
background-color: blue;
}
The “selector” for this rule is “h1”. It will select any “h1” element used on the webpage (which there should really only one), it'll change the foreground colour to white (typically, the text colour), and the background colour to blue, for this (h1) element.
The formatting, in that example, is not required. It's merely been written that way to aid in reading. Blank lines, nor blank spaces, are not normally required; the punctuation takes care of separating one thing from the next. Though if a property has a "list" of values, they're separated by spaces.
Selectors can select any HTML element, simply by using the name of the element. To select a specific element (e.g. a particular paragraph), you need to add information to your HTML to give that paragraph some form of identification. Alternatively, to select various paragraphs, you'd add a class to each of those paragraphs, that refer to that class in the CSS.
There are a few recognised "colours" (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow), for other colours, you'd specify red, green, and blue intensity levels (between 0 and 255 decimal, or 0 and FF hexadecimal, but more about that, later).
Try doing something similar with the paragraph element, in your example CSS (add another style rule, for the “p” element).
To apply CSS to a group (or class) of elements we can use “classes” in the HTML to declare that some elements all belong to the same class. This is done by placing a class “attribute” in the opening tag of HTML elements.
<p class="example">One example.</p>
<div class="example">Another example.</div>
Both of those HTML elements (the “p” and “div”) are associated with a class called “example”
The associated stylesheet will have an example class (or classes), which sets out what's to be done with them. This style sheet could have an overall “example” class, which takes care of all HTML elements in it:
.example
{
color: #ffdddd;
background-color: #aa8833;
}
All HTML elements with an “example” class attribute would get these colours. The dot before “.example” behaves like a wildcard (as there's no particular HTML element name written before it).
Or, it could have individual classes for each different type of HTML element, that's using the example class:
div.example
{
color: #ffdddd;
background-color: #aa8833;
}
p.example
{
color: #eecccc;
background-color: #997722;
}
These rules apply only to the type HTML element that's named before the dot in front of “example”. The “div.example” rule will only apply to “div” elements with an example class “attribute”, and the “p.example” rule will only apply to “p” elements using the example class.
Or, even a combination: An overall “example” class, for most things, with some individual example classes, appropriate to different HTML elements:
.example
{
color: #ffdddd;
background-color: #aa8833;
}
p.example
{
font-style: italic;
}
All HTML elements with an “example” class would get these colours. Additionally, any “p” elements with "example" class attribute would be styled with italic text, too.
HTML elements can also have more than one class associated with them, by writing the additional class names into the class attribute, separated by spaces:
<p class="example brief highlighted">An
example.</p>
That “p” element would have the “example”, “brief”, and “highlighted”, classes applied to it (and the associated style sheet would have rules for them).
The naming of the classes, is up to you. So long as you use characters that are allowed in the naming scheme (ordinary letters of the English alphabet is a safe bet), and aren't already pre-defined for other purposes (such as the names of HTML elements). They're just an identifying name between the HTML and the associated stylesheet.
If you're setting up a special class for a certain HTML element, then you'd name the class beginning with the element's name, a dot, then your class' name.
If you were setting up a class for several different elements, you could use a generic class that just began with a dot, or you could set up a style rule which applied to several elements, by writing a series of comma-separated class names before the style rule.
p.example, div.example, span.example
{
color: black;
background-colour: yellow;
}
This style rule would apply to any “p”, “div” or “span”, HTML element that had a class="example" attribute set in them.
There are many different properties that can be modified using CSS, so far I've only mentioned foreground and background colours. There's a plethora of other properties that can be modified, some of the commonly used ones are:
You can set a border around an HTML element, specifying its width, style, and colour, with the “border” property.
p.example {border: thin solid red;}
You can adjust the spacing between the content of an HTML element, and its border (regardless of whether the border is visible), with the “padding” property.
p.example {padding: 1em 3em 2em 3em;}
This sets a space of 1em at the top, 3em on the right-hand side, 2em at the bottom, and 3em at the left hand side, around the content of the associated “p” element. The paddings go around the object in a clockwise direction, starting at the top (but you could have specified just one value, and have it apply to each side, equally). The “em” unit is the space used to print the capital letter “M” (note that this includes some space around the letter, not just the size of the letter, itself), giving you a measurement related to the size of the text being used.
You can adjust the spacing between HTML elements (between their borders, whether or not the border is visible), with the “margin” property.
p.example {margin: 2em;}
You can decorate text with some styling (make it underlined, etc.).
p.example {text-decoration: underline;}
Trying to specify fonts is fraught with problems. Not everybody has the same fonts, and what you might expect to be commonly installed fonts, frequently aren't. Also, some fonts are more legible than others, specifying a particular font may stop a browser from using the user's preferred (easy to read) font. Remember, the design ethos of HTML is to provide information in a manner that's best suited to the person reading it, going against the nature of HTML isn't very successful, and isn't helpful to the reader.
My systems all have different fonts on them, some of them do not have some of the very common fonts that people assume everyone has (e.g. Arial). I prefer Georgia for a serif type of font, but some people really dislike it, and many don't have it. Times, or a clone of it, is the most common serif type of font, but there are several variations of it (different producers of Times-like fonts, don't produce identical versions).
When you specify that a particular font face is to be used, the browser uses the fonts that it has available on its local system. The fonts are (generally) not downloaded with the page, although there are ways for a browser to get fonts from the internet (awkward, and poorly supported ways).
Anyway, you can specify the font family, to be used in a document, in a few different ways:
A specific font to be used (not a brilliant idea, as not everybody will have the font, or find the font easy to read).
* {font-family: Arial;}
This selects all HTML elements to use the suggested font (Arial).
A list of different fonts to use, starting with the preferred one, listing alternatives to use if the prior one isn't available (still not a brilliant idea, for the same reasons as before).
* {font-family: Arial, Helvetica, "luxi sans";}
A list of different fonts to use, ending with a generic font family type, in case none of the listed fonts are available (still not a brilliant idea, for the same reasons as before).
* {font-family: Arial, Helvetica, "luxi sans",
sans-serif;}
A generic font family type, letting the browser pick the particular one that suits; whether that be automatically, or according to the user's preferences (a better idea, although some browsers make lousy choices, e.g. Microsoft's Internet Explorer).
* {font-family: sans-serif;}
Sans-serif is a generic instruction to use any suitable, or the user's preference of, sans-serif type of font face. It is not the name of a specific font. Likewise, for serif, cursive, fantasy, and monospace.
Microsoft's Internet Explorer frequently gets this (generic font family instructions) wrong. For instance, using a font called “serif”, when told to use a serif type of font. Their “serif” font is (usually) a small bitmap font, which only looks okay at a few different sizes. This is yet another fault with their system (poor choice for the name for a font they've included with Windows, and poor browser behaviour at picking a suitable font).
NB: For a very long time it's been known that serif types of fonts (those with the little knobs and tags at the ends of the lines they're drawn with) are easiest to read on typed documents (non-handwritten ones). Which is why nearly all printed books, are printed in that way. The serifs give the brain extra clues as to what the letter is, helping it to distinguish letters out of a collection of vertical and horizontal squiggles on the screen.
However, the generally low resolution of computer screens, and the prevelent use of tiny fonts, often means that they system can't display them legibly. Some people opt for using sans-serif fonts, instead (they use less pixels to draw, because they're usually a simpler design, and may render in a less mangled manner). The real issue, is the difficulty in reading small fonts, on a low resolution device (sans-serif fonts certainly don't help me read small text). Avoid using tiny fonts like the plague, and avoid specifying any font “size” (let the viewer read the page at their preferred settings).
Do NOT try specifying font faces as a way to show special symbols (e.g. “dingbat”, and symbol fonts), that's not how HTML works. That will only work (as you expect it) on your computer, it will do unpredictable things on other people's computers. Such fonts use really bad “tricks” to use non-standard glyphs in place of the standard ones (i.e. ordinary typographical characters, such as letters and numbers). Different symbol fonts have different symbols in the same positions, and some users won't have a symbol font (they'll just see a mess of gibberish characters).
You can change the style of a font (make it italicised, etc.).
p.example {font-style: italic;}
You can change the weight of a font (making it bolder, lighter, etc.).
p.example {font-weight: bold;}
There are a few “recognised” colours, where you can refer to them by a name (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow, are the only “official” ones). For any other colours, you'd specify the different intensity levels or red, green, and blue, to create the colour that you desire. You can specify the levels in a few different ways.
If you're happy with playing with hexadecimal values (a base 16 number
system, using the digits 0 to F), you can use them to specify a value
between zero and two-hundred and fifty-five (FF), for each colour, grouping
a string of them together for red, green, then blue. For instance,
for full red (FF hex), half green (80 hex) and a little blue (33 hex),
you'd write the colour as: #ff7733
p {color: #ff7733;}
By the way, the semi-colon is the end of the property's values, not part of the colour value. You don't even need to end the property with a semi-colon if there isn't another one following it; I just use them out of habit (I don't have to remember to add one, if I write a new property into the declaration block later on).
Alternatively, you can use decimal values:
p {color: rgb(255,128,51);}
Or even percentages:
p {color: rgb(100%,50%,20%);}
Bear in mind that some colour combinations are difficult to read, and some colours won't work well on some monitors (e.g. dark colours on a monitor which doesn't display dark colours very well, or colours used adjacent to each other that don't differ very much in value). Also, some monitors won't display colours the same as other monitors, due to the different technologies involved between manufacturing processes, and different types of displays.
Various style rules may make use of some form of measurement (such as, the margins and padding around content), and there's a variety of different types that you can use. Here's just a few:
“em” units, that are equivelent to the space used to print the capital letter “M” (note that this space is bigger than the letter M itself). This gives you a unit that is proportional to the text used on the page.
“px” (pixel) units, that are proportional to the pixels used to draw the page. Also, they're supposed to be scaled taking into account the properties of what's displaying it (e.g. to try and make some sense of the difference between things like screen and paper, where 300 dots is a fairly large thing on the screen, but tiny on printouts). Pixels bear no relationship, at all, to the how the text is drawn on the page (so you cannot use them in any reliable fashion to do with text), and you have no idea of the size of the page being used to display a document (so you cannot use them in a reliable fashion, to lay out a page proportionally).
"%" percentages, proportional to the current element, or a related element. These can be used to layout things proportionally to other things.
When specifying a value for some form of measurement, you must specify the type of measurement being used—it is mandatory. They're not interchangeable, and there's no default. You specify it by writing the type immediately after the value, there's no blank space between them.
p {width: 12em;}