Getting Started with CSS

So far we have been discussing HTML as a structure-based language.  That is, HTML describes the structure of a web document, not its presentation.  The HTML specification gives guidelines as to how browsers will render any given element to the canvas.  So you can be pretty sure that an <h1> element will be rendered in a larger font than a <p> element.  But, beyond a desire for formatting elements, you have no real guarantee that the browser will follow your wishes.  You have no real control over how the text in your message will appear.  Cascading Style Sheets (CSS) changes that.

CSS Basics

CSS and HTML work together to describe both the structure and the appearance of your web documents.  CSS consists of simple rules that tell browsers how the designer wants a particular element rendered.  The rules are structured and relatively easy to write:

h1{
   color: green;
}

This rules tells the browser to render all <h1> elements in green.  The color property indicates the foreground color (the color of the text).  Later on, we'll discuss other properties to add backgrounds, borders, etc.  Let's examine the rule more closely.

Every CSS rule consists of two parts: a selector and a declaration.  In the rule above, the selector is h1 and the declaration is color: green.  The curly braces are really just separators so that the browser can separate the rules.  The selector is the link between the HTML page and the style.  It tells the browser what will be affected by the declaration.  The declaration specifies the effect.  In the rule above, the selector is based on the type of element: it selects all elements of type <h1>.  This is called a type selector and any HTML element can be used as a type selector.

Now let's look more closely at the declaration.  CSS declarations have two parts as well separated by a colon: a property and a value.  If this sounds to you much like attributes and values you are correct in your thinking.  The concepts are nearly identical apart from how they are written.  Still considering the above rule, the declaration includes the property color and the value green.  The property is a characteristic that the selector possesses.  The value is the precise specification of the property.

Grouping Selectors and Declarations

The designers of the CSS specification intended for it to be an easy way to apply formatting to documents.  Their thought was that they should make it easy enough to write style sheets in a simple text editor.  For obvious reasons, they included some time and space saving qualities.  There are two ways to group CSS rules.  Let's consider the following:

h1{
  font-family: sans-serif;
}
h2{
  font-family: sans-serif;
}
h3{
  font-family: sans-serif;
}

These three rules tell the browser to use a sans-serif font when rendering <h1>, <h2>, and <h3> elements.  An easier way of doing this would be:

h1, h2, h3{
  font-family: sans-serif;
}

And that is perfectly legal CSS!  You are allowed to group the selectors in a comma separated lest and apply declarations to all of them.  Let's consider a second example:

h1{
  font-family: sans-serif;
}
h1{
  font-weight: bold;
}

Since both of these declarations apply to the same selector, you can group them like this:

h1{
  font-family: sans-serif;
  font-weight: bold;
}

Those are the basics of creating style sheets!  Pretty simple, don't you think?  Well, the current CSS specification formally describes around 120 properties that can be applied in a variety of ways.  There are properties for layout, aural presentations, and page breaks - to name a few.  We won't have enough time to discuss them all but we'll cover a fair share.

Applying Style Sheets

Before your style sheets will work, they must be applied to your web documents.  That makes sense!  CSS provides for three ways to apply styles:

• Use the style attribute of the element - this applies the style to the current element only.  For example:

<p style="color: blue;">Some Content</p> 
will render Some Content in blue.

• Apply a document wide style sheet using the <style></style> element - this allows you to specify rules that apply to the entire web document, not just a single element.  It is usually done in the <head></head> section of your documents but can appear just after the <html> element.  Example:

<html>
<head>
<style>
h1{
  color: navy;
}
p{
  color: green;
}
</style>
</head>
<body>
.
.
.
</body>
</html>

• Link an external style sheet using the <link> element - this allows you to specify that a given web document should use an external file for its style sheet and is the preferred implementation.  It is preferred simply because that it makes making changes to an entire site a simple matter of changing a single style sheet.  The <link> element is empty and is specified in the head:

<html>
<head>
<link rel="stylesheet" href="styles/mystyles.css">
</head>

For the most part, you will end up using a combination of the three approaches as CSS works from the inside out regarding applying styles.  Usually, you will specify global styles in an external file.  These are the styles that you will apply to every document in your site.  You can override these styles by using the <style></style> element in any single document as the browser will look first in the local document for styles and then to the external file.  Finally, you can override either of the two above by using the style attribute as the attribute is more local than the document for the given element.  Talk about freedom!

Inheritance and Style Sheets

Part of the name Cascading Style Sheets, the Cascading part, implies inheritance.  Simply put, when you specify a style rule for a given HTML element, the style cascades down to any child element.  Here's an example:

<style>
  h1, h2, h3, p, li {
   color: green;
}
</style>

This rule tells the browser to color the text in the above elements green.  That seems like a lot of work, however, and listing all of the elements used in your pages might be more effort than it's worth.  CSS accounts for this through inheritance:

<style>
 body{
  color: green;
}
</style>

This achieves the same effect as above simply because h1, h2, h3, p, and li are all children of the body element (they can only exist within <body></body> tags).  This new style tells the browser to render ALL of the elements in the the body green.  But what if you want one of the elements to look different?  No problem, just include it in the style sheet.  It will be more local to the element than the body element is:

<style>
 body{
  color: green;
}
h1{
  color: navy;
}
</style>

This will render all of the body elements in green EXCEPT h1 elements.  H1 elements will be colored blue.

Those are the basics regarding Cascading Style Sheets.  In the next section, we'll be writing style sheets for many common tasks and we'll let HTML do what it was designed for: structuring documents.