This tutorial teaches you the basics of CSS. You'll learn the CSS code, the style attribute, the <style> tag, and how to define CSS in an external file.
CSS Basics CSS, Cascading Style Sheets, is a powerful, yet simple tool when writing websites. The purpose of CSS is to easy change the look of the elements of you website. It can change e.g. color, font, width, height, position, alpha, z-index, and so on. The usage of CSS is very simple, and can easy be put into html documents. For example, we got this heading in a div:
<p>Welcome to my website</p>The output of this is a boring header in size 12 Times New Roman. Now, you want to make the size to 20, the font to Arial and the color to red. This is easily done using CSS:
<p style=”font-size: 20; font-family: Arial; color: red;”>Welcome to my website</p>That was better! Now, what we did was to add the style. The style is the CSS part. In the style, you specify the look of the elements; in this case you are changing size color and font.
The CSS code, that between the “”s, is made of two things: the first is the value that is going to be changed, followed by a colon (:), then the value you are changing in into, followed by a semi-colon (;). E.g. we are changing the color of the text by using the color-keyword.
Color: red;This is how simple it is. Now, we’re changing the font and size, by using the font-family and font-size keywords:
Font-family: Arial; font-size: 20;Notice that if the font doesn’t exists on the computer showing the webpage, Times New Roman is used instead, so do not use any special font.
This is simple how it’s done. Now, you can try to change different values. Here are some of the most used:
Syntax/explanation/values Font-weight – used to make the font bold – normal/bold/bolder/lighter
Background-color – used to change the color of the background – color-name/#000000/transparent/rgb(123,123,123)
Background-image – used to put an image in the background – none/url(‘backgroun.jpg’)
Position – changes if the position of the element can be changed by top and left – absolute/relative
Top – the y value – value
Left – the x value – value
Border-style – sets the style of the border of an element – none/hidden/dotted/dashed/solid/double/groove/ridge/inset/outset
Border-color – sets the color of the border – color-name/#000000/transparent/rgb(123,123,123)
Border-width – sets the width of the border – thin/medium/think/(value)
There’s unending more CSS properties, which I don’t want to write here. Look forward to part 2 – CSS Classes.
CSS Classes
When working with CSS, you may want some elements to look like each other, and it’s annoying to change everything two times when changing the values. Then you can just make classes. Classes are groups of elements with the same CSS-properties. Some classes are already build in into CSS, e.g. h1, body, div, p, and so on. You can change them as well as you can create your own and change them. First, we’ll try to change one that already exists. To use classes, you are going to use the <style> in the head section of your document.
In head, write the following:
<style>
.h1 {
Color: red;
}
</style>In the body-section write:
<h1>Welcome</h1>
You’ll now see that the color of the <h1> has changed. This is because we changed the CSS-properties of the h1-class In the <style> section. Now this wasn’t difficult, neither is the next part.
In head, write following:<style>
.title {
Font-size: 20;
Font-family: arial;
}
</style>And following in body:
<p class="title">Welcome</p>
Now, you’ll see that the Welcome text has the properties described in the style, but this time, we just change it on a non-existing class. Then, in the <p>, we assign the title-class to the text, and the text is changed :)I hope you understand, look forward to the next part of the tutorial: CSS part 3 – external CSS files
CSS External Files
In this tutorial, we’ll look on how to create external files to store your CSS. We have this HTML site:
<html>
<head>
<style>
h1 {
color: red;
}
.subtitle {
font-weight: bold;
}
</style>
</head>
<body>
<h1>Welcome</h1>
<p class="subtitle">to my website</p>
</body>
</html>Now, we can make this a lot easier to read by making an external file. The name is going to have the .css extension.
Here, we make a file named styles.css, containing the code between the <style> tags:
h1 {
color: red;
}
.subtitle {
font-weight: bold;
}And in our document, we’ll put this line of code instead:
<link rel="stylesheet" href="styles.css">So now out HTML document looks like this:
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome</h1>
<p class="subtitle">to my website</p>
</body>
</html>The power of external files is that you can have more of them, and just change it if you want a new look for your website. If you know a little JavaScript or PHP, you can also make so that your user can choose the stylesheet himself.
And that’s how to do that. So simple 🙂
