This course will be retired on July 31, 2024. We recommend "Introduction to HTML and CSS" for up-to-date content.
Start a free Courses trial
to watch this video
In this lesson, we'll look at how you can change the text color, background color, and size of an element within your style sheet.
Applying colors, adjusting fonts, and resizing elements are part of what makes a website "stand out" from the crowd. It's the custom design and styling that stops a website from looking like a wall of text and helps to engage viewers to stay on our site.
We apply new styles in our CSS stylesheets by targeting specific selectors. These selectors reference the HTML elements on our page and let us control which elements will receive specific style rules. For instance, if we wanted to apply a custom style to the paragraph element on a page, we could target its <p>
tag in the following way:
p {
color: blue;
}
Just remember, you'll always want to save your document to make sure you can see the new styles reflected in the browser!
Further Reading
Working with color in CSS
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up[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 download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up