Selectors

CSS can address or select elements on a page in many different ways. Some of the most common ways are as follows:

Type or Element selector: You can apply a style to every element of a paricular type. For example, you can have the text in contents of the body be arial type font:

body{
    font-family: Arial;
}

Class: You can apply visual style to a specific html elements by adding the class attribute. You may call your class by any name, as an example, you can write class attributes like this: class="important". Classes allow you to target specific elements and modify them. This is often used with the div element for layout purposes.

.important{
    font-family: Arial;
}

ID : You can also apply visual style to a specific html elements by adding the I D attribute. I Ds give you the ability to change style and content using Javascript. I Ds are useful for adressing specific elements with unique I D s and therefore, you should only use an I D once.

#top{
     font-family: Arial;
}

Note: If I want to do the same thing to a couple of elements I can add those add more elements to my selector with a comma seperating them. For example, if I want to update all my heading levels to be in Verdana, I would write the following:

h1, h2, h3, h4, h5, h6 {
    font-family:Verdana;
}

Element, ID, and Class selectors can be combined with a space seperating them to get really specific about the elements you want to apply style to. For example, if I want to style the list items in my navigation differently than the other list items on my site, I can give my navigation opening tag a class attribute and combine class and element selectors in my CSS. Here is what my HTML could be:

<nav class='main-nav'>
    <ul>
        <li><a href='about'.html>about</a></li>
    </ul>
</nav>

And here is what my CSS would be:

.main-nav li{
    padding:2%;
}

Next: Element Spacing
Previous: Adding CSS