CSS Home


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

  1. 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:
  2. body{
        font-family: Arial;
  3. 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.
  4. .important{
        font-family: Arial;
  5. 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.
  6. #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 {
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'>
        <li><a href='about'.html>about</a></li>
And here is what my CSS would be:
.main-nav li{

Next: Element Spacing
Previous: Adding CSS