1 00:00:00,310 --> 00:00:05,460 We've just learned how to select an HTML element and style it with CSS. 2 00:00:05,460 --> 00:00:08,340 But what if we wanna style a specific instance of an element 3 00:00:08,340 --> 00:00:10,630 when there is more than one of that element on the page? 4 00:00:11,650 --> 00:00:14,320 How can we style just one of these h2 tags? 5 00:00:14,320 --> 00:00:18,250 One of the ways we can do that is with classes. 6 00:00:18,250 --> 00:00:21,920 Classes are attributes we can add to HTML elements. 7 00:00:21,920 --> 00:00:23,570 Then we can write a CSS rule for 8 00:00:23,570 --> 00:00:28,640 that class and any element that we add that class to will get those styles. 9 00:00:28,640 --> 00:00:29,850 Let's see how that works. 10 00:00:29,850 --> 00:00:32,710 We'll start by putting a class on this background h2. 11 00:00:32,710 --> 00:00:37,421 Let's find that in index.html 12 00:00:39,640 --> 00:00:43,083 You type a class just like any other HTML attribute, 13 00:00:43,083 --> 00:00:47,490 inside the carets with an equal sign and a set of quotes. 14 00:00:47,490 --> 00:00:49,350 You can name a class anything you want but 15 00:00:49,350 --> 00:00:51,740 class names often describe the elements they're placed on. 16 00:00:52,740 --> 00:00:57,090 The h2 we're working with is nested inside a section of code called card. 17 00:00:57,090 --> 00:00:59,970 This h2 is kind of like the title for the card. 18 00:00:59,970 --> 00:01:03,760 So let's call the class card-title. 19 00:01:03,760 --> 00:01:10,120 Now that we've created a class, we can write a CSS rule for it in styles.css. 20 00:01:10,120 --> 00:01:12,990 We indicate that the element that we're styling is a class 21 00:01:12,990 --> 00:01:15,220 by putting a dot in front of it, like this. 22 00:01:16,380 --> 00:01:19,050 That dot tells the web browser that it should look for 23 00:01:19,050 --> 00:01:23,370 a class attribute called card-title that exists on an HTML element. 24 00:01:24,400 --> 00:01:29,102 If you left off the dot in your CSS, then the browser would think 25 00:01:29,102 --> 00:01:33,108 that it needed to find an HTML tag named card-title. 26 00:01:33,108 --> 00:01:35,578 And when it couldn't find one, it would get confused and 27 00:01:35,578 --> 00:01:37,850 simply ignore your style instructions. 28 00:01:37,850 --> 00:01:41,930 After you type card-title, type your curly braces. 29 00:01:43,230 --> 00:01:46,280 And let's change this h2 so that it's centered. 30 00:01:46,280 --> 00:01:50,570 The CSS style for that is called text-align. 31 00:01:50,570 --> 00:01:51,625 And now we need a value. 32 00:01:51,625 --> 00:01:55,540 Text-align has a few possible values that you're probably familiar with from using 33 00:01:55,540 --> 00:01:58,180 word processors like Word or Google Docs. 34 00:01:58,180 --> 00:02:01,750 We can tell it to align left, right, centered or justified. 35 00:02:01,750 --> 00:02:04,420 By default, text is left-aligned. 36 00:02:04,420 --> 00:02:08,300 So let's type center, and don't forget your semicolon. 37 00:02:10,000 --> 00:02:13,570 Refresh, and now this h2 is centered. 38 00:02:13,570 --> 00:02:16,049 Next, we'll add a border around the h2. 39 00:02:16,049 --> 00:02:18,503 I could just tell you how to add a border, but searching for 40 00:02:18,503 --> 00:02:20,702 CSS properties is something you'll do a lot. 41 00:02:20,702 --> 00:02:25,010 There are so many CSS properties that even seasoned developers need to look them up. 42 00:02:25,010 --> 00:02:30,752 One of my favorite CSS reference sites is called css-tricks.com. 43 00:02:30,752 --> 00:02:32,092 Click on Almanac. 44 00:02:32,092 --> 00:02:37,620 And now we have a nice, long list of CSS selectors and properties. 45 00:02:37,620 --> 00:02:39,710 Scroll down and look for the border property. 46 00:02:43,280 --> 00:02:45,980 The first thing they give us is an example. 47 00:02:45,980 --> 00:02:49,640 As you can see, the border property has three values set to it, 48 00:02:49,640 --> 00:02:52,560 3px, solid, and red. 49 00:02:52,560 --> 00:02:56,090 Scroll a little bit farther down and look at the example of the syntax. 50 00:02:57,290 --> 00:03:01,490 This first number, 3px, controls the border width. 51 00:03:01,490 --> 00:03:03,940 It determines how thick the border will be. 52 00:03:03,940 --> 00:03:06,820 The second value determines the border style, 53 00:03:06,820 --> 00:03:10,920 which is set to solid in this example, but you can tell it to be dashed, doubled, or 54 00:03:10,920 --> 00:03:13,010 any number other of styling options. 55 00:03:13,010 --> 00:03:15,960 The third value determines the color of the border. 56 00:03:15,960 --> 00:03:19,190 These values can actually be entered in any order. 57 00:03:19,190 --> 00:03:21,130 You could list the color first, for example. 58 00:03:22,400 --> 00:03:28,762 Go back to styles.css, give the card-title class a border, 59 00:03:28,762 --> 00:03:33,320 a solid black border that is 3px wide. 60 00:03:33,320 --> 00:03:34,670 That's the order I like to say it. 61 00:03:34,670 --> 00:03:37,380 It helps me remember what values to enter, so 62 00:03:37,380 --> 00:03:38,720 that's the order that I'm going to type it. 63 00:03:41,880 --> 00:03:46,420 Let's refresh, and now this background h2 has a border. 64 00:03:46,420 --> 00:03:49,850 Now that we have a border, we can give this element a border radius property. 65 00:03:49,850 --> 00:03:53,020 A border radius is basically a fancy way to say curved border. 66 00:03:54,050 --> 00:03:57,770 We won't get into the technical details of border radius in this course, but 67 00:03:57,770 --> 00:04:00,140 we can play around with it and see how it works. 68 00:04:00,140 --> 00:04:02,861 Go back to styles.css and 69 00:04:02,861 --> 00:04:08,558 give the card-title class a border-radius of 5px. 70 00:04:10,926 --> 00:04:14,150 Now you can see that the corners of the border are rounded. 71 00:04:14,150 --> 00:04:18,325 Try giving the border a radius of 10px. 72 00:04:21,473 --> 00:04:24,300 And you can see they get even more rounded. 73 00:04:24,300 --> 00:04:26,960 The higher the value, the more rounded the corners. 74 00:04:26,960 --> 00:04:29,440 The border radius property will also take a percentage. 75 00:04:32,770 --> 00:04:38,650 Make this value 50% and you'll 76 00:04:38,650 --> 00:04:41,860 see that all the corners are now completely rounded. 77 00:04:41,860 --> 00:04:44,910 You can even use border radius to make an element circular. 78 00:04:46,350 --> 00:04:49,390 Take our main profile image as an example. 79 00:04:49,390 --> 00:04:53,680 It's actually a square image with a 50% border radius applied to it, 80 00:04:53,680 --> 00:04:55,610 making it completely round. 81 00:04:55,610 --> 00:04:57,820 Now, you know how to target specific elements for 82 00:04:57,820 --> 00:05:02,260 CSS styling both by HTML element and by class name. 83 00:05:02,260 --> 00:05:05,600 But what if we wanted to specifically target multiple elements? 84 00:05:05,600 --> 00:05:09,210 You'll learn all about that, along with more useful CSS properties, 85 00:05:09,210 --> 00:05:09,930 in the next video.