Introduction to CSS

Cascading Style Sheets

CSS stands for Cascading Style Sheets
Styles define how to display the HTML elements

CSS rule, is made up of two parts:

1. Selector
2. Declaration

1. Selector: which indicates which element or elements the declaration applies to (if it applies to
more than one element, we can have a comma - separated list of several elements)

2. Declaration: which sets out how the elements referred to in the selector should be styled

The declaration is also split into two parts, they are separated by a colon:

1. Property: which is the property of the selected element(s) that we want to affect, in this case the width property.

2. Value: which is a specification for this property; in this case it is that the table cells should be 36 pixels wide.

Here is an example of a CSS rule that applies to several different elements (in this example, the < h1 > , < h2 > , and < h3 > elements). A comma separates the name of each element that this rule will apply to. The rule also specifies several properties for these elements with each property - value pair separated by a semicolon. Note how all the properties are kept inside the curly braces:

h1, h2, h3 {
font-weight:bold;
font-family:arial;
color:#000000;
background-color:#FFFFFF;
}

Here three heading elements named in the selector ( < h1 > , < h2 > , and < h3 > ), and this rule headings are written in a bold Arial font in black with a white background.

Note: If there is only one property - value pair in the declaration, we do not need to end it with a semicolon.

However, because a declaration can consist of several property - value pairs, and each property - value pair within a rule must be separated by a semicolon.