multiple CSS classes, how they work and WHY do it this way? [duplicate]

Question

This question already has an answer here:

article class: does load order matter? (1 answer)

Closed 8 years ago.

I'm a programmer not a CSS dude and like most programmers haven't spent too much time trying to understand the effects of CSS. There has always been an UX person to handle. But as I get more experienced I am digging CSS and the UX. So my question is this:

What I understand:

<div class="AClassName" >
</div>

I understand how this relates to the .css file and what will happen.

What I don't understand:

<div class="AClassName andAnother1 andAnother2">
</div>

I'm hoping there is a simple explanation.

Answer 1

Just an example:

<div class="positionClass contentClass decorClass">
    Lorem textum
</div>

.positionClass: here any position properties could be applyed, 4example absolute/fixed position, display properties, margin/negative margin.

.contentClass : here we can add styles to text: line-height, font-size and so on.

And the last one for some decoration elements.

Hope you get the idea.

Answer 2

CSS works from top to bottom - meaning the styling you add last will override any previous styles.

For instance if I take a button with a class="btn" and style btn to be background-color:black; all my buttons will be black but I want to have a button that's red, then I add class="btn btnCustom" or class="btnCustom btn" and style btnCustom to have a background-color:red it will override that button's style only.

See JS fiddle bellow: http://jsfiddle.net/udru2/

Answer 3

You can have more than one class for same element in any order. Order is important in .css file itself. Imagine, that all classes are added in one array and all keys (like width, height..) are overridden by any new entry by that key (reading file from top to bottom).

Answer 4

Let me suppose i have two div's like this

<div class='make-red capitalize'>abcd</div>
<div class='make-green make-center'>askhdj</div>

and the css as follows

.make-red{
color:red;
}

.capitalize{
text-transform:uppercase;
}

.make-green{
color:green;
}

.make-center{
text-align:cneter;
}

In a big page where we use loots of divs which are to be styled, this kind of approach helps you. This is just a single use which can be shared.