Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML Introduction to HTML and CSS (2016) Getting Familiar with HTML and CSS Test: Changing the Look of a Web Page

Posted by Joey Shelton
Joey Shelton
220 Points

Change the color of the h1 tag to purple.

How do I change the color of the h1 tag to purple?

index.html 
<!doctype html>
<h1>
  <head>
    <link href="styles.css" rel="stylesheet">
  </head>
  <body>

    <p>Welcome to My Web Page!</p>

  </body>
</h1>
styles.css

2 Answers

srikarvedantam
srikarvedantam
8,369 Points
srikarvedantam
srikarvedantam
8,369 Points

This can be done in multiple ways as below (listed in the order of most preferred to least preferred approaches):

(1) In CSS, add the following that uses 'h1' type selector:

       h1 {
         color: purple;
       }

(2) In HTML, using <style> tag:

<!doctype html>
  <head>
    <link href="styles.css" rel="stylesheet">
    <title>My Web Page!</title>
    <style>
       h1 {
         color: purple;
       } 
    </style>
  </head>
  <body>
    <h1>
       Welcome to My Web Page!
    </h1>
  </body>
</html>

(3) In HTML, using "style" attribute for "h1" element:

<!doctype html>
  <head>
    <link href="styles.css" rel="stylesheet">
    <title>My Web Page!</title>
  </head>
  <body>
    <h1 style="color: purple">
       Welcome to My Web Page!
    </h1>
  </body>
</html>
mahmoud saeed
mahmoud saeed
14,071 Points
mahmoud saeed
mahmoud saeed
14,071 Points

You need to address your .html file first

You have a <h1> that starts outside of the <head> tag and it closes after the closing <body> tag. That is not valid markup. Here are some rules to follow that may help... 1 - HTML markup tags NEVER go inside the <head> tag. Things in the <head> tag will not be visually displayed on the page/view.

2 - You should not have HTML markup tags after the closing <body> tag. Your structural HTML markup tags should only be inside the opening <body> and closing </body> tags, that is where you will visually see what is going on. It should look something like this.

<html>
<head>
 //meta, links to external stylesheets and javascript files go here
</head>
<body>
    <h1>This is where stuff on the page you want to display goes</h1>
    <p>This is a p tag</p>
</body>
</html>

Now that we have that out of the way :) To address your original question... I noticed that you are referencing an external stylesheet(styles.css), in that file you need to target an element, in this case its the <h1> you would change the COLOR of the text like this...

h1{
    color: purple;
}

purple is one of many pre-loaded color choices, you can also enter a hex or rgb or rgba values as well.

Hope all of that helped! Keep going!