Understanding Cascading Style Sheets
This chapter is from the book
This chapter is from the book
This chapter is from the book
In the previous hour, you learned the basics of HTML, including how to set up a skeletal HTML template for all your web content. In this hour, you learn how to fine-tune the display of your web content using Cascading Style Sheets (CSS).
The concept behind stylesheets is simple: You create a stylesheet document that specifies the fonts, colors, spacing, and other characteristics that establish a unique look for a website. You then link every page that should have that look to the stylesheet instead of specifying all those styles repeatedly in each separate document. Therefore, when you decide to change your official corporate typeface or color scheme, you can modify all your web pages at once just by changing one or two entries in your stylesheet—you don’t have to change them in all your static web files. So a stylesheet is a grouping of formatting instructions that control the appearance of several HTML pages at once.
Stylesheets enable you to set a great number of formatting characteristics, including exact typeface controls, letter and line spacing, and margins and page borders, just to name a few. Stylesheets also enable you to specify sizes and other measurements in familiar units, such as inches, millimeters, points, and picas. In addition, you can use stylesheets to precisely position graphics and text anywhere on a web page, either at specific coordinates or relative to other items on the page.
In short, stylesheets bring a sophisticated level of display to the web. And they do so, if you’ll pardon the expression, with style.
How CSS Works
The technology behind stylesheets is called CSS, or Cascading Style Sheets. CSS is a language that defines style constructs such as fonts, colors, and positioning, which describe how information on a web page is formatted and displayed. CSS styles can be stored directly in an HTML web page or in a separate stylesheet file. Either way, stylesheets contain style rules that apply styles to elements of a given type. When used externally, stylesheet rules are placed in an external stylesheet document with the file extension .css.
A style rule is a formatting instruction that can be applied to an element on a web page, such as a paragraph of text or a link. Style rules consist of one or more style properties and their associated values. An internal stylesheet is placed directly within a web page, whereas an external stylesheet exists in a separate document and is simply linked to a web page via a special tag—more on this tag in a moment.
The cascading part of the name CSS refers to the manner in which stylesheet rules are applied to elements in an HTML document. More specifically, styles in a CSS stylesheet form a hierarchy in which more specific styles override more general styles. It is the responsibility of CSS to determine the precedence of style rules according to this hierarchy, which establishes a cascading effect. If that sounds a bit confusing, just think of the cascading mechanism in CSS as being similar to genetic inheritance, in which general traits are passed from parents to a child, but more specific traits are entirely unique to the child. Base style rules are applied throughout a stylesheet but can be overridden by more specific style rules.
A quick example should clear things up. Take a look at the following code to see whether you can tell what’s going on with the color of the text:
<divstyle="color:green">This text is green.<pstyle="color:blue">This text is blue.</p><p>This text is still green.</p></div>
In the previous example, the color green is applied to the <div> tag via the color style property. Therefore, the text in the <div> tag is colored green. Because both <p> tags are children of the <div> tag, the green text style cascades down to them. However, the first <p> tag overrides the color style and changes it to blue. The end result is that the first line (not surrounded by a paragraph tag) is green, the first official paragraph is blue, and the second official paragraph retains the cascaded green color.
If you made it through that description on your own and came out on the other end unscathed, congratulations—that’s half the battle. Understanding CSS isn’t like understanding rocket science, and the more you practice, the more it will become clear. The real trick is developing the aesthetic design sense that you can then apply to your online presence through CSS.
Like many web technologies, CSS has evolved over the years. The original version of CSS, known as Cascading Style Sheets Level 1 (CSS1), was created in 1996. The later CSS 2 standard was created in 1998, and CSS 2 is still in use today; all modern web browsers support CSS 2. The latest version of CSS is CSS3, which builds on the strong foundation laid by its predecessors but adds advanced functionality to enhance the online experience. Throughout this book, you learn core CSS, including new elements of CSS3 that are applicable to the basic design and functionality that this text covers. So when I talk about CSS throughout the book, I’m referring to CSS3.
You’ll find a complete reference guide to CSS at http://www.w3.org/Style/CSS/. The rest of this hour explains the basics of putting CSS to good use.