CSS Selectors, Properties, and Values

Selectors

Whereas HTML has tags, CSS has selectors. Selectors are the names given to styles in internal and external style sheets.

Tag Selector

We can use HTML tags as CSS selectors. For example:

p{

color: blue;

}

Here all HTML 'p' tags are referenced. It will make the font-color of each p tag as blue

Another example inculde:

body{

backround-color:blue;

}


ID selector

We can assign a HTML tag a ID and then can use it as a selector. For example:

<P id="Para1">This is a paragraph</P>

then we can use it as:

#Para1{
color:blue;
}

# is necessary. ID should be unique, i.e. no two tags can have same ID


Class Selector

We can assign a class to HTML tags and then can use it as a selector. For example:

<P class="P1">Paragraph1</P>
<P class="P1">Paragraph2</P>
<P>Paragraph3</P>

then we can use it as:

.P1{
color:blue;
}

It will be as:

Paragraph1
Paragraph2
Paragraph3

Properties

For each selector there are properties inside curly brackets, which simply take the form of words such as color,background-color, font-size etc.

These are the properties of HTML tags which can be changed. For example, to change the color of text use 'color' , to change the size of text use 'font-size' , to change the background color use 'background-color' and many more.

Values

A value is given to the properties following a colon, and semicolon seperates the properties. For example:

body{
font-size:0.8em;
color:blue;
}