Cascading Style Sheets

Types of Style Sheets

Embedded style sheets apply styles to only the page it is on as an internal part of the HTML document and all code is written in the <head> tag.

Example:<head> <style type="text/css">  </style></head>
External (linked) style sheets allow you to format alot of pages and changing your mind will not be a hassle. The style sheet is stored with a .css extension that contains only lists of stlyes. You link to your styles instead of embedding the code.

Link example: <link rel="stylesheet" href="mystyles.css" type="text/css /">
Inline styles are "on-off" styles or styles that don't need to be defined in your style sheet. An inline style will override a style that is applied with an external .css sheet. This style is like the embedded, as it is part of the HTML document. The code is written as an attribute of the tag you want to style.

Example: <h1 style="color: blue; font-family: Times New Roman"> This text would be blue in Times New Roman font. </h1>

Understanding Selector Types on a CSS

Type selectors redefines the format of a tag be a paragraph or heading must commonly.

p {color: green;} or h1 {font: Arial;}
ID selector can be use when you want to style one element on your site like the nav-bar, a logo, the background color, or the footer. No other element will have the same style applied. The (#) identifies it as an ID selector.

#divpurplecenter {font-size: 24px; color: purple; text-align: center; }

<div id="divpurplecenter">

This text is aligned center with purple, 24 pt text

</div>

As a general rule, it is best to name your ID's with the tag first and then with the purpose of that particular tag.

Class selectors can style any element with a class attribute that matches the selector. Be careful not to over do it with these.

.red {color: red;}

<p class="red"> This text is red </p>

Pseudo-classes are usually used to style links by changing the style when a user interacts with a link.
- a:link -- This style is applied to the link that has not been visited.
- a:visited -- This style is applied to the link if it has been visitied.
- a:hover -- This style is applied to the link when it is under the user's cursor.
- a:active -- This style is applied when the user clicks, or activates, the link.
LoVe HAte can help you to remember to define them in the following order: :link, :visited, :hover, and then :active. Because of the cascading nature of style sheets, these classes will be applied in the order they are defined.

Block Level Elements vs. Inline Elements

Block-level elements reserve space for itself so nothing can sit to the right or to the left of it. This is used so each element stack up nicely below the one before it.
Inline elements don't reserve any more space than it takes to display them, they display in a line, just like a row of text.