CSS Intro

Web developers separate content from presentation by using Hypertext Markup Language (HTML) to describe the structure of a Web page in terms of paragraphs, lists, tables, forms, etc. and Cascading Style Sheets (CSS) to describe the presentation of Web pages in terms of colors, fonts, etc. By separating structure from presentation, a CSS design can be applied to multiple pages.

Advantages of CSS

  • Consistent Design - by linking one style sheet to lots of pages, all pages will share the same consistent design
  • Leverage Your Efforts - make a design change in one style sheet and all pages linked to that style sheet will automatically reflect the change
  • Better Design Control - CSS gives us much more control over over format, position, line spacing, margins, etc. that are features common to Word Processors, not available with HTML

Browser Support

Unfortunately, not all browsers support every CSS feature. For this reason, it is a good idea to view your Web pages in all the major browsers; Internet Explorer, Firefox, Chrome, Safari, Opera. Keep in mind that not everyone runs the latest browser version. As a result, it is prudent to view your page in both the current browser version, and the most recent browser version.

Style Syntax

A style is a description of how to present Web page content. A style is composed of three parts:

  1. selector - identifies the element, class, or ID that we want to style (apply the style to)
  2. property or attribute - specifies the aspect of the selector to modify
  3. value - indicates the manner or extent to which the selector is modified

When we create a style in Expression Web, the CSS code is generated automatically.

For example, the CSS code to display all <h1> elements in blue would be as follows:

h1 {
    color: blue;
}