We've just learned how to select an HTML element and style it with CSS.

But what if we wanna style a specific instance of an element

when there is more than one of that element on the page?

How can we style just one of these h2 tags?

One of the ways we can do that is with classes.

Classes are attributes we can add to HTML elements.

Then we can write a CSS rule for

that class and any element that we add that class to will get those styles.

Let's see how that works.

We'll start by putting a class on this background h2.

Let's find that in index.html

You type a class just like any other HTML attribute,

inside the carets with an equal sign and a set of quotes.

You can name a class anything you want but

class names often describe the elements they're placed on.

The h2 we're working with is nested inside a section of code called card.

This h2 is kind of like the title for the card.

So let's call the class card-title.

Now that we've created a class, we can write a CSS rule for it in styles.css.

We indicate that the element that we're styling is a class

by putting a dot in front of it, like this.

That dot tells the web browser that it should look for

a class attribute called card-title that exists on an HTML element.

If you left off the dot in your CSS, then the browser would think

that it needed to find an HTML tag named card-title.

And when it couldn't find one, it would get confused and

simply ignore your style instructions.

After you type card-title, type your curly braces.

And let's change this h2 so that it's centered.

The CSS style for that is called text-align.

And now we need a value.

Text-align has a few possible values that you're probably familiar with from using

word processors like Word or Google Vox.

We can tell it to align left, right, centered or justified.

By default, text is left-aligned.

So let's type center, and don't forget your semicolon.

Refresh, and now this h2 is centered.

Next, we'll add a border around the h2.

I could just tell you how to add a border, but searching for

CSS properties is something you'll do a lot.

There are so many CSS properties that even seasoned developers need to look them up.

One of my favorite CSS reference sites is called css-tricks.com.

Click on Almanac.

And now we have a nice, long list of CSS selectors and properties.

Scroll down and look for the border property.

The first thing they give us is an example.

As you can see, the border property has three values set to it,

3px, solid, and red.

Scroll a little bit farther down and look at the example of the syntax.

This first number, 3px, controls the border width.

It determines how thick the border will be.

The second value determines the border style,

which is set to solid in this example, but you can tell it to be dashed, doubled, or

any number other of styling options.

The third value determines the color of the border.

These values can actually be entered in any order.

You could list the color first, for example.

Go back to styles.css, give the card-title class a border,

a solid black border that is 3px wide.

That's the order I like to say it.

It helps me remember what values to enter, so

that's the order that I'm going to type it.

Let's refresh, and now this background h2 has a border.

Now that we have a border, we can give this element a border radius property.

A border radius is basically a fancy way to say curbed border.

We won't get into the technical details of border radius in this course, but

we can play around with it and see how it works.

Go back to styles.css and

give the card-title class a border-radius of 5px.

Now you can see that the corners of the border are rounded.

Try giving the border a radius of 10px.

And you can see they get even more rounded.

The higher the value, the more rounded the corners.

The border radius property will also take a percentage.

Make this value 50% and you'll

see that all the corners are now completely rounded.

You can even use border radius to make an element circular.

Take our main profile image as an example.

It's actually a square image with a 50% border radius applied to it,

making it completely round.

Now, you know how to target specific elements for

CSS styling both by HTML element and by class name.

But what if we wanted to specifically target multiple elements?

You'll learn all about that, along with more useful CSS properties,

in the next video.