web interactivity

Short Intro to CSS Styles

Styles are rules about how things look on your HTML page. Each style modifies an HTML tag (like a <p> tag, an <h1>, an <img>, or the <body> tag. By using a CSS style you can change the color or size of the text, whether text is centered or not, what font you're using, whether or not pictures have borders or drop-shadows, how the pictures are positioned, and dozens of other things on your pages.

Every rule in a style sheet has three different parts: the selector, the declaration, and the property/value pair (or pairs). Take a look at the CSS style example below:

p {
background-color: blue;
}

In this example p is the selector, the HTML element that is going to be affected by the style. In other words, all paragraph tags on your page are going to be controlled by this rule. Following the p, inside the curly brackets, is the declaration; this part of the style decides what is going to happen to all those p tags.

The declaration is made up of property/value pairs; a CSS rule might have just one or possibly many of these pairs. The property in this case is background-color (there are at least ninety others). Every property has a value attached. If the property is text-size for instance, the value might be 16px (sixteen pixels). In this case the value is a color name, which might be rendered as a word (red or blue), a chunk of hexidecimal code (#0033CC is a shade of dark blue), or as an rgba value; dark blue would be rgba(0,0,255,1).

Styles can be added to your pages in three different ways:

1. they can be placed in a external style sheet, a file that is separate from your HTML page and is linked to it. A great advantage of an external style sheet is that it can be used to control the look of dozens of HTML pages (an entire web site, in fact) from tiny changes to this one file.

2. they can be placed inside of a <style> tag in the <head> portion of your HTML page. Styles defined in the <head> only affect that page and no other, which is an advantage when you are trying to style something that will never be duplicated on another page. The rule about blue paragraphs we defined above would be seen like this in the <head>:

<style type="text/css">
p {
background-color: blue;
}
</style>

3. they can be placed within the HTML itself, in the <body> portion of your page. These so-called 'inline styles' are used to change one small part of your page (a single word, perhaps) and might never be repeated elsewhere. In other words, they are good for making exceptions to rules you have created somewhere else. Here's how an inline style would be used to make the background of the word 'things' blue:

<p>The best <span style="background-color:blue;">things</span> in life are free!</p>