Applying styles to particular HTML elements

Classes

Sometimes you want to give text on a page a special look. For example, you might want all <p> tags to look the same, except when you want to draw the user’s attention to something special. Maybe you want text like "On sale! Today only!" to stand out.

Let's add this rule to the CSS:

.important-note {
  color: red;
  font-weight: bold;
  font-variant: small-caps;
  font-style: italic;
}

The period (.) creates a CSS class. A class is a rule that you can apply selectively. There are some new properties in this rule, like font-weight. You can google for the details if you want.

The class is named important-note. I made up that name. I could have called it read-me-now, or something else.

The CSS above defines the class. To use it, you change the HTML, adding the class property to HTML tags. Here's some code:

<style>
  .important-note {
    color: red;
    font-weight: bold;
    font-variant: small-caps;
    font-style: italic;
}
</style>
<p>Preheat your oven to 400 degrees.</p>
<p class="important-note">Warning: your oven will be hot.</p>
<p>Grease a cookie sheet.</p>

First, the CSS defines the class important-note. Then, the HTML uses the class, with the class attribute on tags.

Here's how it looks:

Class

You can use the class as many times on the page as you want.

<p>Preheat your oven to 400 degrees.</p>
<p class="important-note">Warning: your oven will be hot.</p>
<p>Grease a cookie sheet.</p>
<p>Place the cookies on the cookie sheet.</p>
<p class="important-note">Leave a 1 inch gap between the cookies.</p>
<p>Slide the cookie sheet into the oven.</p>
<p class="important-note">Remember, your oven will be hot.</p>

When the browser sees the class, it looks for a CSS rule starting with a ".".

It looks like:

Class used more than once

So, if you put a "." in front of a rule in CSS, you apply the rule to an HTML element with the class attribute. If you do this in CSS…

.checkered-zebra { ...

… you should do this in HTML:

<ul class="checkered-zebra">

Here's a sandbox. Mess with the colors in the <style> section. Here's a list of CSS color names.

Change font-size, with values like large, 2.5rem, and 0.4rem. Mess with text-decoration as well.

Note: The sandbox adds a modern font for you. It's part of Bootstrap. More later.

Hint: Try commenting out a line with Ctrl+/. Good for testing ideas.

More than one class on a tag

You can put more than one class on a tag. Here's some ugly text:

Ugly text

All text about plants is green. All text about rocks is grey. When text is important, extra properties are added: italic, and a dark red background.

So:

Important text about plants is green, italic, and with a red background.
Important text about rocks is grey, italic, and with a red background.

Here's some code:

<style>
.plants {
color: lightgreen;
}
.rocks {
color: lightgrey;
}
.important {
background-color: indianred;
font-style: italic;
}
</style>
<h2 class="plants">Plants</h2>
<p class="plants">Plants are things.</p>
<p class="plants important">Water plants, or they will die!</p>
<h2 class="rocks">Rocks</h2>
<p class="rocks">Rocks are things.</p>
<p class="rocks important">Some rocks are sarcastic!</p>

Check out line 15:

<p class="plants important">Water plants, or they will die!</p>

It's about plants, so it has the plants class, just like everything else about plants. However, line 15 is also important, so it has the important class, too. The browser merges the properties from both classes.

Classes like important are called mix-in classes. They're not meant to stand alone. They're mixed with other classes as needed.

Using classes with containers

Another example:

<style>
.meeting {
font-size: 120%;
}
.celebrate {
color: plum;
}
</style>
<h2>Today's Events</h2>
<ul class="meeting">
<li>Lecture on workplace safety.</li>
<li class="celebrate">Tony's birthday!</li>
<li>Project X meeting</li>
</ul>

Line 10…

<ul class="meeting">

… applies the meeting class to a <ul>. The <ul> contains <li> tags, so meeting applies to them as well.

Line 12…

<li class="celebrate">Tony's birthday!</li>

… adds the mix-in class celebrate to one of the <li> tags. This tag has both the meeting and celebrate classes applied to it.

Here's a sandbox with a mix-in. Mess with its properties.

Ids

The id attribute is similar to class. If you put a "#" in front of a rule in CSS, you apply the rule to an HTML element with the given id, rather than the given class attribute. If you do this in CSS…

#unified-gnu { ...

… you do this in HTML:

<h2 id="unified-gnu">

So:

# in CSS matches id in HTML.
. in CSS matches class in HTML.

While a class can be used as many times on a page as you want, an id must be unique.

Classes are used for formatting, as you've seen on this page. Ids can be used that way, too. However, they are usually used to uniquely identify an HTML element, so some JavaScript code can find it.

When you start writing JavaScript, ids will be useful. More later.

CSS standards

Naming

When you give tags ids and classes, use names that suggest what the tags mean, or how they will be used. Here's some HTML:

<div id="this-thing" class="do-it">
    <p>We should make a t-shirt that says:</p>
    <p>My <span id="some-text"></span> is the best!</p>
</div>

The ids and the class don't tell you anything. Now check this out:

<div id="output-container" class="hide-on-load">
    <p>We should make a t-shirt that says:</p>
    <p>My <span id="pet"></span> is the best!</p>
</div>

The id output-container suggests that this is an output area, and that it contains multiple elements. The class hide-on-load suggests that the element won't be visible when the page loads. The id pet maybe contains the name of a pet.

Better.

Make ids and classes lowercase. If they are multi-word, like output-container and hide-on-load, use dashes (the – characters) to separate the words. This is a common way to do things in web development.

Indent

Indent by four spaces between the braces (the {}) of a CSS rule.

You've already seen this in action:

#output-container {
    color: green;
    font-size: 150%;
    border: thin solid magenta;
}

WebStorm and other IDEs indent CSS automatically.

Comments

Comments explain what a CSS rule is for. For example:

/*
  Use this class on elements that are to be hidden when the page loads.
*/
.hide-on-load {
    display: none;
}

Notice that the syntaxes of HTML and CSS comments are different.

HTML comment: <!-- Comment goes here. -->
CSS comment: /* Comment goes here. -->

There's a complete list of coding standards for the course.