HTML Lesson 2:
Cascading Style Sheets
CSS
CSS, or Cascading Style Sheets, is a style sheet language that describes the look of an HTML or XHTML document.The purpose of CSS is to separate content (text, graphics, etc.) from presentation (font color, positioning, etc). Web browsers that are CSS-compliant must follow the CSS rules so web developers know what to expect. The 
first fully CSS-compliant browser was Internet Explorer 5.0 for the Macintosh. The Opera browser followed soon after. Today, all modern browsers support the CSS1 standard, and they all are close to supporting CSS2. CSS3 is currently in development, but modern browsers have already begun to support aspects of it. There are a number of cool aspects of CSS3 you can use, including the box-shadow property that can add a shadow to divs. Unfortunately, this property is only included in a few browsers so you can't rely on it just yet.
Content vs Presentation
The content of the page is the most important part. Content is the meat of the page that people want to see. Mainly this is text, but it can also include images that are used to convey important information such as the images included in the lessons on this site. To see a website stripped down to just its content, use the Web Developer Toolbar in Firefox and go to CSS>Disable Styles>All Styles. Using this tool will show you a bare bones site, but if it is a well-made website it should still be usable and you should still be able to access everything you need. Try it on this site to see how it works.
Presentation is what is used to make a web page look nicer. This includes elements such as color, font, position, and images that are not essential to the page such as background images and images that are mainly used for decoration. CSS deals with the presentation of the page, which allows you to separate it from the content. We have already used CSS a bit when we set classes and IDs to change how elements looked and where they were positioned.
One of the best uses of CSS on the web can be found at the CSS Zen Garden. That site challenges web developers to come up with themes to change the presentation of the page, but the content must remain the same. They do this using different cascading style sheets. Check out a few of the different themes and note how the page text does not change.
In-Line Styles
The first type of style you can add to your web page is an in-line style. As the name suggests, these styles are embedded in a line of your HTML code. These styles will override the other two style types. To add in-line styles you need to view the HTML code of your web page.
- 1. Use Manage Sites to load your site from Lesson 2.
- 2. Create a new HTML page called styling.html.
- 3. Add a div to that page with some text.
- 4. Use the Code Button to view your HTML code.
- 5. Find the <div> tag that represents the text you added to your document.
- 6. Type a space after the div.
- 7. Type style=" after the space.
After typing the quote you will see a list pop up. This list is all of the styles available for you to modify. This list is composed of the styles in the window that appears when you are defining a CSS rule, such as changing the positioning to absolute. You can either type the property you want to change, or double-click it in the list.
- 8. Double-click the color style.
- 9. Select a color in the window that appears.
- 10. Return to Design View.
When you return to Design View you should notice that the color of your text has changed. You can edit as many styles as you want in this way. To add another style you need to type a semicolon (;) to indicate the end of one style and then a space to bring up the style window again.
You should use in-line styles in rare cases where you need to override an embedded or external style.
Embedded Styles
We have already used embedded styles in the first few lessons. These are styles that are placed in a <style> tag in the <head> section of your HTML page and can only apply to elements on that page. Whenever you create a style that you define in "this document only" you are creating an embedded style. These styles override the final style type, but will be overridden by in-line styles.
You should use these styles only for styles that you know will only be used on a single page.
External Style Sheets
An external style sheet is the final type of style, and the type you will use for most of your projects. The advantage of using style sheets is that you can link them to any number of pages so one style sheet can hold the design for hundreds of HTML pages. Adding style sheets is easy since we already know how to add embedded styles. There is only one difference in the steps for adding embedded styles.
- 11. Add a new CSS Rule using the button in the CSS Tab.
- 12. Under the "Define In" section choose "(New Style Sheet File)".
- 13. Name your style sheet (style.css is a commonly-used name) and then set any CSS rules you want.
If you return to Code View you will notice that a line was added to the <head> section of your code that looks like the following line:
<link href="style.css" rel="style sheet" type="text/css" />
The name "style.css" may differ depending on the name you gave your style sheet.
Styles that may be used on more than one page should be included in a stylesheet.