Using CSS Selectors

00:00 The CSS rules that you’ve set so far have only targeted generic HTML elements, but you can be much more specific with your CSS code when you set rules for HTML attributes.

00:11 Adding a class attribute to an HTML element enables you to use CSS class selectors to style elements based on their class values.

00:21 Class selectors allow you to group common elements and apply a set of rules to all of them in one go.

00:27 For example, you can define a class that applies rounded corners to images. Instead of targeting all image elements by using the img name, you can assign a class to only those images that should have rounded corners.

00:40 This also gives you the advantage of being able to add rounded corners to other elements by giving them the same class. To learn how CSS class lectures work, head over to your code and adjust your gallery.html file. First, wrap your image elements in a div block.

00:56 So just below your <h1> element drop to a new line and then div opening tag. Indent each of your image elements so that they’re inside of the div block.

01:09 And then close off that div element with a closing div tag. The div element is a generic element for structuring your page.

01:16 It doesn’t contain any semantic meeting and should only be used when no other HTML tag is more appropriate. Give your div element a class of gallery rounded.

01:26 So inside the div opening tag space class=" gallery rounded". The space of the class name makes it a space-separated list.

01:38 This means it applies to CSS classes to the div element. Now add a class of rounded to each image element as well. So line 17 inside the image element, going to add a space class="rounded".

01:55 And then rather than type this all out again, I’m just going to copy where it says Class="rounded" and then I’m going to drop down to the next image element and paste it in there and then drop down into the last image element and paste it there.

02:08 So now all image elements should have a class of rounded. There’s no other class name listed, so each image element only contains the one CSS class.

02:17 Unlike what you had for your div, we had two CSS classes, gallery and rounded. With your classes in place, head over to your style.css file.

02:27 To target CSS classes, you must use a dot and in the name of the class, add a background, color and padding to your gallery class. So drop down below your style changes for your anchor element and add .gallery

02:41 your declaration block so curly braces. Inside of the declaration block add your property background: rgba( 255, 255, 255, 0.2); and then close that off with a semicolon.

02:59 Drop down to a new line and add padding: 1em; Using RGBA here allows you to specify not only the color but also the opacity of that color where RGB only specifies the color itself without any transparency.

03:17 Padding refers to the space between the content of an element and its border. It is used to create space around the content, inside an element pushing the content away from the border.

03:28 In this case, you’re adding 1em padding to all sides of the element.

03:33 Now add a border radius to your rounded class. So outside the gallery declaration block, drop down to a new line and type .rounded declaration block so curly braces and inside the declaration block type `border-radius: `15px;

03:54 And finally, add margin right and width to your image elements inside of your gallery class. So outside the rounded declaration block, drop down to a new line and type .gallery space img and then make a declaration block.

04:11 So curly braces and inside of the declaration block type margin-right: 0.2em; and then drop down to a new line for the width. So width: 150px;

04:31 If you recall from before simple.css changed the color of our visited links to be blue, making it harder to see with our chosen background color.

04:39 You can address this now. On line nine where you’re selecting your anchor element. Add a comma just after the a and add a: visited The a: visited is a pseudo class, which is a key word added to a selector to specify a special state of the selected elements.

04:58 In this case, you’re selecting the anchor element with a state of visited. Open gallery.html in your browser and take a look at your changes.

05:08 The images now have a slightly transparent background and they’re all lined up nicely. Try navigating to your homepage.

05:15 The link now stays with your original salmon color.

05:19 Now it would be a good time to take a moment to gain a better understanding of the changes you just made.

05:26 Previously you changed CSS selectors. For example, the class selector gallery and the type selector img. With the space separated selector list, like gallery img you’re adding a rule for all `img elements inside an HTML element with the class gallery.

05:45 You previously used RGB notation. This time you added an additional channel known as the alpha channel. The alpha channel represents the level of transparency of the color.

05:55 The value ranges from from zero to one, where zero indicates full transparency, completely see-through, and one indicates full opacity. You used 0.2, which will make for a partly transparent background.

06:10 You can take off from here and further explore HTML and CSS and begin adding your own markup and design to your Python web development projects.