Question about HTML boxes

Im learning about HTML paddings with boxes
So im curious is injected text important and if so why?
Why do we have to use classes of both box and i.e. yellow-box, green-box etc…? Can we not just use box class alone and put inside background-color, padding, margin, border-color, border-style, text-align etc… so we dont have to make both classes of box alone and for example yellow box green box etc…?

Can you give some examples of what you’re talking about?

Like @PortableStick mentions, examples would be nice. It sounds like you’re wondering about specificity. Of course, you could only have a .box class, but perhaps adding specific IDs could allow you to make more individual adjustments.

.box {
 padding: 80px;
 margin: 20px;

#yellow {
background-color: yellow;

#green {
background-color: green;

This would allow you to have:

<div class = "box" id = "yellow" >  </div> 
<div class = "box" id = "green">  </div>

The first div and second div will have the same margin and padding, but they’ll have different background colors.

I think that’s the general idea behind classes vs. IDs.

bdfoz Thank you for explanation. Do we use injected text when we wish to just make text to be in center, left or right? Because i somehow dont get why injected is important and whats it used for exactly?

This is example:

Another question i wish to ask, can we change where to put text (center, right, left etc…) if we do it like this for example:

< style>
h2 { text-align: center; margin-bottom: 50px;margin-top: 60px; }

</ style>


On the example you give, .injected-text is simply a class. It could be named anything. I’m unsure of any technical use of what you’re calling injected text.

And yes, your text-align property looks correctly formated to me.

1 Like

Not sure what you mean by injected text, without an example I’d guess you have the terminology wrong. But:

In general, CSS is difficult to maintain. By putting everything in one big class, it’s difficult to make changes later on. So to mitigate this, generally you want the classes to do as little as possible. So for example:

.box {
  background-color: white;
  margin: .75rem
  padding: 1.5rem;

.box-yellow {
  background-color: yellow;

.box-blue {
  background-color: blue;
  color: white;

So the box class has properties common to all boxes, then the other classes add extra properties for specific boxes.

<div class="box"></div>
<div class="box box-blue"></div>
<div class="box box-yellow"></div>

Putting all the properties under box doesn’t make it simpler: the code becomes harder to read, harder to change and harder to maintain - eg if you put everything under box, what happens when you want a different coloured box?

It also avoids specificity issues, which you will encounter the more CSS you write. Note the ID example posted above is a bad example of this, as the IDs will override everything else - use classes rather than IDs.

More classes, each class doing a specific thing is generally better than one class that does everything - this is true for almost every situation.

It also means, ideally, that you can tell what is supposed to be happening by reading the HTML, the class names should be descriptive. The box example is contrived, a better example would be:

.button {
  /* basic styles for all buttons */

/* These might just be different colours: */
.button-primary {}
.button-secondary {}

/* These would only change size properties: */
.button-large {}
.button-small {}

/* These might change opacity, or add a shadow or an animation: */
.button--active {}
.button--disabled {}
<button class="button button-primary button-large">Click Me</button>

please show me the code .