Adding the CSS

In our previous video, we created the HTML for our profile card, but 0:00 we didn't change the appearance of our page. The browser is 0:05 applying a bit of style to our page. But these are all default styles 0:10 found in what's known as the user agent stylesheet. The user 0:14 agent stylesheet is the reason our headings are larger than our 0:20 bulleted list, that our headings have space underneath them, and 0:24 our links are underlined and colored differently from the rest of our text. 0:28 Relying on default styles isn't too exciting though, so 0:35 let's try creating a few styles of our own. 0:39 Let's switch over to our CSS file called style.css, and 0:43 get ready to write some CSS selectors. 0:48 CSS selectors define the elements to which a set of CSS rules apply. 0:53 There are actually a few different ways to select HTML content 0:59 to be styled. But for now let's focus on type selectors, 1:04 in which we write the name of the HTML element we'd like to style. 1:08 For example, if I'd like to make changes to all my content in 1:13 my browser, I would start by selecting the body tag. 1:18 Looks pretty different from HTML, doesn't it? 1:24 The heart of each CSS selector is found inside these left and right 1:28 curly braces, where we're able to write one or more CSS declarations. 1:33 A CSS declaration consists of a property you'd like to change on 1:51 the page, followed by the value you'd like to change it to. 1:55 In this case, I first changed the background color property 1:59 to a value called darkslategray, and then changed the text color to white. 2:04 Note that a colon separates the property from the value, and 2:12 that each CSS declaration ends with a semicolon. 2:16 Save your page and try it out in the browser, and nice work. 2:21 You've made a color change. 2:26 You might be wondering how I came up with a funny sounding 2:32 color name like darkslategrey. 2:35 Did I memorize a bunch of color names? 2:38 Not really. In fact, succeeding as a 2:41 web developer has little to do with memorization. 2:44 Your success depends on practicing frequently, 2:47 as well as keeping helpful resources handy, 2:51 such as this article on HTML color names I've provided in the Teacher's Notes. 2:54 So if you're thinking, you know, I was really hoping to pair lemonchiffon 3:00 text with an indigo background, give it a try. Take a moment to 3:05 try out some different color combinations before we move on. 3:09 Let's see what other changes we can make to the body. 3:17 Here I've changed the font used in my webpage. 3:29 I've asked the browser to choose Arial, which is a 3:33 pretty common typeface found on most user's machines. 3:35 I've also adjusted the margin property to increase the amount of space 3:40 around my content. 3:44 The px measurement is short for pixels, which is used for 3:47 measurement on a digital display. 3:50 If I increase that margin to 40 pixels, now the space 3:55 around my content measures 40 pixels rather than 20. The hyperlink 3:59 to Treehouse's website is pretty hard to read on my darkslategray 4:05 background, so let's add another type selector to change the color. 4:11 To do this, we need to select the HTML element that creates hyperlinks. 4:17 See if you can remember what that was. 4:23 If you said a, great job. We create hyperlinks in HTML by writing a href. 4:28 But href is an attribute, so we won't include that in our type selector. 4:36 Instead, we target only the anchor tag to style the appearance 4:42 of the links on our page. 4:47 Next up, how about styling our profile image? 4:57 I've included a width declaration here, so if you're using a really large image, 5:15 you'll see it's grown smaller in the browser. 5:20 I've also added a five pixel solid white border around the image. 5:24 And the last line is a pretty cool CSS trick. 5:30 Border-radius is normally used to apply rounded corners. Let's try 5:35 setting that value to 25 pixels instead of 50%, and you'll see what I mean. 5:40 Setting the border-radius back to 50% turns our image into a circle. 5:48 I've included an article on border-radius in the Teacher's Notes 5:56 from a website called CSS Tricks. 6:00 This is the kind of resource developers refer to all the time 6:04 when writing code. 6:08 And you'll learn lots more tricks like this one in 6:10 the Front-End Web Development curriculum here at Treehouse. 6:13 Last but not least, I'd like to style our list of skills. 6:19 I've applied some margin on the left side of my bulleted 6:32 list to make it appear roughly centered under my image. 6:36 I arrived at the number I'm using, 50 pixels, by trial and error. 6:42 If you're using longer or shorter lines of text, try out different number values, 6:48 and test out how your bulleted list looks in the browser. 6:53 My final declaration, line-height, is used to increase the amount of 6:58 space in between each line of text, so our list becomes a bit easier to read. 7:03 The value I've used, 200%, sets the amount of space 7:09 separating each line of text to twice the height of the text itself. 7:14 Well done, you've completed a profile card using HTML and CSS. 7:22 There's nothing quite like the feeling of checking out your first ever web 7:27 project in a browser. 7:32 Hopefully you enjoyed writing code and seeing the results of your work. 7:34 And if you found yourself struggling a bit, and had to 7:39 pause the video to back up and make corrections, that's perfectly normal. 7:42 Even developers who have been in the industry for 7:46 decades make mistakes all the time. It's part of the learning process. 7:49 The important thing is to keep learning, keep practicing, and keep having fun. 7:53 And don't forget to celebrate your successes. You've coded your own 7:59 profile card with an interactive hyperlink. Not everyone can say that. 8:04

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

Sign up