IVAN STANTON

Junior Web Developer

Learn CSS 2.1: Useful HTML and My First Style

I recommend reading Learn HTML first. Or alternatively, you may want to see the previous Learn HTML.

Why learn CSS?

This course will mainly teach you the basic syntax of CSS, since a lot of CSS's features can be searched for on the fly.

The <div> and <span> tags

The <div> and <span> tags are special HTML tags that are very useful when styling text with CSS. The <div> tag is like a paragraph without any spacing, used as a catch-all tag in web design.

Meanwhile, <span> is a special tag that takes the smallest width reasonable, just wrapping around other elements. It can be useful for getting sizes right.

Starting out

To start out, use this template for each page on which you want to style.

<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="width=device-width, initial-scale=1">
<meta charset=utf-8>
<style>
</style>
</head>
<body>
<p>Hello world!</p>
</body>
</html>

The <style> tag encloses a CSS stylesheet, so you'd put your styling options there.

CSS syntax

CSS uses a curly brace {} to determine when the style for a specific tags begins or ends. Additionally, individual rules are listed as property: value;.

One example of a property is color, which changes the color of the text inside the element. To make some text orange, for example, you would use color: orange;

Now let's create a basic stylesheet to make paragraphs orange. To do that, simply place this within the <style> tag of your HTML file.

p {
    color: orange;
}

The "Hello world!" text in the template should now appear orange.

Read the next article