Cascading Style Sheets (CSS) are files which contain a stylesheet language primarily used to control a website's style and layout. Traditionally the style of an element or tag in HTML was defined inline, where the style was required, for example a heading could be centered the colour changed and made to be a specific size.
Each time you wanted to used a heading with the same formatting applied the stylistic elements would have to be re-applied to the new heading. This produced cumbersome code which involved the duplication of the stylistic elements each time the element was used and if it was decided to change the formatting of an element used in a website each page which contained the element would would have to be edited.
The main purpose of CSS is to separate the style of the page from the actual content and by doing this we provide a centralised file which can be used to change the style of elements throughout an entire website.
This technique has many benefits including:
•Centralised control of all formatting - Allowing stylistic changes to be made in one location
•Reduction of code - Stylistic elements declared once and applied throughout
•Legibility of code - The lack of stylistic elements leads to legibility
•Improved content accessibility - The user can change a style using a browser and the content can be tailored to suit different mediums e.g. screen, print, voice, braille or tactile device
•Improved flexibility and control - CSS contains features which are not available using standard markup language alone.
Create a file names sheetname.css
In Dreamweaver select Format -> CSS Styles -> Attach Style Sheet then browse to attach the newly created file.
Style Sheet:
#idName{
CSS property:value;
}
HTML example: