Select and Style by Element

[MUSIC] 0:00 Without CSS, all websites look pretty look exactly the same, 0:04 lots of text on a plain white page. 0:08 Luckily for us, CSS gives us a mind boggling number of options to control how 0:11 our webpages look, color, size, 0:15 shape, border, shadow, animation, the possibilities are endless. 0:18 We use CSS to make web pages beautiful by selecting HTML tags and 0:23 giving the browser a list of instructions for how those HTML tags should look. 0:28 Open styles.css in the profile project and take a look. 0:32 Each block of CSS is called a CSS rule. 0:38 And each rule selects a tag on an HTML page and 0:41 assigns it a list of properties that control how a browser displays the tag, 0:44 the size of the text or the color of a border, for example. 0:49 Take this rule right here, for instance. 0:53 This block of CSS tells the browser to make every single 0:55 anchor tag in the HTML this color. 0:59 As you can see, a style begins with some information, a, 1:02 in this case, followed by an opening bracket, which we call a curly brace, 1:07 and one or more lines of styling instructions. 1:12 The style ends with a closing curly brace. 1:15 Let me break this down a little more for you. 1:18 Each rule begins with what we call a selector, 1:20 this is how you tell the CSS which HTML tag or element you want to style. 1:23 We can select an HTML element in a variety of ways. 1:28 The most straightforward way is to select the element by its tag name. 1:31 Selecting the element by name allows you to style that element everywhere 1:35 that it appears on the page. 1:39 In this case, every link on the page. 1:40 We can style any HTML tag this way, h1, h2, paragraph even body. 1:43 Each line in the rule inside the curly braces is one style instruction. 1:48 Like on body, it sets the color of the text to this color, a really dark gray. 1:54 Let's look at another example. 2:00 Some styles use a different type of selector, for example, this CSS rule. 2:02 With this rule I'm saying to the browser, I want this .main-nav element to take 2:07 up 100% of the width of the browser, I want its background to be black, 2:12 and I want it to be at least 30 pixels high, and so on. 2:17 .main-nav isn't the name of an HTML tag, 2:21 it refers to the class name .main-nav in our HTML. 2:24 We'll get to styling by class a little later. 2:28 You can also see that a single CSS rule can hold a ton of styling instructions. 2:30 The more instructions you add, the more you can change the look of the tag. 2:36 Let's create and style a new element by creating a new CSS rule. 2:40 Say you wanted to add a new subsection in this background section, 2:44 maybe to include more information about yourself. 2:48 So let's go to index.html and right below the list that we made in the last video, 2:51 let's add a new section and we'll make that an h3, and 3:01 inside of the h3 type, A New Subsection. 3:06 And that's what that looks like. 3:14 Now lets go to styles.css, scroll all the way down to the bottom, and start 3:16 by telling the CSS which tag you want to style, which in this case is the h3. 3:23 I like to start by typing the selector followed by the opening and 3:28 closing curly braces, then hitting Return in-between the two curly braces. 3:32 Getting into this habit now will save you a lot of time wondering why your CSS isn't 3:37 working and hunting through your document for missing curly braces. 3:41 Now we'll write a CSS property. 3:45 All of these styling options like color, font size, line height, margin, and so 3:47 on are called CSS properties. 3:51 Set the color of the text by typing the property, color:, with a colon. 3:54 The colon separates the property on the left from the value on the right. 4:00 The value is where you get to have fun. 4:04 It's what you want to set the property to, like the color blue. 4:06 Don't forget to add a semicolon at the end of each and every style line. 4:12 If you can't figure out why your styles aren't working, checking for 4:16 proper punctuation is often a really good place to start. 4:19 Let's see what this looks like, it's blue. 4:24 Now we can change the color of the text by typing a huge number of colors, 4:27 like orange. 4:32 Or maroon. 4:37 Or you can always type a hexadecimal value here. 4:43 Which you might remember, is a code that tells the browser what color to display. 4:47 There are dozens of hexadecimal color pickers on the web. 4:51 I'll include a link to one in the teacher's notes, or you can Google it and 4:54 find one you like. 4:58 Now let's use another CSS property called letter spacing. 4:59 This does just what you might think, 5:06 it changes the amount of spacing between each letter. 5:08 The higher the pixel value, the farther apart the letters will be. 5:11 On the right, you can type a whole number, like 2px, 5:14 which makes the letters a little farther apart. 5:19 Or 50px, which makes them very far apart. 5:22 Or you can use a decimal here like .5px. 5:31 Which as you can see, gives you a much subtler effect. 5:36 Selecting by element is great if you have a set of identical elements that you wanna 5:39 style in the same way. 5:43 Like if you wanted to style the look of every h3 heading on your page, for 5:45 example. 5:49 But what if you only wanted to style some of those elements, or 5:50 one specific element? 5:53 For example, both the background element and the goals element are h2s. 5:55 What if I wanted to change only this background h2 and 6:01 make a different color, or make it bigger? 6:04 This is where class selectors come in handy. 6:07 In the next video you'll learn how to select and style by class. 6:09

You need to sign up for Treehouse in order to set up Workspace

Sign up