Cascading Style Sheets (CSS)

Comments

Single line comment.

/* This comment is not displayed */

Multiline comment.

/*
This comment is not displayed
This comment is not displayed
*/

CSS rules

Rules are terminated with a semicolon, ;. A rule with a single property will be valid without a semicolon but a rule with multiple properties will not.

Single property

selector {property: value;}

Multiple properties

selector {property: value;
          property: value;}

Selectors

Element selectors

Element selectors are HTML tags without the angle brackets. All elements of that type will have their formatting modified by the CSS rule(s).

p {property: value;}

Class selectors

Class selectors use the class name with a dot in front.

.mainPara {property: value;}

ID selectors

ID selectors use the ID name with a hash in front.

#importantPara {property: value;}

Properties

Note: All examples will use a HTML element as the selector but would work equally well with class or ID selectors.

Font

p {font-family: sans-serif;}

h1 {font-size: large;}

Alignment

h2 {text-align: left;}

h3 {text-align: center;}

h4 {text-align: right;}

Colour

The colour of the text and / or the background can be changed using one of the many predefined colours. To see a list visit W3Schools.

To change the colour, the properties are:

  • text: color
  • background: background-color
h5 {color: DarkRed;
    background-color: Cornsilk;}

Size

There is no space between a value and the unit.

img {width: 50%;
     height: 50%;}

video {width: 240px;
       height: 180px;}

CSS Precedence

Selectors

  • Element rules overwrite default rules
  • Class rules overwrite element rules
  • ID rules overwrite class rules

Location

  • External rules overwrite default rules
  • Internal rules overwrite external rules
  • Inline rules overwrite internal rules