If you wish to create a CSS powered website but doesn’t know how to use CSS, please read on to find out more in our beginner’s guide to CSS. This guide is suitable for people who have at least some basic knowledge of HTML.
What is CSS used for?
CSS is used to add style, e.g. colors, borders, margins and images, to a web page. CSS will help display your content the way you want it to be displayed on your page.
Link a CSS-file to your HTML document
A good place to start learning CSS is to link a CSS-file to your HTML document. You do this by placing this line between your <head> and </head> tags:
<link rel=”stylesheet” href=”style.css” type=”text/css”>
If your site consists of more than one page, you can add the line to all of them to make them use the same styelsheet.
Let’s now take a look at the hypothetical file “style.css” that you just linked to your HTML document.
h1 {
font-size: 40px;
height: 200px;
}
.warning {
color: Blue;
font-weight: bold;
}
#footer {
background-color: White;
}
As you can see, there are three selectors: h1, .warning and #footer. Each selector points to somewhere in your HTML document.
Selectors can be constructed in many ways using the following building blocks:
- Element
- Class
- Id
Element
An element points at a HTML-tag somewhere in your HTML document. In the file above, you have styled a <h1>-tag (header one). The element will affect all <h1>-tags in your document.
Class
By using .your_class you style all tags with a class with the name “your_class”. In the file above, you have used .warning and thus styled any element with the class warning, such as <div class="warning"> and <em class="warning">. Class comes in handy when you just want to style one or a few tags in your HTML document.
Id
Id is very similar to class, but you can never use more than one id with a certain name in each HTML document, i.e. the name must be unique. Id is used when you wish to style one specific tag. In the file above, you have styled a footer for your page.
Selectors, declarations and properties
In the file above, each selector has a set of declarations, and each declaration has a property.
Let’s for instance look at this example:
a { color: Red; font-size: 3em; }.
There is a selector, which means that all links in your document will be styled. There are also two declarations, one for color and one for font-size. Each declaration is made up of two parts. The first declaration consists of the property color and the value Red.
No you know the basic terminology of CSS and it will be easier for you to understand CSS tutorials, guides, posts in CSS discussion groups, and so on.