This article is obsolete and will go away eventually, and replaced with an excerpt from the book.
—————-
The original was written: 2004-11-18 03:16:46 -0700.
Here’s a bit of the article:
Dang, but it took me forever to learn CSS. Maybe I should have used a book. Here, I’m going to share with you the hard-found knowledge, presented using technical programmer jargon. (Revised in 2014.)
What is Cascading Style Sheets (CSS)? The typical answer is that it’s a way to separate the way a page looks from the the underlying HTML, which describes the structure of the document.
What is HTML? It’s a markup language used to add a hierarchical structure and formatting codes to text. The HTML and CSS are interpreted by a web browser, to display a web page.
By itself, HTML is sufficient to do formatting that’s adequate for term papers, short books, instruction manuals, and other basic documents (like this document). However, it’s insufficient for doing graphic design for web pages. That is what CSS is for: precise formatting of structured text.
HTML as Code
To understand CSS, you need to understand HTML. HTML has two characteristics that programmers will understand. First, it is object oriented. Second, it’s hierarchical. The stream of text is treated as a hierarchy of objects, which contain text, and also contain other objects.
Here’s the simplest HTML document:
<!doctype html>
<html>
</html>The first thing is called a doctype entity, and it’s like a header line that identifies the document. The second part is the HTML tag. There’s an opening tag, , and a closing tag .
Here’s a more conventional HTML document:
<!doctype html>
<html>
<head>
<title>sample document</title>
</head>
<body>
</body>
</html>Within the HTML tags are pairs of tags for HEAD and BODY, and within HEAD, there’s TITLE. As you can see, it’s a hierarchy of objects delimited by tags. The code, when interpreted by a web browser like Firefox or Internet Explorer, is converted into objects. The tree of objects is called the Document Object Model or DOM.
When people think of tags, they often think “markup”, but don’t yet think “object”. Start thinking of them as objects that contain what’s between the opening and closing tags.
Here’s a final example, and the one we’ll use to describe and explore CSS:
<!doctype html>
<html>
<head>
<title>Hello, world.</title>
<style type=”text/css”>
body { font-family: Arial; }
</style>
</head>
<body>
<h1 id=”headline”>Hello, world.</h1>
<p class=”latintext”>Lorem ipsum...</p>
<p>This is regular text</p>
</body>
</html>The HEAD object typically contains resources and information about the document, but not any text of the document. The STYLE tags delimit a block of CSS code, which the browser will use to style the page. The code within the STYLE tags is not displayed.
The BODY tag now contains three things. H1 is a heading tag. It has an attribute “id” which has the value “headline”. Attribtues are like object properties. The ID attribute is used by CSS to identify tags, and must be unique within a document.
The P tag delimits a paragraph. The default formatting for P is flush left, with a margin above and below. The CLASS attribute is similar to the ID attribute, but more than one tag can have the same value for CLASS. So multiple paragraphs could have the “latintext” class.
Now let’s get into the CSS code. Here’s the code again:
body { font-family: Arial; }
CSS is a simple language with very little syntax. That one line is called a RULE.
The part on the left, “body”, is called the SELECTOR. The part on the right, in braces, { font-family: Arial }, is called the STYLE DEFINITION. The parts inside the braces are called STYLE ATTRIBUTES and VALUES.
What that rules says, is, for all tags that match BODY, set the font to Arial. Only one tag matches, and it’s the whole document.
CSS is a DECLARATIVE LANGUAGE. The programmer declares how the document should look, and the browser figures out how to find the objects that match the selectors, and then apply the style definitions to those objects.
A CSS program is a stream of rules. For any given HTML object, all the styles that apply to the object are combined, with the later rules further down in the stylesheet overriding the earlier rules.
For example, we could add some more rules:
#headline { font-family: “Arial Black”; }
.latintext { font-family: Times; font-style: italic; }
Aha, we see a couple different selectors. The first is a selector by ID:
#headline matches only the object with id=”headline”.
Next is selector by CLASS:
.latintext matches any element with class=”latintext”.
The style definitions are pretty self explanatory, but the selectors require a bit of explanation and example. They are extremely important, though, because understanding selectors will help you to use CSS properly. Without this understanding, you will make some mistakes that might cause problems in future iterations of your website.
CSS Selectors are a kind of querying language. The query is run against a hierarchical database of objects, the HTML DOM.
The least specific selector is the tag. After that is the class, which can apply to more than one tag. There are several more levels of specificity, which I’ll discuss in a moment. Then, way over at the other end of specificity, is the ID.
There are a few other ways to query the DOM.
body h1 { …. } Applies to situations where H1 is within a BODY.
body>h1 { …. } Applies only to situations where body is the parent of h1.
p.latintext { …. } Applies only to P tags with the class=”latintext” attribute.