Chapter 2: CSS

Zach Power edited this page Oct 24, 2016 · 5 revisions

Styling

Now that we have told the computer which information we want to display, we now want to tell the computer how to display it. This next step might include changing the colors, fonts, positions, and sizes of information.

In order to do this, we will need some kind of language to describe styles. However, we cannot use HTML to do this because HTML is meant to organize information. Another language, called Cascading Style Sheets (CSS for short) can be used to style the information described in HTML.

How CSS Works

CSS uses a simple syntax to list the style attributes of a particular HTML element. There are two parts needed to tell the computer how to style your information.

First, you will want to tell the computer which information you will be styling. To tell the computer which element to style, you will use what is known as a selector. As the name suggests, the selector "selects" certain information in your HTML and styles it.

Let's style the HTML paragraph that we created in the previous section. Recall that we used a <p> tag to tell the computer that our text was a paragraph. Similarly, we will use p as our selector in CSS. This tells CSS that we want to apply a style to all p tags in the HTML.

But wait! We still need to tell the computer how we would like to style the information. In order to visualize this, let's take a look at the code example below:

p {
    color: blue;
    font-size: 12px;
}

As you can see, the selector is followed by a pair of curly braces ({ and }). This is telling the computer that all of the styling defined in between the curly braces should be applied to the selector.

In this example, we are telling the computer to make all paragraph text blue and 12 pixels tall. Please note that each of these style attributes is on its own line, and each line is ended with a semicolon. Additionally, notice that each attribute (color and font-size) are followed by a colon, and then followed by a value. This will be the case for every attribute that you add in CSS. For example, if you wanted to also make the text in the paragraph italic, you would add font-style: italic;

Classes and IDs

What if you want to apply a style to only one paragraph rather than all paragraphs on your webpage? This is where classes and IDs come in. Rather than using the tag name as a selector, you can give an HTML element a specific name. In order to do this, you can use the class or id HTML attribute. Check out the below example:

<p class="about-me">
    ...
</p>

As you can see, we added something to the opening paragraph tag in our HTML. By adding the class attribute, we are telling the computer that this specific paragraph has a special name (called about-me). To select this special name in CSS, we can do the following:

.about-me {
    ...
}

Notice that there is a . in front of the class name. This is telling the computer that you are trying to select an HTML element based on a class. If you would like to use an ID, you would select the element using a #.

HTML:

<p id="about-me">
    ...
</p>

CSS:

#about-me {
    ...
}

What's the difference between Class and ID?

The answer is simple:

IDs are used when you will only be selecting an individual element.

Classes are used when you will be selecting an entire class of elements.

Can I make my CSS interactive?

Now that you know how to style your HTML elements, you might be wondering how you might make your page more interactive. Perhaps you would like to create a button whose background color changes on mouseover. This is certainly something achievable with CSS. Let's take a look!

As you can see below, we have a basic CSS block for styling an HTML element.

.button {
    background-color: blue;
    border: 1px solid blue;
    color: white;
}

Let's analyze this block for practice:

Question Answer
What are we selecting? Elements with the class button
What are we styling? Text color, background color, border
How are we styling it? White text, blue background, 1px-wide solid blue border

Looks good! Now we have a blue button on our website. Now, let's try to make our button fancier. When the mouse hovers over the button, the button should light up. How can we implement this behavior? Take a look at the code below to find out:

.button {
    background-color: blue;
    border: 1px solid blue;
    color: white;
}

.button:hover {
    background-color: white;
    color: blue;
}

You might have a couple of questions regarding this new code such as: What happened to the selector? Why does one have a border style and one does not?

To figure out the answers to these questions, we need to know how CSS works. The first block of CSS code (where the selector is .button) is defining styles for all elements with the class button. This block doesn't care about the mouse, and is applying these three styles to the selected elements.

The second block of code (where the selector is .button:hover) is defining styles for all elements with the class button where the mouse is currently 'hovering'. When you use the :hover selector suffix, you are telling CSS to overwrite certain styles when the mouse is hovering.

Therefore, all elements with the class button will receive the styles defined in the first CSS block. Furthermore, all elements with the class button will receive all of the styles defined in the first CSS block, plus the styles defined in the second block. Note: CSS reads your code from top to bottom. Therefore, styles defined at the top of your code can be overwritten by styles at the bottom of your code.


Next Chapter: Javascript

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.