Join Morten Rand-Hendriksen for an in-depth discussion in this video CSS, part of Web Programming Foundations.
- [Tutor] CCS or Cascading Style Sheets is the presentational markup used to give the browser instructions about the appearance of HTML elements. CSS was introduced to create a clear separation between the content, HTML markup and its presentation, CSS rules, this was in response to an early trend of using tables and frames and layers to force layouts on a vertical document by building presentational elements right into the HTML, thereby mixing the content with things that were not meaningful and also messing up the content in the process.
The switch from table, frames and layer spaced layouts to pure CSS layouts meant people could choose how they wanted to access HTML documents, either with the styles the designer and developer has applied or without. A text to speech browser, for example, will largely ignore CSS, since visual presentation does not translate into audio. Out of the box, the browser has a set of predefined CSS rules it applies to all HTML elements, this is why when you open a standard, unstyled HTML document in a browser, headings are big and bold, emphasized text is italicized, strongly emphasized text is bold, links are blue with an underline and every element has its own unique visual appearance.
When you supply your own CSS, either inline in the HTML document or as an external reference style sheet, your new CSS rules override what the browser provides, so if you want links to be green, instead of blue, just target the a element with a new rule and set the color property to green. CSS works on a cascade, meaning style rules and properties are applied literally from the top down, we start with a default browser styles and then styles are applied starting at the top of the document and moving down, in other words, style rules further down in a CSS file have more weight than the rules higher up.
CSS also works by inheritance, if an element is given a style property and it has a descendant, so a sub element or sub DOM node, that descendant inherits the style property, unless another rule overrides it, so if I set the font-family and color properties for the body element, the topmost element in the visual part of the DOM tree, those properties apply to all content within that document, I can then create a new rule after the body rule and set the font-family for the paragraph element to serif and only the font-family of paragraphs are affected, the text inside those paragraphs will remain green, because we're still inheriting the green color from the body element, this is how CSS adds a presentational layer to web documents, starting from the default browser styles and targeting first the most general element and then moving in to the most specific ones, we create rules to describe their appearance.
The trick is to figure out how to make as few rules and property declarations as possible to create the most impact. In CSS, as in everything else that has to do with code, smaller and simpler is always better.
- From URL to website
- Structure of a web document
- Dual-purpose code
- Browsers and editors