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?
-
CSS is a stylesheet language, i.e. a programming language used to determine the look and feel of an HTML or XML file. If you know HTML already, CSS can improve your websites significantly.
-
Good CSS can make your website look modern, like all of the fancy websites of today.
-
Without CSS, a site is just a document; CSS is what makes it great.
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