If you’re thinking at this point that working with markup and CSS is no play, well, your frustration is well founded. It’s imperative that you get the complexities down, and I assure you that if you’ve made it through thus far, you’re grasping complex ideas.

But no doubt you want to put those ideas to work and really get a feel for how to use CSS to make things look good. After all, that’s what I keep promising, right?

Fortunately, the next chapter sets you up for a little fun: putting your imagination to work.

You’ll be using images and color to spruce up your documents, and exploring the fine control that CSS offers you when it comes to working with imagery and color in your designs.

Before you can actually put CSS to use, you need to know some important things about the language and how to use it effectively. I’ll try to make this quick and painless because I know you want to get down to it.

CSS Rules
CSS rules are made up of a selector and at least one declaration. A selector is the code that selects the HTML to which you want to apply the style rule. We’ll be focusing on common selectors in this book, but you can use more than a dozen selector types as you become more proficient at CSS. A declaration is made up of at least one CSS property and related property value. CSS properties define the style:

h1 {color: red;}

 

The H1 is the selector for your h1 headers, and the declaration is made up of the color property with a value of red. Simply said, this rule turns all H1 elements red. You’ll note that the syntax of the style rule looks different from what you’ve seen in HTML. The curly braces contain the declarations, each property is followed by a colon, and a semicolon is used after each property. You can have as many properties as you want in a rule.

Applying CSS
Six types of style sheets exist:

Browser style This is the default style sheet within a browser. If you declare no style rules, these defaults are applied.

User style A user can write a style sheet and make it override any styles you create by changing a setting in the browser. These are used infrequently but can be helpful for individuals with special needs, such as low vision. In such a case, the user will create high-contrast, large-font styles that override your own.

Inline style This is style that is used right in the individual element and applied via the style attribute. It can be very useful for one-time styles by element, but it isn’t considered ideal.

Embedded style This is style that controls one document and is placed inside the style element within the HTML document.

Linked style This is a style sheet that is linked to an HTML document using the link element in the head of the document. Any document linked to this style sheet gets the styles, and here’s where the management power of CSS is found.

Imported style This is similar to linked styles, but it enables you to import styles into a linked style sheet as well as directly into a document. This is useful in workarounds and when managing many documents.

You’ll see examples of these style sheets as we progress throughout the chapter.

The Cascade
People often wonder where the term cascading comes from. The cascade is an application hierarchy, which is a fancy term for a system of how rules are applied. If you examine the five types of style sheets just introduced, you’ll notice that there are numerous means of applying style to the same document.

What if I’ve got an inline style, an embedded style sheet, and a linked style sheet? The cascade determines how the rules are applied. In the case of style sheet types, user style overrides all other styles; inline style trumps embedded, linked, and imported styles; embedded style takes precedence over inline style; and linked and imported styles are treated equally, applying everywhere any of these other style sheet types are not applied. Browser style comes into play only if no style for a given element is provided; in that case, the browser style is applied.

The cascade also refers to the manner in which multiple style sheets are applied. If you have three linked style sheets, the one on the bottom is the one that is interpreted if any conflicts exist among those styles.

Inheritance
Inheritance means that styles are inherited from their parent elements. Consider the following:

My header

Subsequent Text

 

Both the h1 and p elements are considered children of the body element. The styles you give to the body will be inherited by the children until you make anothe
r rule that overrides the inherited style. Not all properties, such as margins and padding, are inherited in CSS but almost all others are.

Specificity
Finally, if there are conflicts within any of your style sheets that aren’t resolved by the cascade, CSS has an algorithm that resolves the conflict. This algorithm is based on how specific a rule is. It’s a bit heavy for this discussion but worthy of mention.

Cascading Style Sheets have been around since the end of 1996. Despite the relative longevity of the technology, its use in real-world web design has been limited to managing fonts and color, at least until recently. This limitation was imposed by the lack of consistent browser support. Because not all browsers managed CSS equally (if at all), it has been very difficult for designers to tap into the true power of style sheets. Instead, there’s been a reliance on HTML for presentation.

Now we have far better support for CSS, so to tap into its many valuable features, web designers are moving away from HTML as a means of adding style and laying out pages, and into pure CSS design. Why is this so important? The reasons are many:

Keeping presentation separate from the document means you can style that document for numerous media, including the screen, print, projection, and even handheld devices.

Separating presentation from the document means a lighter document, which, in turn, means the page loads and renders faster, making for happier visitors.

CSS offers ways to control one document or millions of documents. Any time you’d like to make a change, you change that style in one location and automatically update to all the documents with which that CSS is connected. In HTML, this couldn’t be done.

CSS documents are cached. This means they are loaded into your browser’s memory one time. As you move within a site, the browser never has to reinterpret the styles. The results are more fluid movement from page to page and faster-loading pages, which, of course, is always desirable.

By separating presentation from structure and content, accessibility is easily achieved. Documents that don’t have heavy tables and lots of presentational HTML are inherently more accessible than documents that do.

Clearly, CSS offers a lot. In this chapter, you’ll learn how to set up CSS to be most efficient and flexible for your designs.

In relative positioning, elements on a page are displayed according to the flow of the page, with each element physically appearing after the element preceding it on the page. This is the way elements have been positioned in every HTML document you’ve seen throughout the book thus far. Although relative positioning has its merits, style sheets offer another approach that gives you much more control over how to position elements on a page.

This hour explores HTML positioning as controlled by style sheets. You’ll find out how to carry out both relative and absolute positioning, as well as how to deliberately overlap elements and control how they stack on top of each other. You’ll also find out how to tweak the margins and spacing between elements on a page. By the end of this hour, you’ll realize why tables are now passé as a page layout mechanismyou’ll realize that style sheets are just too powerful not to use.