---

Cascading Style Sheets (CSS) are invaluable for styling web page content. It is called cascading, because it operates at multiple levels. Some levels take precedence over other levels, but only within narrower contexts. For example a site may have an overarching default style sheet. Pages in the site either explicitly reference that sheet (or sometimes implicitly it if something called a framework is used).

However, pages themselves can contain their own style “sheets” that can override some or all of the elements covered by the site stylesheet, and apply to the entire page.

There are three parts of a style statement:

1. What element will be styled, such as a heading type, paragraphs, lines, or borders
2. What aspect of the element will be styled, such as color, size, font
3. What the style shall be, such as red, 12 pixels, Helvetica.

Inline Styling

It is possible to style just a single individual element. Inline styling is the easiest to get started with. You simply add CSS to an individual HTML tag. Individual tags in a page can use “inline” CSS styling to override the page stylesheet, but just for that single tag.

For inline styling, use the approach in the following example:

<p style="color:blue">

As in:

<p style="color:blue">My blue text.</p>

Which will produce:

My blue text.

You might use CSS extensively to style tables or graphics elements.

Page Stylesheets

 

If you wish to use CSS to style all examples of a page (except those overridden by inline styling), create a page-level CSS stylesheet.

A page level stylesheet will go into the HEAD section of an HTML page. For example, if you wanted the above inline style to apply to all paragraphs, you would add the following lines to the HEAD section.

<style> 

    p {     

        color: blue; 
    } 
</style>

Here are examples of how multiple CSS styles can be placed in the head section or in their own stylesheet.

<style>

h2 { color: blue; }

p {
    color: gray;
    text-align:center;
}

</style>

Note how each type of element, such as headers or paragraphs, can have their own styling. Also notice how there can be multiple styles placed in a single block. Don’t forget the semicolon after each style and the closing brace after each style block.

These styles can be placed in their own document instead of the head. Then those styles can be applied to an entire website, or multiple pages. The names of CSS style documents (“sheets”) end with “.css”. Style sheets can be written in similar languages and have names that send somewhat differently, but they are all intimately based upon CSS.

Resource

• w3schools.com CSS Tutorial
• CSS: Cascading Style Sheets (Mozilla) with reference and tutorials

---

« Creating a web page with HTML | COURSE | Programming Concepts »