CSS Selectors, Properties and Values

Selectors

The 'selector' for a set of rules determines which tags on the page will have the rules applied to it. Any tags on the page that match the selector will be styled according to the properties and values.

Tag Selectors

body{
    font-family:Verdana;    
}

h1 {
    color: red;
    font-size:30px;
}

h2 {
    color: blue;
    font-size:24px;
}

h3{
   color: green;
   font-size: 20px; 
}

a{
    color:lightgray;
}

    

ID Selectors

Note that IDs should be unique, meaning that no two tags on the page should share the same id value.

#myDiv{
    background-color:pink;
    height:80px;
    width:200px;
}
    

Class Selectors

.blog-title{
    color: purple;
    font-size: 140%;
}

.blog-sub-title{
    color: purple;
    font-size: 110%;   
}

.warning{
    color:red;
    font-weight:bold;
}
    

Mixed Selectors

The various types of selectors can be mixed in different ways. For example, we can target div tags, but only if they have a class of 'promo'.

div.promo{
    font-size: 150%;
    color: red;
    background-color: lightgray
}
    

We can also use a space between selectors to specifically target tags that are descendants of other tags. The following selector targets 'li' tags, but only ones that are descendant of 'ul' tags (so these rules will not affect li tags that are descendants of ol tags).

ul li{
    color:salmon;
    font-size: 20px;
    list-style:none;
    margin:5px;
    padding:10px;
}
    

Psuedo Selectors

Psuedo selectors allow us to target tags that are in a specific state. For example, we may want 'a' tags to look different when they are hovered over.

a:hover{
    color:yellow;
}
    

Grouped Selectors

You can apply a set of rules to more than one selector. To do this, put a coma between each selector.

h1, h2, h3, p, div.promo{
    color:green;
}
    

Things to do to our divs

• Set the background color
• Use different units of measure for the height and width (px, %, in, cm, mm, pt)
• Set the border width, style, and color properties
• Set the bottom border to a different width
• Set the font family, font-size, and color
• Set the text-align property
• Set the padding and margin
• Set the padding and margin to be different for the top/bottom and sides

This is an H1 tag

This is an H2 tag

This is an H3 tag

This is the title of a blog post

This is the sub-title of a blog post