Before learning CSS it is important to be familiar with HTML already as in the web design HMTL elements are those styles are being applied on.

There are 3 ways of adding CSS to your web page:

  • inline;
  • internal;
  • external.

The inline style sheets are applied directly on an HMTL element and are explained in the HTML tutorial.

Other two styles, having the same syntax, are being thought in this tutorial. The difference between them is that one (internal) is applied in the header of a HTML page and between the tags <style></style> while the second (external) is actually written within a separated file with the ".css" extension and linked to with the <link /> element placed also inside the header of a web page.

The external CSS is by far the suggested way of styling your web pages because it offers a complete separation between content (HTML) and styling (CSS) thus in turn simplifying maintenance and upgrades.

Important note regarding the style sheets is that acceptance of the rules depends on particular browser, thus older browsers (especially Internet explorer) have tendency not to understand certain CSS rules and instructions.

Examples

Each chapter has attached an interactive example that can be easily modified and tested as wanted.

For the purpose of simplicity many examples are written with internal styles, instead of being imported from an external file as it is suggested.

All examples can be found at the end of the tutorial.

›› go to examples ››

References

At the end of the tutorial you will find a complete reference list with all properties, selectors, units, etc...

›› go to references ››