CSS html declarations with spaces

Question

If there is a simple google search for this question, I apologise now, but I'm unsure of which keywords I'm looking to use. I'm decent with CSS but I think I'm yet to utilise the full power of the language and also completely eradicate code redundancy.

I've come across this code (any similar snippets many other times):

<p class="comment smallertext center-align">

What CSS would this be referring to? In terms of the comment, smallertext and center-align all being spaced.

Thank you in advance for any replies and guidance!

This isn’t really about CSS at all: the construct is just HTML. It is then a different matter how you use class selectors in CSS in cases like this. — Jukka K. Korpela, Oct 17 '13 at 12:35

score 5 · Accepted Answer · answered Oct 17 '13 at 12:15

5

It means that element has all of the following classes: comment, smallertext and center-align. In HTML, spaces separate multiple class names in a single attribute.

In CSS, you can target this element using one or more of .comment, .smallertext or .center-align, either separately or together. Having three separate rules and a single element that has all three classes, all three rules will apply:

.comment {}
.smallertext {}
.center-align {}

You can also combine them together, if necessary, to apply styles specific to elements having all three classes:

.comment.smallertext.center-align {}

answered Oct 17 '13 at 12:15

BoltClock

700,868
160
1,392
1,356

So in this case, it's presumed to be that it has the overall comment class, a class to make the text smaller and another to center-align the text? And this avoids code repetition? – sark9012 Oct 17 '13 at 12:16
@Luke: You can say that, yes. – BoltClock Oct 17 '13 at 12:17
An answer and some more. Thanks, you'll get the green tick as soon as the timer allows! – sark9012 Oct 17 '13 at 12:22

score 1 · Answer 2 · answered Oct 17 '13 at 12:16

The code shown in the example links to 3 different css class selectors:

.comment {
}

.smallertext {
}

.center-align {
}

So instead of making lots of non-reusable css selectors, you split them up into lots of small ones that provide 1 functionality that will most likely be used for lots of different parts of your websites. In that example you have one for comments, one for smaller text and one for center aligning text.

score 0 · Answer 3 · answered Oct 17 '13 at 12:15

0

It's a way of defining multiple classes to a single element. In this case it would match classes comment, smallertext and center-align.

answered Oct 17 '13 at 12:15

walther

13,466
5
41
67

score 0 · Answer 4 · answered Oct 17 '13 at 12:44

0

Try this short explanation... Multiple classes can make it easier to add special effects to elements without having to create a whole new style for that element.

answered Oct 17 '13 at 12:44

DKanavikar

31
5

Thanks for the link to the reading material! – sark9012 Oct 17 '13 at 16:04

CSS html declarations with spaces

4 Answers4