Building Web Pages with HTML and CSS4:49 with Treasure Porth
Learn to personalize and change the look of a web page by adding and changing HTML tags and CSS attributes.
Let's play around with our example project a little bit and 0:00 see how we can add new text to a page with HTML and change how it looks with CSS. 0:02 Open up index.html and styles.css if you don't have them open already. 0:07 And click the preview icon at the top right here so 0:14 you can see what the project looks like in the browser. 0:16 Let's start by personalizing this. 0:19 First, we'll find Hello, I'm Jane in the HTML. 0:22 And change it to your name. 0:27 And below that, change the hometown to your hometown. 0:31 Now, save the file, refresh and you can see the changes we've made. 0:37 Now let's experiment with some of these HTML tags and see what happens. 0:42 Look again at this h1 element. 0:47 An h1 tag is part of the set of HTML heading tags 0:50 that are numbered from one to six. 0:54 One being for the most important text on your page. 0:56 And six being for the smallest subheading. 0:59 Each heading tag comes with some default CSS styles and 1:02 that controls how big the text appears. 1:06 To see what I mean, change this tag to an h2 and see what happens. 1:09 As you can see, 1:15 the text gets a little smaller than when it was wrapped in an h1 tag. 1:16 Now let's change this to a paragraph tag. 1:20 And you can see it gets even smaller still. 1:30 Let's put the h1 tag back so that everything goes back to normal and 1:33 see what we can do with the CSS. 1:37 Let's change the color of this yellow text in this hometown element to white. 1:41 Look in the HTML document and find where it says My hometown is, 1:45 whatever you put here, and notice that it graphed in a paragraph tag. 1:49 And on this tag there's a class. 1:53 As I said before classes are one of the ways that we can tell our CSS hey 1:55 this is the element that I want to style, or format in some way. 2:00 This element actually has two classes, tag, and location. 2:03 Let's look for the location class in the CSS. 2:07 The basic idea behind CSS is fairly simple. 2:14 Select the corresponding HTML elements or tags. 2:17 Then between these brackets here, we call them curly braces, 2:21 is where we put our style instructions. 2:24 As you can see, the color property, which refers to the font color, 2:27 is set to yellow. 2:32 So to change the font color, delete yellow and type white. 2:33 And the words are white. 2:39 So it's just that easy to change the way something looks on your webpage. 2:41 Now let's do something even cooler. 2:45 You see how when I hover over this main profile image, it kind of gets bigger and 2:47 spins to the side a little bit? 2:51 Looks a bit complicated, right? 2:53 Well, it's actually really easy to mess around with. 2:55 Let's change this, so the effect is a little more extreme. 2:58 Let's find it in our HTML. 3:02 Right here. And we can see that it has a class 3:06 of profile-image. 3:09 So that's what we'll look for in the CSS. 3:11 So here we have profile-image and profile-image:hover. 3:17 When you move a mouse over an HTML element and 3:22 that element changes in some way, like when a word underlines or 3:24 hyperlink changes color, that's called a hover state. 3:28 Because this style only applies when you hover your mouse over the image. 3:31 What makes the profile image rotate and 3:36 get better is this CSS property right here, transform. 3:38 Scale refers to how big it is. 3:42 So it's set to grow 1.2 times bigger when you hover your mouse over it. 3:44 And it's set to rotate five degrees. 3:49 Let's go a little nuts here and change this number to 3. 3:52 This will make the image get three times bigger when the mouse hovers over it. 3:55 And make it spin all the way around, so 360 degrees. 3:59 As you can see that's a pretty extreme hover state. 4:07 Just for fun, let's change this to 720 degrees and 4:11 see if we can get it to spin around twice. 4:14 And there you go. 4:23 Now, this is pretty ridiculous so I'm gong to set it back so 4:24 that it only gets 1.2 times larger But 4:28 I like it rotating 360 degrees, so I'll change it back to that. 4:34 And there you go. 4:42 I encourage you to keep playing with this. 4:43 Plug in more numbers, see what happens. 4:45 Have fun with it. 4:46
You need to sign up for Treehouse in order to download course files.Sign up