Introduction to CSS

What is CSS?

As we have seen from the few examples of plain HTML I have shown so far, plain HTML pages have an appearance that is, well, plain. Fortunately, modern HTML offers an extensive mechanism to modify the appearance of just about everything in an HTML page. This mechanism is CSS, which stands for Cascading Style Sheets. The key word here is style: CSS is a system for applying style rules to HTML elements.

To apply CSS rules to an HTML document we can take one of three approaches:

We can apply styling directly to an HTML element by using the style attribute.
We can place a <style> element containing CSS rules directly into the page.
We can link a CSS style sheet into a page via a <link> element.

In this example page you will see examples of all three approaches. As usual, you can do a view source on this page to look at the underlying HTML code to view how this page integrates CSS rules.

The structure of a CSS rule

A CSS style sheet is a list of CSS rules. Each rule has the following structure:

<selector> <declaration>

A declaration takes the form

{ <property list> }

A property list is a list of one or more properties. Each property has the form

<property name>: <values>

CSS selectors

The first important piece of information in a CSS rule is its selector. The purpose of a selector is to specify which element or elements in a page the rule will apply to.

There are three basic approaches you can use with a selector.

You can target all elements of a particular type.
You can target all elements of a particular type belonging to a class.
You can target one specific element via its id.

Here are some examples taken from the CSS rules used in this page

The first example targets all links in a page:

a { font-family: 'Droid Serif', serif; color: #004987; }

This rule affects two properties of the link: its font and its color. The value for the font-family property gives a list of two options. The first option, the font Droid Serif, is the requested value. The second value, serif, is a fall-back value to use in case the first option is not available. The color property uses an RGB value to specify the requested color.

You can target multiple different elements with a single rule. The next example targets a couple of different header types along with the th element:

h1, h2,  th { font-family: 'Droid Sans', sans-serif;
              color: White;
              background-color: #003D6A;
              padding: 5px; }

The next example shows the use of a CSS class:

h1.banner { text-align: center;
            font-size: 300%;
            padding: 20px; }

This rule applies only to h1 elements with a class attribute of "banner". If you view the source of this page you will see an element of this type at the top of the page.

Multiple rules

A given element in an HTML page may end up having multiple rules applied to it. For example, the style sheet for this page contains the rule

            body { background-color: #FFFFFA; /* A lighter shade of Ivory */ }

This rule sets the background color for the body, effectively setting the background color for every element within the page.

Next, more specific rules may apply to elements with a page. The rules

p, li, figcaption { font-family: 'Droid Serif', serif;
	                color: DarkSlateGray; }
p.center { text-align: center; }

set some options that apply to all p elements, and then add some additional properties that apply only to p elements with the center class.

The developer tools in Chrome can show you all of the CSS rules that apply to a particular element in a page. Open the developer tools and click the Elements tab to access this information. To view the properties for any element in the page, right-click on the element and choose the Inspect command. This will highlight the element and show you additional information for the element, including a listing of all of the CSS rules that are currently being applied to it. (Click the Styles tab to see this information.)

What are the most important properties?

A big part of learning CSS is knowing what properties are available for a given element and what values those properties can take. Below is a quick guide to some of the most important properties.

Color

Every element in a page has two colors associated with it: its color and its background color.

Property	Description	Values
color	Sets text color	rgb color, color number, or named color
background-color	Sets background color	rgb color, color number, or named color

Text

Text is everywhere in an HTML document. There are a number of important properties that you can apply to text, starting with its font-family property, that specifies the font to use for the text.

Property	Description	Values
font-family	Sets the font	Font name, or generic font (serif, sans-serif, or monospace)
font-size	Sets font size	Pixels, percent, or em units
font-weight	Sets bold or normal	normal or bold
font-style	Sets font style	normal, italic, or oblique
line-height	Sets height for a line of text	Pixels, percent, or em units
text-align	Sets text justification	left, right, center, or justify

Layout

Every element in an HTML page also has a number of properties to control its layout. Through these properties you can control the amount of extra space around the element, its width and height, and the presence or absence of borders.

Property	Description	Values
width	Sets the width for an element	Pixels, percent, or em units
padding	Sets distance between content and border	Pixels, percent, or em units
border	Sets border detail	[type] [size] [color]
margin	Sets spacing between border and neighboring elements	(Pixels, percent, or em units) or (auto)
float	Moves element out of normal flow	left or right

Learning more

As we have seen, there a great many properties you can control through the use of CSS. The next thing you will need is a comprehensive reference that gives descriptions and examples for these properties.

w3schools.com has a handy reference on css, including a table of css color names and an extensive set of reference pages on css.