🔮Styling with CSS: tagging!🔮
Hello! This is part 2 of 'Styling with CSS'.
Part 1: https://replit.com/talk/learn/Styling-with-CSS-The-Basics/129895 (" 💫Styling with CSS: The Basics💫 ")
"Rabbits!" webpage: https://replit.com/@sarahhsaadiq/rabbits#style.css
Pre-Requisites
Here's what you should know before continuing this tutorial:
- Intermediate/Beginner HTML
- Beginner CSS
What is 'tagging'?
Tagging, in CSS, is allotting a certain... well, tag to your HTML tag. To simplify, what if you had all these different paragraphs, written inside <p>
tags, but you wanted only one paragraph to be yellow, and leave all the others the same. But... there's one problem. How do I tell the computer, "Hey! I want just the text inside this <p>
tag to be yellow, and leave all the others the way they are". You could use CSS to say,
p{
color: yellow;
}
but then it'd change all the <p>
tags to be yellow, and we don't want that.
See, this is where tagging comes in. In CSS, you can use two tags for tagging: the id
tag, or the class
tag.
The ID tag
The id
tag works pretty simply, but you'll want to remember certain things, as the computer can turn even small spelling mistakes into big-sized errors.
To start, pick the <p>
tag you want to style. Hover on inside the <p>
tag, so we can create our id. And by inside, I mean like this:
<p id=""> The rare breed is a great choice for first-time owners because of
its calm, sweet nature. Young children, however, are not recommended to care for them since they are shy and might bite if not handled gently. With
a great grooming routine and a healthy diet, American rabbits can live up to
12 years. </p>
Now, naming an id
tag is very important. You want the name to be small so that you can easily type it, but not so small that you forget what paragraph the id
is for! Because my paragraph is about American rabbits, I'll name it american
.
<p id="american"> The rare breed is a great choice for first-time owners
because of its calm, sweet nature. Young children, however, are not
recommended to care for them since they are shy and might bite if not
handled gently. With a great grooming routine and a healthy diet, American
rabbits can live up to 12 years. </p>
There! Now that our id
tag has a name, let's start styling it. To style it, we won't mosey down to the style.css file and start with:
american{
color: yellow;
}
The computer will be confused. It doesn't know what the hell 'american' is, it only knows that 'american' definitely isn't an HTML function. Whoops. To tell the computer "Hey, here's an id
that I want to color yellow", we'll have to say #american
. Why does this work, and the one before it not work? Because the hash (#) tells the computer that whatever comes after is an id. Now, your code should look like this:
#american {
color: yellow;
}
Fun fact: you can use the same id
for multiple HTML tags too. For example, if I want to change the h2
that says 'American Rabbits' to yellow too, I can simply give it the same id
as the p
we just tag. In code, it'll be like this:
<h2 id="american"> American Rabbits </h2>
You don't have to do anything to the CSS after this, the computer already knows anything with the id american
should be yellow. There's a simpler way to style multiple tags at once, but that's a whole different post.
Using the CLASS tag
Hehe, I'm too lazy to write down a whole big-a$$ explanation, so here's the short explanation:
It's just
<p class="american"> The rare breed is a great choice for first-time owners
because of its calm, sweet nature. Young children, however, are not
recommended to care for them since they are shy and might bite if not
handled gently. With a great grooming routine and a healthy diet, American
rabbits can live up to
12 years. </p>
and
.american {
color:yellow;
}
Instead of all that other shit.
And your done~
Here's how the webpage looks now:
Happy coding!