CSS Selectors

To make this website look pretty, I used a programming language called CSS. In CSS you can grab tags/elements, classes, children tags/elements, or id's. You can also grab a combination of these by separating the grab with a comma. After you grab the portion of the page you would like to modify, you can change the way that thing looks. For example, the header at the top of this blog post is in an h1 tag so in order to grab that tag and make it red you would do this:

    h1{
        color: darkred;
    }

The h1 is grabbing the tag/element, then you add and split the curly braces {}, then add what you'd like to change. In this case it's the color of the text. Then you end each line with a semi-colon. Where it says "Blog" at the top of the page, that tag/element has 2 lines in its ruleset. That looks like this:

    header{
        background-color: darkred;
        color: white;
    }

The header portion is targeting the header tag/element, and inside the braces are the rules I set. Making the background-color dark red and the text white.

There are other kinds of selectors as well. When you are targeting an id you would use a "#":

    #targetIdGoesHere{

    }

Targeting a class uses a period:


    .targetClassGoesHere{

    }

Targeting children you put a space in between the parent and child, this will target li tags/elements inside the header:


    header li{

    }