Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

Balajee Shrikanth
PLUS
Balajee Shrikanth
Courses Plus Student 885 Points

how do you Change the color of the h1 tag to purple.

how do you Change the color of the h1 tag to purple.

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

    <h1 class= "tag name">Welcome to My Web Page!</h1>

  </body>
</html>
styles.css
}
.tag {
  'color': white;

1 Answer

You can do this several ways, but since you have an external style sheet, I'm only going to recommend one way to do it. Here is a link to all of the CSS styling methods (there are 3 total). External, which is the way I'm going to show you, is typically the most recommended because it helps you style multiple pages to help promote a uniform layout for any future projects you do. https://www.w3schools.com/css/css_howto.asp

Instructions: First, declare you selector as h1. Second, make sure you have an opening and closing pair of curly braces to write your declaration INSIDE of those curly braces.

Note: This fix applies to ALL h1 elements in your document and other documents that use the styles.css layout.

h1{
color: purple;
}

As an alternative, if you want to do it off of the tag class, try this code instead: HTML Code

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

    <h1 class="tag">Welcome to My Web Page!</h1>

  </body>
</html>

CSS Code

.tag{
color: purple;
}

Either way works for you, but your HTML gives h1 TWO classes (.tag and .name). If you don't fix the HTML, the CSS will probably still work. You can set multiple classes for your tag, but it's not really necessary to include it for this project that you're asking about.

One last thing about colors is that there are several ways you can declare them. I've included a link that you can follow to see the different options for purple. I use this website a lot, because I love to color code stuff.

http://www.color-hex.com/color/551a8b