CM143 Week 4 Introducing CSS

Cascading Style Sheets A definition for the style in which an element of the webpage will be displayed Border width, colour, font, background, etc etc Separates document content (HTML) from document presentation (stylesheet) Avoids repetition by making one definition and applying it consistently to certain elements. E.g. All could be defined to have size 12 Georgia font in blue.

Applying CSS Rules CSS display rules can be applied in three ways: – HTML Selector Defines the presentation of all occurrences of a certain tag. – Class Creates a new definition that can be applied to any tag and can be called any name – ID Creates a specific style that will only apply once in the document to the element that has that specific ID

Locating Style Definitions CSS definitions can be located in three places: – In an external (.css) file that is linked to the html – Embedded in the of the html document – Inline - in an individual html tag The browser will always display the style defined “closest” to the tag it affects There are substantial advantages to using external (.css) files for defining styles and so these are most frequent

Syntax

Syntax examples HTML Selector P {font : bold 12pt arial;} All Tags will now have this formatting Class.comments { color : #CC3333;} User-defined classes always start with a dot ID #object {position: absolute; top :10px} ID definitions begin with a #