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) Make It Beautiful With CSS Select and Style by Element

Posted by Hina K.
Hina K.
4,806 Points

Select and Style by Element (HTML & CSS)

a {
  text-decoration: none;
  color: #0499ff;
}
a:hover {
  color: #6633ff;
}

Why does this code reference the links on the webpage? Is it because the HTML code is between <a> </a> anchor tags?

For anchor tags created in HTML, will the selector always be 'a'?

mgarcia5
mgarcia5
1,578 Points
mgarcia5
mgarcia5
1,578 Points

The 'a' is the HTML element targeted to be styled with the selectors you give it. In general, you can call HTML elements in a stylesheet to then give it some styling. In this case, the 'a' will target all <a> tags, and give them the styling you specified inside those code blocks. And yes, the anchor tags will have the 'a' selector. However, if you want to add different styles to different 'a' tags, you can use either a class or id attribute to your HTML element and create a new styling code block for that specific 'a' using the specified class/id attribute.

1 Answer

Chris Adams
Chris Adams
553 Points

Hi Hina K. ! mgarcia5 has given you a pretty great answer here :-D

Starting off with HTML and CSS, and understanding the different syntax used by each, can be challenging! I can try to unpack it in a little more detail for you here.

Why does this code reference the links on the webpage? Is it because the HTML code is between <a> </a> anchor tags?

For anchor tags created in HTML, will the selector always be 'a'?

Technically - yes, this is a fair way to think about it. In your HTML file, we could have the following markup:

<h1> Welcome to my webpage! </h1>

<p> Here we will learn all about the core concepts required to become a great web developer! </p>

<p> This will be an exciting journey, but it will take a little bit of time, patience, and practice. </p>

<a href="https://teamtreehouse.com> Click here to learn more!</a>

I've wrapped content within specific HTML tags. If I apply a style to these tags in my CSS file, then just the content inside those tags will be affected.

I can do that like this:

h1 {
   color: blue;
}

p {
   color: red;
}

a {
   color: green;
}

In this example, everything wrapped between h1 tags in your HTML will be colored blue, everything wrapped between p tags will get colored red, and everything in between a tags will get colored green!

Your question about <a> tags is a little tricky, because there are some unique properties to a hyperlink that will be covered a little later in the course. For instance, you probably have noticed that on some websites, after you click a link it will change color (often to purple) to indicate that you have visited the link before. So for <a> tags, we have a few additional features we can apply to change styles for those states.

I know it's a lot to process when you're getting started, but trust me - with exposure, experience, and a bit of practice, you'll master the basics pretty quickly :-)