Lesson 7 - CSS

Cascading Style Sheets are a very effective and useful tool for creating and adjusting the styles of HTML elements. Arguably the most important aspect of style sheets is that they provide a single place to alter the style of HTML elements across every page on an entire website (even multiple websites). As you saw in the last lesson, if you wanted to set the color of every link on your website to any color other than the default without CSS you would have set insert the font element around every single link on your site. Using CSS however, you could create a style in a single location to apply to all links on the entire site.

There are three different ways to create styles using CSS. You can use inline, embedded, or external styles. Inline styles are applied to a single element on a single page through the used of the style attribute that can be used on any HTML element. Embedded styles are added in the Head section of the HTML page, and apply to that entire page. External styles are created in a separate file and can be linked to many web pages. The lowest level style always overrides the highest when two or more of these three are applied to a single element; so an inline style takes precedence over an embedded one or an external one, an embedded style takes precedence over an external one, and an external style is only used when there is no embedded or inline style for the element it pertains to.

The markup for styles is slightly different for each of the three types of styles. Inline styles are written as follows in a style attribute within an elements opening tag as follows.
<p style="property1: value1; property2: value2; property3: value3">This is a paragraph with style changes.</p>
Remember: this style change only applies to the element it is contained within.

Embedded styles are placed in the head portion of the page and are enclosed in an opening and closing style tag, the markup is as follows.
<head>
<style type="text/css">

</style>
</head>
This style change applies to all elements of the specified selector within the page this code block is in.

External style sheets are contained within a separate file. To create a CSS file open a blank text document and save it with a .css file type extension. Then you place all of your styles within that file as follows.
selector1 {property1: value1;
     property2: value2;
     property3: value3
}

selector2 {property4: value4;
     property5: value5;
     property6: value6
}
...
...
...
After you have finished creating this file you can link it into any other HTML file using the following code placed within that files Head section.
<link rel="stylesheet" href="http://www.someDomain.com/Styles/styleSheet.css">
Now if you decide for instance to change the style of all paragraphs on your entire site, then you would only need to change the single CSS file that is linked to by all of the pages on your site.

There are several different ways to list selectors. The simplest way is the one that you just saw, in which a single element name (such as a, p, table, etc.) is used as a selector. If there are a group of identical styles that you would like to apply to more than one element, you can list them comma separated.

A contextual selector can be used in cases where you want to set a style of a certain element but only if it is incased in another element. For instance, if you wanted to alter the color of any bold text within a paragraph, you could list them in the order of outside tag first to inside tag last separated by some white space (space, tab, line break). For this example your selector would be "p b". Contextual selectors can also be included in a comma separated list.

Selectors can be created to only affect elements with particular id or class attribute values. To use this method you have to place an id or class attribute and value into the elements that you would like to have a consistent style. One application for this could be within a paragraph element to place a special emphasis for a specific purpose, such as to insure the user sees a warning or alert. If we decided to call this class or id "alert" we would add a class or id attribute to the paragraph tag inclosing the alert message with a value of "alert". If you set the class attribute to "alert" then you would create a class selector called "p.alert" to access those alerts. If you set the id attribute to "alert" the you would create an id selector called "p#alert" to access those alerts.

CSS also provides several pseudo-selectors but we will only look at four of them. These four are :link, :visited, :hover and :active and all four pertain to anchor elements. The :link pseudo-class allows you to create a style to be displayed for unvisited links. The :visited pseudo-class allows you to create a style to be displayed for visited links. The :hover pseudo-class allows you to create a style to be displayed when the users cursor hovers over a link. The :active pseudo-class allows you to create a style to be displayed for active links. All of these pseudo-selectors are specified by a:pseudo-class example "a:hover".

There are a vast number of properties that can be used for most HTML elements, with many properties that are able to be used for multiple elements. To view a complete list of all CSS properties and informatino about each, please visit the W3C website, you can also find supplemental instructions on CSS here.

Example:
Please look over the following example (source and formatted page). Feel free to experiment with the source code. I attempted to address some of the problems beginners tend to have when first learning how to use tables, particularly with gaps between pictures that they wanted to appear to be a single picture.

Example:
The following example highlights a few aspects of CSS. Feel free to look over the source code and play around with it.

View Page Source
View Style Sheet Source
View Formatted Page