Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Introduction to HTML and CSS

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Select and Style by Class

5:10 with Treasure Porth

In this lesson, we'll learn about how you can apply styles to specific "classes" within your HTML files. We'll take a look at the text-align, border, and border-radius CSS attributes, and also explore some of the useful online resources available to to help developers pick and choose styles and design rules.

Developers use digital resources on a daily basis to locate hints, tips, and tricks to speed up their job. There's a whole bunch of great resources available to help you pick and choose the styles and attributes you use during your development process, as well as heaps of helpful forums and communities to keep up to date with new features as they are introduced!

With new rules being added to CSS every year, there's really never been a more exciting time to get started with web development.

In this lesson, we practiced writing and applying styles to classes. Instead of limiting our style sheet to specific tags or elements, we can create custom names or shortcuts, and apply them to any element on the page. This means that we can apply a style to a just one element on a page, without having to style them all at once.

Let's take a look at an example below. We're preparing our shopping list for the week, but...uh oh! Our milk has gone off. We want this to stand out in our shopping list, so we've applied a class to the <li> tag and assigned it the name value "urgent". 

<h1> My Shopping List! </h1>

<ul>
    <li> Eggs </li>
    <li class="urgent"> Milk </li>
    <li> Bread </li>
</ul>

To make our urgent class stand out on our shopping list, we've used the .urgent class selector in our stylesheet, and applied a red color to the text for all elements in our HTML that share this tag.

.urgent {
    color: red;
}

Now when we view our shopping list, the text for "Milk" will really stand out from the rest! As this is the only element on the page that has a style applied to it, all other <li> elements will only display their default styling.

New Terms:

  • class - A global attribute that can be applied to any HTML element. Classes allow CSS and JavaScript to select and style specific elements or groups or elements with consistent themes, colors, or other interactive qualities.

Further Reading:

References

We've just learned how to select an HTML element and style it with CSS. 0:00
But what if we wanna style a specific instance of an element 0:05
when there is more than one of that element on the page? 0:08
How can we style just one of these h2 tags? 0:11
One of the ways we can do that is with classes. 0:14
Classes are attributes we can add to HTML elements. 0:18
Then we can write a CSS rule for 0:21
that class and any element that we add that class to will get those styles. 0:23
Let's see how that works. 0:28
We'll start by putting a class on this background h2. 0:29
Let's find that in index.html 0:32
You type a class just like any other HTML attribute, 0:39
inside the carets with an equal sign and a set of quotes. 0:43
You can name a class anything you want but 0:47
class names often describe the elements they're placed on. 0:49
The h2 we're working with is nested inside a section of code called card. 0:52
This h2 is kind of like the title for the card. 0:57
So let's call the class card-title. 0:59
Now that we've created a class, we can write a CSS rule for it in styles.css. 1:03
We indicate that the element that we're styling is a class 1:10
by putting a dot in front of it, like this. 1:12
That dot tells the web browser that it should look for 1:16
a class attribute called card-title that exists on an HTML element. 1:19
If you left off the dot in your CSS, then the browser would think 1:24
that it needed to find an HTML tag named card-title. 1:29
And when it couldn't find one, it would get confused and 1:33
simply ignore your style instructions. 1:35
After you type card-title, type your curly braces. 1:37
And let's change this h2 so that it's centered. 1:43
The CSS style for that is called text-align. 1:46
And now we need a value. 1:50
Text-align has a few possible values that you're probably familiar with from using 1:51
word processors like Word or Google Vox. 1:55
We can tell it to align left, right, centered or justified. 1:58
By default, text is left-aligned. 2:01
So let's type center, and don't forget your semicolon. 2:04
Refresh, and now this h2 is centered. 2:10
Next, we'll add a border around the h2. 2:13
I could just tell you how to add a border, but searching for 2:16
CSS properties is something you'll do a lot. 2:18
There are so many CSS properties that even seasoned developers need to look them up. 2:20
One of my favorite CSS reference sites is called css-tricks.com. 2:25
Click on Almanac. 2:30
And now we have a nice, long list of CSS selectors and properties. 2:32
Scroll down and look for the border property. 2:37
The first thing they give us is an example. 2:43
As you can see, the border property has three values set to it, 2:45
3px, solid, and red. 2:49
Scroll a little bit farther down and look at the example of the syntax. 2:52
This first number, 3px, controls the border width. 2:57
It determines how thick the border will be. 3:01
The second value determines the border style, 3:03
which is set to solid in this example, but you can tell it to be dashed, doubled, or 3:06
any number other of styling options. 3:10
The third value determines the color of the border. 3:13
These values can actually be entered in any order. 3:15
You could list the color first, for example. 3:19
Go back to styles.css, give the card-title class a border, 3:22
a solid black border that is 3px wide. 3:28
That's the order I like to say it. 3:33
It helps me remember what values to enter, so 3:34
that's the order that I'm going to type it. 3:37
Let's refresh, and now this background h2 has a border. 3:41
Now that we have a border, we can give this element a border radius property. 3:46
A border radius is basically a fancy way to say curbed border. 3:49
We won't get into the technical details of border radius in this course, but 3:54
we can play around with it and see how it works. 3:57
Go back to styles.css and 4:00
give the card-title class a border-radius of 5px. 4:02
Now you can see that the corners of the border are rounded. 4:10
Try giving the border a radius of 10px. 4:14
And you can see they get even more rounded. 4:21
The higher the value, the more rounded the corners. 4:24
The border radius property will also take a percentage. 4:26
Make this value 50% and you'll 4:32
see that all the corners are now completely rounded. 4:38
You can even use border radius to make an element circular. 4:41
Take our main profile image as an example. 4:46
It's actually a square image with a 50% border radius applied to it, 4:49
making it completely round. 4:53
Now, you know how to target specific elements for 4:55
CSS styling both by HTML element and by class name. 4:57
But what if we wanted to specifically target multiple elements? 5:02
You'll learn all about that, along with more useful CSS properties, 5:05
in the next video. 5:09

You need to sign up for Treehouse in order to download course files.

Sign up