Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Introduction to HTML and CSS

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Building Web Pages with HTML and CSS

4:49 with Treasure Porth

Learn to personalize and change the look of a web page by adding and changing HTML tags and CSS attributes.

Note: You may have noticed that the background-color property we changed to blue in the previous video is back to grey. You can swap the blue value on line 77 in your styles.css file back to #e2e2e2 if you want your project to look identical to Treasure's!

In this video, we get to explore, edit, and update the sample HTML and CSS for a fully functioning website! If you're following along in your Workspace, you'll see that there is already a lot written here! Luckily for us, updating a style can be as easy as replacing a single value - like when we change the color of the text from yellow to white.

Not seeing your changes update in browser? Make sure you've saved your work in all of your Workspace files before you refresh the page!

Saving your changes in Workspaces

Remember, to view the changes you've made to the project files in your Workspace, you'll first need to save each file you've edited before refreshing the browser. When Treasure asks you to change the color to blue and refresh, make sure you've saved the file first! This is quick and easy if you use one of these shortcuts:

Saving your file

Operating System Keyboard Shortcut
Mac OSX Command āŒ˜ + S
Windows Ctrl + Sā€‹

Further Reading:

This lesson introduces two additional "advanced" concepts in HTML and CSS. You'll become more familiar with these in time, but if you'd like to read more, check out these links to the Mozilla Developer Network guides!

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    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 going 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

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

      Sign up