CSS

From DreamHost
Jump to: navigation, search

Cascading Style Sheets are a truly beautiful thing. It brings a tear to the eye, really...

Do any of these sound like you?

  • You've just finished a client's website of several dozen pages, carefully setting everything up "just so." You show it to them and they say that it's great... if only the font on all of the pages were just a little bit bigger! Oh. And while you're at it, could you change the background colour to a little bit lighter blue? Oh! And...
  • You've had to spend so many hours debugging multi-multi-multi-level nested table-based layouts, that by the end you were seeing <td>s and <tr>s in your dreams and muttering something in your sleep about "colspans."
  • You frequently get really bored with your website layout and periodically just scrap the whole thing and start over, causing you to retread ground again and again in recreating your pages from scratch.
  • You just discovered the folks at The Web Standards Project.

If so, Cascading Style Sheets might be for you!

How do they work?

Here's a simple example of a style sheet rule:

h1, h2 {
    color: white;
    background-color: green;
}

This will look for all h1 or h2 tags and change their foreground colour to white and their background colours to green.

You can also setup ids to refer to one particular instance of something, and classes to apply special rules to only certain tags and not others. In the following example, all text within the "header" div will have a black border around it, and the "intro" paragraph will have an increased font size.

example.css

#header {
    border: 1px solid black;
}

.highlight {
    font-size: 150%;
}

example.html

<div id="header">
  <p class="highlight">This is a special paragraph.</p>
  <p>This is just a normal paragraph.</p>
  <p class="highlight">Here's another special paragraph.</p>
</div>

How can I use them on my pages?

There are three ways to apply style sheets to a page:

External, which involves linking to a .css file that has a list of rules. This is the most flexible method, because you can link each page of your site to the same CSS and then any changes made to that one file apply globally to the entire site, instantly!

Example:

style.css:

/* Any rules in here will be magically applied to all web pages that link to this file! */
/* Use external CSS for formatting that's used throughout your site */
body {
    background-color: red;
    color: black;
    font-family: Verdana, Arial, sans-serif;
}

h1 {
    text-align: center;
}

test.html (note: all the fancy DOCTYPE stuff snipped for clarity)

<html>
  <head>
    <title>CSS Example</title>
    <!-- This is how we link an external style sheet... -->
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <h1>Welcome!</h1>
    <p>Here is my cool page!</p>
  </body>
</html>

Embedded styles are placed in a <style> block in the <head> section of your page. This is useful for "oddball" pages which have styles that don't fit the norm. Any rules in here which clash with the ones specified in your external sheets will be overridden (this is where the "Cascading" part of CSS comes in).

Example:

<html>
  <head>
    <title>CSS Example</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <!-- On this page only, let's make the headings red -->
    <style type="text/css">
    h1 { color: red; }
    </style>
  </head>
  <body>
    <h1>Welcome!</h1>
    <p>Here is my cool page!</p>
  </body>
</html>

Inline styles are individual tags with a style attribute added. Any changes here will override embedded or external rules, if they exist, and they apply only to the section of the page . Try to avoid these when you can, but they are useful once in awhile for marking some really oddball thing that only appears once in your website.

Example:

<p style="color: green">This paragraph is green for some random reason</p>

<p>This paragraph will be the "normal" colour.</p>

External Links

See Also