In CSS, can we select any HTML element by using its tag name as demonstrated in this exercise?

Question

In CSS, can we select any HTML element by using it’s tag name as demonstrated in this exercise? Could I even create selectors to target HTML elements in the head of a document? For example, can I change the color of tab text with a title tag selector?

Answer

No. CSS is used to style our pages. As <head> tag content is not visible on the page itself, we can not target this metadata with tag selectors.

34 Likes

Good to know! Great question!

15 Likes

Agreed with coder_brewer. I always wondered that myself!

2 Likes

So how do you style you browser tab?

3 Likes

Whilst I’m only just learning CSS (and am relearning HTML as I haven’t done any in some time), as far as I know, you can’t style the tab text. It’s always uniform in all the browsers I use. You can add the little icon (don’t ask me how - been years since I last did it; hoping will learn again somewhere down the line!) but that’s about it.

Anyone with more knowledge, feel free to correct me if I’m wrong.

6 Likes

The way that makes style in HTML is useful for me, i have big hand :v

No. Not every tag, <head> Isn’t visible so you cannot Style The Head Selectors. :sweat_smile:

2 Likes

The icon you are talking about is called a “favicon”: https://en.wikipedia.org/wiki/Favicon .
You can add either of the following link elements in the of your html file. You have a lot of other info on the wikipedia article, including file formats, size, etc.

<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<link rel="shortcut icon" type="image/png" href="http://example.com/favicon.png"/>
32 Likes

Good question :smiling_face_with_three_hearts: and thanks a lot for your answer

1 Like

How do you know how to target specific paragraphs. For example, in this exercise, you style the first paragraph and the first header. How can you choose which specific paragraph in your HTML doc to style?

1 Like

You can do this by assigning different classes to the p element itself, or to the containers that contain the p elements.

This covered in detail in future lessons.

4 Likes

you can go to the unicode characters and copy past little icons and place it in your

Hello @nwhitton,

I don’t know if you’re referring to the fact that the other paragraphs weren’t styled. If you read the HTML code you will see that only the first and very last paragraphs are a p element, the rest are div elements, which is why they weren’t affected by the changes in the CSS doc. So to style each paragraph differently, you would have to asign a unique id/class.

2 Likes

can you style link color?

1 Like

yes you can change the link colour!
And using it you can create an effect of changing the link colour after it is visited or when it is selected

code to refer:-
/* unvisited link */
a:link {
color: pink;
}

/* visited link */
a:visited {
color: green;
}

/* mouse over link */
a:hover {
color: red;
}

/* selected link */
a:active {
color: yellow;
}

4 Likes

Thanks, that helped.

1 Like

This gonna be interview question I feel.

1 Like