Tech and Media Labs
This site uses cookies to improve the user experience.




CSS Tutorial

Jakob Jenkov
Last update: 2014-06-15

CSS is short for Cascading Style Sheets. CSS is used inside HTML or SVG to style the content of your HTML page.

A modern website or web application consists of HTML, CSS, JavaScript and possibly SVG. HTML is used to define what content is in the website or web application - its content and composition. CSS is used to define how that content is to be displayed with colors, borders, fonts, backgrounds etc. JavaScript is used to make the website or web application come to life. SVG is used to create scalable vector graphics for diagrams, icons and logos.

You need to know HTML reasonably before you learn CSS. If you don't now HTML, I have an HTML4 Tutorial and HTML5 Tutorial as well - both free.

This CSS tutorial focuses on using CSS with HTML. If you want need to use CSS with SVG, check out my SVG and CSS Tutorial. If you don't know SVG, I have an extensive SVG Tutorial available too.

CSS Versions

At the time of writing there are two major CSS versions in use. CSS 2.1 and CSS 3.0 . I will describe features from both of these versions in this tutorial. After all, as soon as a certain CSS feature is supported, people forget if that feature came from CSS 2.1 or CSS 3.0.

Table of Contents

The CSS tutorial is divided into many individual pages. See the top left side of each page to see a list of the major topics covered. You can click the topics to read them.

A CSS Example

Here is a quick CSS example inside an HTML page, so you can see what it looks like:

<!DOCTYPE html>
<html>

<body>

    <style>
        div {
            border: 1px solid black;
        }
    </style>
    
    <div> Style This! </div>

</body>
</html>    

This example shows a minimal HTML page with a style element and a div element. The style element contains the CSS code. This CSS example declares that all div elements shoul be styled with a border of 1 pixel in width, solid and black in color.

Here is how the above HTML + CSS would look in a browser:



Style This!

Jakob Jenkov




Copyright  Jenkov Aps
Close TOC