Support
Cascading Style Sheets Overview
Text size:

Introduction

CSS stands for Cascading Style Sheets. They were developed by the World Wide Web Consortium (W3C) to separate the content of a document from its presentation layout. Style sheets contain a set of style rules that define how HTML elements are displayed a web browser.

Cascading Order

When there is more than one style specified for an HTML element, all the styles will cascade into a new virtual style sheet by the following rules, from lowest to highest priority:

  1. Browser default
  2. External Style Sheet (in a linked .css file)
  3. Internal Style Sheet (inside the <head> tag)
  4. Inline Style (inside HTML element)

An inline style has the highest priority, meaning that it will override every style declared inside the <head> tag, in an external style sheet, and in a browser (a default value set by the user's preferences).

Style Sheet Syntax

A style sheet contains a group of style rules. The CSS syntax for a style rule can be broken up into three parts:

  1. Selector
  2. Property
  3. Value

Combining the above three parts creates a style rule in the format:

selector {property: value;}

The selector is composed of one to three of the following items:

  • HTML element
  • Class
  • ID

Classes are used to group HTML elements together and ID's are used to give an HTML element a unique identifier. The following examples illustrate how to use the selector to target specific HTML elements:

  • HTML paragraph elements (example of selector: <p>...</p>) will be targeted with the following style:
    p {property: value;}
  • HTML elements with a class name of "Test" (example: <div class="Test">...</div>) will be targeted with the following style:
    .Test {property: value;}
  • HTML elements with an ID of "Test" (example:<div id="Test">...</div>) will be targeted with the following style:
    #Test {property: value;}
  • HTML paragraph elements with a class name of "Test" (example: <p class="Test">...</p>) will be targeted with the following style:
    p.Test { property: value;}

Properties and values are used to define an HTML element's position and style. Multiple properties can be declared in a style rule by separating each one with a semi-colon. The following examples show how a style sheet can be built up:

p {font-family: Arial,Helvetica; font-size: 75%; color: #000000;}

div {border-style: solid; border-width: 1px; border-color: #000000;}

p.Title {font-size: 120%; font-weight: bold; color: #990000;}

td {padding: 2px;}

td.Label {text-align: right; background-color: #CCCCCC;}

#HomepageHeadline {font-size: 135%; text-decoration: underline;}

The style rule for an element's class will override the style rule associated with an element's HTML tag; however, the style rule for an element's ID will override the style rule for an element's class.

Using the above example, if a paragraph element has been assigned a class name of "Title" (example: <p class="Title">), then its combined style would be:

font-family: Arial,Helvetica; font-size: 120%; font-weight: bold; color: #990000;

HTML Element Style Syntax (Inline Style)

Using the style attribute, an HTML element's style can be specified within its tag. Selectors are not needed, but property/value declarations use the same syntax as those found in a style sheet. Styles specified within an HTML tag will override any other style setting. Some examples of setting an element's style within its tag are:

<div style="font-family: Courier; font-style: italic;">Some text</div>

<td style="padding-top: 10px; background-color: #000000;">Cell content</td>

Reference

For a thorough reference to CSS properties with example code, please visit the following web address:http://www.w3schools.com/css/css_reference.asp

Email a friendEmail a friendPrintPrintFeedbackFeedback  |   Bookmark and Share