Welcome to the fourth part of HTML class.

In this part, we will continue with CSS and introduce classes.
So far, you have learned to change the properties of tags. But all changes were always applied to all tags. So if you change the properties of the h1 title tag like in the code example below, then all h1 titles will change in the same way. 
1
2
3
4

H1
{
  border: 3px dashed green;
}
In this example, every h1 title would have a 3 pixel dashed green border.

But what if you want to have a h1 title who looks different? is this possible? YES it is!

In CSS we can use a special keyword to mark groups of special tags. Have a look at the code example below: 
1
2
3
4

<em>regular tag</em>
<em class="special">special tag</em>
<em>also regular tag</em>
<em class="special">another special tag</em>
In line 2 and 3 the keyword class is used and then it is given a value. Here the value is "special". But you can choose any name for the value. The important thing is that you can remember it.
With this keyword, we have created a new class of tags. And we are now able to make declarations which are only valid for this class of tags.

Imagin you are the comander of a group of 200 people. You don't know the name of all the people, so if you give a command, you can give this command only to all people. Not to individual people.
If you say "move to the left" then everyone of these 200 people will move to the left. This is the problem we had so far. We could change the tags, but only all tags together, not smaller groups of tags or individual tags.
So if you want to be able to give a command only to a group of 20 people, you could, for example, give these 20 people red shirts to wear. Then you can say "Everyone with a red shirt moves to the right". Like this, you only address the people with the red shirts.
The class names in tags are a bit the same. You can give some tags a class name like class="red". Later you can give this group commands without giving this command to the other tags. The other tags will ignore them.

Now the last problem is, how to address the special class in the style?
Have a look at the example below and see how you should do the declaration: 
1
2
3
4
5
6
7
8
9
10
11

<head>
<style>
em {
  color: green;
  border: 2px solid red;
}
.special {
  color: red
}
</style>
</head>
On line 3 you can see a normal declaration for the <em> tag. The color is changed to green and there is a thick red border around the text.
On line 7 you see how the declaration is made for our own new tag. Note, that the declaration starts with a dot. This is very important. With this initial dot, you tell the html document, that "special" is the name of a class.

Exercise 1

  1. Make a new HTML document.
  2. In this document write some text, or copy some text from the internet.
  3. Mark some of the words with the <em> tag. If you are not sure how to use the <em> tag, have a look at the first code example on this page or ask someone.
  4. Make a styling for the <em> tag. Do whatever you like, you should know enough keywords from Example3.html
  5. Add a class-name to some of the tags
  6. Make a declaration for the new class name and add some properties and values to this new class
  7. Play a bit with it and see the effect.