Table of contents:


This page is not yet finished!

Stylesheets and Defaults.

1: Introduction.

Why should you use stylesheets?
When writing HTML pages, just like when you write any other document, you will want to keep contents, separated from styling. Ofcourse you can put the styling inside the head of your document, but that is not the preferred way of doing. If you, or anyone else, ever needs to update and/or maintain the documents styling, they have to dig inside the document itself. And even worse, repeat it for all documents using the same styles.

To get the benefit of updating your whole site with a minimum of effort, it is better to keep your styling in one or more separate files, your stylesheets.
Furthermore, it saves loading time because the browser can keep your styling-file(s) in memory and only has to load the (smaller) HTML-pages.

When all styles are in the stylesheets, it is also possible to only change the style of your document without changing things inside your documents text.
To help the user when he wants to print one of your pages, you can provide a special stylesheet, that has styles that makes the contents of your page easy to read. With less fancy fonts for example, black and white text, and formatted specifically to save printing paper.

Even when you have no styling anywhere, your HTML page will be displayed with some styling, the Default Styling. How your page will look, depends on the device your page is displayed on and the browser that is used.

Very basic starter pages without any styling, are often referred to as "Kitchen Sink" HTML pages.

"Kitchen sink HTML page"
Kitchen sink HTML page
Part of a Kitchen sink HTML page, with very basic styling, black-white text, blue links, etc.
There are many of those "kitchen sink" pages around, containing the most (or all) of the common HTML elements. That way giving a good impression of the elements that are present in HTML and what they look like. But there are also "kitchen sink" pages for all kind of programs, like Bootstrap or others. Those kitchen-sink pages not only contain common HTML elements, but also elements and classes that are specific to the program they are designed for.

A stylesheet file has the css extension, that is an abbreviation for "Cascading Style Sheet". (.css)

Why are they called "Cascading" Style Sheets.

That is because more css-files can be valid for 1 HTML page. In that case there is a certain priority in which they are processed.
For example:
Suppose there is a stylesheet that defines a font-size for an element. And another stylesheet defines another font-size for the same element. Then it depends on the priority of the stylesheets, which definition is used for that element on the HTML page.

Now you might say that is confusing, that should not happen.
But that is not true.
Bootstrap for instance defines a lot of elements in a certain way, and that often is different from the default definition for an element. And when you use any other, and maybe more than one, library you found on the internet somewhere, it might come with its own stylesheets to make it work. Probably you will also have stylesheets of your own. They all have to work together.

So stylesheets have a specified and predictable priority scheme, that determines which stylerule applies for a certain element in a certain case. Now what are the preference rules for stylesheets for a certain element to be styled?
The CSS preference rules are:
  1. The !important property following a style rule.
  2. Specificity of a CSS rules selector.
  3. Sequence of declaration

2. What is a user agent?





3. User agent stylesheets.





4. CSS reset vs Normalize.





5. HTML kitchen sink.





6. Introducing the CSS Cascade.







7. Usefull links.