Stylesheets are a powerful tool. At their worst they can cause wayward images and broken layouts, while at their best they allow us make a page look completely different by the use of just one file. A basic understanding of CSS is very valuable for web developers and designers working in a team, because the HTML tags generated by the developers form the framework for attaching styles (the design) to the web page.

What is CSS?

A description from HTML Dog’s CSS Beginner Tutorial:

CSS, or Cascading Styles Sheets, is a way to style HTML. Whereas the HTML is the content, the style sheet is the presentation of that document.

Styles don’t smell or taste anything like HTML, they have a format of ‘property: value‘ and most properties can be applied to most HTML tags.

CSS is a collection of rules that tell the browser how to display HTML. These are usually stored in external stylesheet files or in the <style> section in the head of the HTML page.

A snippet of CSS might look something like this:

p {
   font-family: Arial, Verdana, sans-serif;
   font-size: 12px;
   color: #fff;
}

Which has the format:

selector {
   property: value;
}

CSS Selectors (Tags, Classes and IDs)

Stylesheet rules are applied to HTML through selectors. The selectors can be combined in many ways and the rules are inherited through the “cascading” feature of CSS.

Tag Selectors

HTML tag selectors are used for global styles – styles that you want to apply to every HTML element of a certain type on the page. For example, if you wanted to style all links (which use the <a> tag) a certain way, you would write something like:

a {
   color: red;
}

This would apply a red colour to all links.

Class Selectors

Class selectors are used for repeated elements on the page. Class selectors are written as a class name preceded by a full stop ( . ) and are applied to HTML elements with matching “class” attributes. For example, if you were creating a menu and wanted to style the selected item differently, the HTML and CSS might look something like this:

<ul>
   <li><a>Home</a></li>
   <li class="selected"><a>About</a></li>
   <li><a>Contact Me</a></li>
</ul>

.selected {
  font-weight: bold;
}

This would apply a bold style to the “selected” list item.

Class selectors can be combined with HTML selectors for greater specificity and flexibility:

a {
  color: red;
}

.selected {
  font-weight: bold;
}

.selected a {
  color: black;
}

This would result in links being red by default, but the selected link being bold and black.

ID Selectors

ID selectors are used for a single, unique element on the page. ID selectors are written as the ID name preceded by a hash (#) and are applied to the HTML element with the matching “id” attribute. Generally, elements with IDs tend to denote a region of a page which might require different styling. For example, if you wanted to style the links in your menu a different way to the rest of the page:

<ul id="navigation">
   <li><a>Home</a></li>
   <li class="selected"><a>About</a></li>
   <li><a>Contact Me</a></li>
</ul>
...
<p>This is a paragraph with a <a>link</a>.</p>

a {
   color: red;
}

#navigation a {
   color: black;
}

This would make the links inside the navigation list black, while the rest of the links would be red, as the #navigation selector makes the “black” rule take precendence.

ID selectors can be combined with tag and class selectors like so:

#navigation .selected a {
  font-weight: bold;
}

In addition to the rules above, this would make the “About” link bold and black.

Part 3: Putting it all together >