How Cascading Style Sheets (CSS) Work - dummies

How Cascading Style Sheets (CSS) Work

By Lisa Lopuck

CSS, or Cascading Style Sheets, is code that controls not only the visual appearance of your individual HTML elements but also where the elements appear in relationship to one another, and sometimes how they interact and animate. Between HTML, CSS, and JavaScript, you code the entire presentation layer of a website. Powering the site to perform dynamic functions or connect to a CMS (content management system) database requires additional code such as PHP.

CSS has evolved its capabilities dramatically in the last few years; it’s now possible to design visually rich websites — with (for example) rounded-corner boxes, simple gradients, and shadowed text — without using bitmap graphics at all. All these cool effects can be defined as code snippets and then applied to whatever HTML object you feel needs some gussying up. If you ever require an across-the-board change to your website, updating one CSS line of code will do the trick.

This beautiful website for Front Row utilizes CSS and HTML5 to optimize its use of graphics.  [Cred
Credit: © Front Row Studios
This beautiful website for Front Row utilizes CSS and HTML5 to optimize its use of graphics.

To get your CSS capabilities off the ground, you start by defining a series of styles for each element you want to affect, whether it’s an HTML component (like a link or a headline) or a CSS element (such as a div container). You can do all this defining within the HTML document itself, but it’s more common to define your styles in a document separate from your HTML page. Note as well that you can define a series of modifiers, called classes, that you can call upon in your HTML code to further affect the way elements appear — it’s similar to how adjectives help specify the noun(s) they’re attached to.

Here’s an example of CSS code that makes all your HTML <h1> headlines appear red and set in 18-point Arial:

h1 {     
color: #e80f0f;
font-family: Arial, Helvetica, sans-serif;
margin: 20px 20px 32px;
line-height: 22px;
font-size: 18px; 

This code is saved inside a separate document — in this case, a document called sample.css. The HTML page refers to this external document up in the head section of the page. Then, anywhere on the page that the <h1> tag is used, the text that follows will render with the settings configured back in the CSS document.

This split-screen view in Dreamweaver shows the HTML code in the top panel and the resulting format
This split-screen view in Dreamweaver shows the HTML code in the top panel and the resulting formatting in the bottom panel.

Now, if you wanted to have a special-case headline that made certain headlines larger with an even brighter red, you could set up a custom CSS class to handle that task and append it to the <h1> tag in your HTML. You can name a class anything you’d like — just make sure it has a period in front of the name and has no spaces in the name, like this:

.big { 
font-size: 24px; 
line-height: 26px;
color: #e80f0f; 

As shown in the next example, the first <h1> headline appears as the CSS code has defined. The second <h1> headline has the .big class appended to the <h1> tag so the result is a larger, brighter headline.

Notice that in the CSS .big class code example given earlier, you don’t have to repeat the font and margin preferences. These settings are already accounted for in the original <h1> styling. You need only outline the changes. The word cascade in Cascading Style Sheets means your styles are passed along (inherited) by style sheets that get their instructions from your original preferences — in this case, those you set up in the class. Basically, when you set up a style, any element that gets assigned that style “cascades through” to the other styles, as directed by your settings, unless you apply a change.

You create visual effects in CSS like this by using approved properties such as font-size, margin, and color, as used in the examples just given here. Therefore, as you might imagine, the key to getting a handle on CSS (and on what you can and can’t do with it) lies in studying all the available CSS properties and experimenting with what sort of values you can enter for each one. You can find pretty comprehensive lists online if you search CSS properties list and values.

<h1> tag has normal CSS styling and the second
Here the first <h1> tag has normal CSS styling and the second <h1> tag has the .big class appended to it.