BWD Chapter 13: Meet CSS
2004-12-16 19:07 - Beginners Web Development
Chapter 13
Meet CSS
What we have learned so far of HTML is all about content. About how to get that content grouped into pieces that make sense like paragraphs and lists. We have not learned how to make these pages look nice, how to control the presentation.
Presentation of course comes second. Without content our presentation is empty and pointless. The way we control our presentation is through style sheets. Next we learn CSS, Cascading Style Sheets.
Style sheets can be very difficult to learn. Styles take practice to learn well. Many little details effect how a style is applied to a document. Each must be understood. The first (and worst) way is inline.
<p style="color: red;">This paragraph text is red.</p>
The style above is applied directly as an attribute of the p tag. It turns the color (of the text) to red. This is, incidentally, the last level that a style can be applied. Inline styles will overwrite the styles supplied anywhere else for the document. They are the worst way to apply styles because, as mentioned, separation of content and presentation is important. This approach mixes the presentation (color red) right in the same place as the text. This makes finding either one to change it later difficult, very difficult for large documents.
The next way to apply a style to an element is using the style tag. Here we start to really make a sheet of styles. It looks something like this.
<html>
<head>
<style>
p { color: red; }
</style>
</head>
<body>
<p>This paragraph text is also red.</p>
</body>
</html>
There are quite a few magic details squeezed into this tiny example, which we will discuss for the remainder of the chapter. The first is the tags.
As we said we are using the style tag to define the styles for our document. These styles can effect any part of the document. It is always a good idea to put your styles in the head; the head is for information about the page which does not directly display in the body.
Inside the style tag go, unsurprisingly, styles. Styles come in two parts, the selector and the attributes. The selector begins a style rule, followed by an opening curly brace. After the brace comes an attribute name, a colon and then the attribute value, followed by a semicolon. More attributes can follow. The semicolon is optional, but required between two attributes. It is always a good idea to put the seicolon, in case you add another attribute later. After the attribute(s) comes a closing curly brace, and the style rule is complete.
Selectors are the true magic of style sheets. It is of utmost importance to know how to write a selector, as well as to know how to write a document, to make its elements easy to select. The first thing to know toward those ends is the C in CSS, cascading.
Selectors come in many kinds. Even the simplest can be very powerful, when used properly. The more advanced selectors can do amazing things, but are often supported poorly in browsers. So we will simply learn the easy ones first!
The simplest selector is the wildcard selector. It is a single * (asterisk) and stands for 'any tag.' The next is the type selector, which is simply the type, or name, of the element. In our simple example above, we used the type selector to target all paragraph tags. The element selector is the bread and butter of CSS and you will use it frequently.
The next selector combines two others. The descendant selector is simply two regular selectors separated by a space. For example 'p *' is all elements inside a paragraph. Note that this is all descendants, not just children. This means a bold tag in a list in a paragraph will be effected, as well as the list.
A more advanced selector allows us to effect only some elements, rather than all of a type. We can target a particular element by its id or a group of elements by their class. The basic format is: element#id or element.class. In both cases, the element is optional. Without the element name, the selector will target any and all elements, of any type, with the specified id or class.
An important note: A class can be shared among many tags, an id cannot. Each id must be unique throughout the document. Tags can also be assigned more than one class, separated by spaces, but only one id.
Combining id and class selectors with descendants is very powerful. It is possible to target many elements simply by the id or class of their parent. This makes your HTML code smaller and cleaner.
In the next chapter we will cover a few more selectors, and begin with the available properties.
