CSS online training course

CSS lesson 1, Selectors

Selectors part 1

Selectors can also be called the heart and soul of CSS.
The selector is the (X)HTML element.
There are 3 kinds of selectors:
tag selectors, class selectors and id selectors.

The property is the attribute that can allways be altered and the value is the value of the property.
De combination of the property and value is called declaration.
Written the code looks like this :

H1 {
color: red; /* color is red*/
text-align: center;}

And the result :

h1, in red and centered

EXPLENATION
h1 is the selector which says about which element we are referring;
color is a property which says something about the element;
red is the value of color;

Selectors part 2

In a stylesheet you can add any spaces and empty lines you want to.
Its not a matter of where its written, but how its written.
Thats why its very important to use punctuation correctly.
For example :

  • { open accolade
  • - the line between text-align
  • : the colon between the property and the value
  • ; the semicolon at the end of a value
  • } for closing the accolade

Beware :
Each selector can have mulitple properties and each property within that selector can have mulitple values.

A example of multiple style definitions :

body {
color: #e4e4e4; ( color grey )
background-color: blue;
font-family: “Trebuchet MS”, Verdana, Arial, serif;
}

Values which consist of multiple words are written between quotation marks. ( see Trebuchet MS )

The same style properties applying on different elements :

h1,h2,p {
font-weight: bold; color:#008080;
}

As written above the selectors h1, h2 and p all get the same color and the text will be written in bold.

Inherritence

When a element is placed within another ( this is called nesting ), then the nested element will inherrit the values which is awarded to the element.
Unless you give another value to a property ( example below ):
body { font-family: Verdana;}
Now all text within the body will have the font verdana.

When you want to give some text another font you can do this as followed:
h1 {font-family: Arial, sans-serif;}
p {font-family: Tahoma, serif;}
Now all <h1> tags within the file will get the Arial font and within the <p> tags will get Tahoma while in other elements the previous font will seen which is given in the body { font:verdana.

Class 1

Many html elements can get a class. The element then gets the name of a certain class. The name may only consist of one word without a space.
With a class selector you can make a style which can be applied to every HTML tag.
The selector is being written as followed: .name of class ( so dot and the name of the class).
The class attribute of the html tag will be used to give a style to the tag: class="name_class".
Example:
At 1 i am using 2 classes. Namely first and second with the colors blue and red.
At 2 you can see the html code. Starting with a text without class so the color will be black and after that referring to the first and second classes.

And this is the result:

If we had chosen a color for <p> in CSS. For example with:
P{color:green;font-size:12px;}
p.first{color:blue;}
p.second{color:red;font-size:10px;}
Then <p> will become green everywhere in the website with a fontsize of 12px and not anymore in black color. The 2 other classes "first and second" will still give the same colors of course.

In the explenation above we have used 1 class in our html but i will show you next that you can also combine the classes to 1 rule.
CSS definition:
.class1{ color: black; }
.class2{ color: red;}
This can be combined in the following way :

<p class="class1 class2">This is a example of classes with the same interest.</p>

In the example above the hyperlink color will be red because the specificity of both selectors is the same.

With the following CSS classes the link color will be black.
a.class1{ color: black; } .class2{ color: red; }

Html:
<a class='class2 class1' href='/'>link</a>