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