CSS
Purpose

Cascading Style Sheets (CSS) is a style sheet language used to alter the characteristics of a web page. CSS describes the presentation of web pages and how each element is portrayed by the web page, this includes the colour, layout, size, font attributes (size, colour, weight) of elements on any given website. Although CSS and HTML work in cohesion, CSS is independent of the structural programming language. CSS also allows for different styles according to the device being used. Overall CSS is a very simple but very effective language which does its job with reliability.

Brief History

Dr Hakon Wium Lie CSS was first proposed by Hakon Wium Lie in 1994, Dr Lie proposed CSS as a web styling language to solve the problems of HTML4 while working with the creator of HTML Sir Tim Berners-Lee. Although there were other stying languages proposed to fix the problems of HTML4 in the end CSS was chosen due to its simplicity and effectiveness

Cascading

The "Cascading" part of CSS means that the styles applied to a web page can fall from one sheet to another, as a result one HTML document can have many style sheets. There are three levels of application for CSS.

  1. Inline Style applied to specific element written within that element.
  2. Document Level Included within the style tag in the HTML document.
  3. External Written into a separate style sheet, referenced in the HTML document.

Many styles can be applied to an element, the style that will effect the elements attributes is determined by which level it is written in.

Inline > Document Level > External

Each level has its benefits (which will be discussed later). Below is an example of how the cascading in CSS works. This will demonstrate the hierarchy of styling shown above. Try different variations of the buttons to see which styles get overwritten.

Separation

After understanding the three cascading levels we now know how styles are applied to a HTML document. But the real question is when and why do you apply styles at a specific level? We can start with External Styling. External style sheets have many benefits but the main reason we use them is to keep consistency within a website as External style sheet apply to any webpage they are "linked" to. This also means that all the pages linked to the style sheet can be adjusted by altering the CSS file, which is incredibly powerful. Internal style sheets are more focussed in their approach and as a result are used for more targeted styling. Internal style sheets are used for groups of elements that require independent styling on each page of a website. Inline styles are used exclusively to apply unique styles to individual elements on a website. This includes overriding Internal or External styles to ensure an element fits correctly.

Help ?