Learn to Code via Tutorials on Repl.it!

← Back to all posts
🔮Styling with CSS: tagging!🔮
[deleted]

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!