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

John Wayman
John Wayman
1,672 Points
Posted by John Wayman
John Wayman
1,672 Points

I need to change the color of my h1 code. I have tried everything I can think of ( <h1 style= color: purple /h1> )????

I have tried multiple other formulas and can not figure this out. I just started about an hour ago, can someone help me out.

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

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

  </body>
</html>
styles.css 
<h1 style= color: purple /h1>

3 Answers

Codin - Codesmite
Codin - Codesmite
8,600 Points
Codin - Codesmite
Codin - Codesmite
8,600 Points

You are declaring your styles using Inline html in your external CSS file.

In your styles.css file you need:

h1 {
   color: purple;
}

h1 being the selector of the elements you would like to style. So the above code snippet is targeting all h1 elements. Within the braces you place your styles with a colon ";" at the end of each decleration.

So for example if you had multiple styles to declare you would do it like this for example:

h1 {
   color: purple;
   font-size: 16px;
   border: 5px solid #FFF;
}

This would set the colour to purple, font-size to 16px and place a border around the h1 element that is 5px wide, solid and white.

The way you are doing it in your example only works within the html file inline like this (this will only target the specific h1 element below and not other h1 elements on the page):

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

    <h1 style="color: purple;">Welcome to My Web Page!</h1>

  </body>
</html>

The full correct answer:

Index.html:

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

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

  </body>
</html>

Styles.css:

h1 {
   color: purple;
}
John Wayman
John Wayman
1,672 Points
John Wayman
John Wayman
1,672 Points

Wow thank you. I have much to learn.

John Wayman
John Wayman
1,672 Points
John Wayman
John Wayman
1,672 Points

Never mind I thought it was supposed to be in css. It was actually supposed to be under body...

John Wayman
John Wayman
1,672 Points
John Wayman
John Wayman
1,672 Points

Nope, I was wrong again. I'm lost here

Carlos José
Carlos José
Courses Plus Student 12,431 Points
Carlos José
Carlos José
Courses Plus Student 12,431 Points

Maybe clearing out the concept of syntax may help you.

HTML and CSS syntax is different.

Note :

Inside the style HTML Universal Attribute only the property - value CSS syntax is the same since you don't need the selector.