CSS Tutorial

CSS Versions
CSS Example
CSS Topics Covered

Jakob Jenkov
Last update: 2019-03-11

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.

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!

CSS Topics Covered

This CSS tutorial covers the following CSS related topics. These topics are also accessible via the left menu on every page in this CSS tutorial.

Next: Using CSS in HTML

Tweet
	Jakob Jenkov