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

Cheryl Hanson
PLUS
Cheryl Hanson
Courses Plus Student 698 Points
Posted by Cheryl Hanson
Cheryl Hanson
Courses Plus Student 698 Points

How do I change the color of h1 to purple? do I do it in the css tab or within the HTML? I am not sure how to do it.

I am in the beginning HTML / CSS track and the instructions say to change the h1 color to purple. Do I do that within the HTML or click on the CSS tab? Also, how is it written?

index.html 
<!doctype html>
<html>
  <head>
    <link href="styles.css" rel="stylesheet">
  </head>
  <body>
    .style 
    color: purple;

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

  </body>
</html>
styles.css

2 Answers

Michael Hulet
Michael Hulet
47,912 Points
Michael Hulet
Michael Hulet
47,912 Points

A web page's code is divided into 3 parts:

  1. HTML controls what the page says
  2. CSS controls how to page looks
  3. JavaScript controls what the page does

Since you're trying to change the way something looks, it's best to put it in the styles.css file

Cheryl Hanson
Cheryl Hanson
Courses Plus Student 698 Points
Cheryl Hanson
Cheryl Hanson
Courses Plus Student 698 Points

Thank you Michael. But how is it written on the CSS tab so that it knows it is meant for the h1?

Michael Hulet
Michael Hulet
47,912 Points
Michael Hulet
Michael Hulet
47,912 Points

In CSS, you select all elements on a page by writing the name of the tag you want to select, and then an opening bracket, and then the properties you want to modify and their corresponding values, and then a closing bracket. For example, if I wanted to change the font size of all p tags to be 2em, I'd do it like this:

p{
    font-size: 2em;
}

You can check out this table for a great list of all possible CSS selectors so you can specify exactly what you want to style

Michael Hulet
Michael Hulet
47,912 Points
Michael Hulet
Michael Hulet
47,912 Points

Also, in the future, if you have 2 independent questions, it's better to ask them independently as 2 different posts. That way, others can more effectively answer and comment on your question directly, instead of a bunch of valuable information getting muddled together in a bunch of comments and answers on one post. Keep up the great work you're doing here, though!

Michael Hulet
Michael Hulet
47,912 Points
Michael Hulet
Michael Hulet
47,912 Points

Hi iuliana, it's discouraged here to post direct code to solve a specific problem without significant explanation. That way, other students have the opportunity to learn, because humans learn by discovering things themselves. It's generally better to solve a similar problem that has the same answer, so that the code you post can't be copied and pasted 1:1 and be expected to work. If you must post exactly the code necessary to solve a specific problem, be sure to explain it thoroughly! I've redacted your code here in the meantime, but if you want, you can edit your answer again to adhere to the guidelines a bit better. Thanks for all your help in the Community!