Are 2 classes in one tag line allowed?

[egbertz]

Sometimes a picture on my HTML-pages should appear at the left side, sometimes right. The dimensions are always the same and so are these styles: top-margin, padding-bottom and border-bottom. Three elements differ. The image container at the left hand must float to the left (of course), has a right-margin of 10 pixels and a 1 px right borderline. As one will understand, these 3 elements are the opposite for the right image box: float right, left margin, left borderline.In order to write my style sheets as efficiently as possible, I have the code as shown here:

.imgbox {  width:495px;  margin-top:4px;    padding-bottom:4px;  border-bottom:1px solid #000000;}.imgbox p {  margin:0;  font-size:10px;  font-weight:bold;  text-align:center;  text-indent:0;}.imgbox_left {  float:left;  margin-right: 10px;  border-right: 1px solid #000000;}.imgbox_right {  float:right;  margin-left: 10px;  border-left: 1px solid #000000;}

Now, for a left hand picture, I use this in my HTML-document:<div class = "imgbox imgbox_left"><img src="myimage" style="width:496px" alt="blabla" /><p>caption text</p></div>Note: By making the picture one pixel wider than its container, the right borderline to enclose the caption text, stays hidden alongside the picture. For a picture at the right side of the page I use additionally: style="position:relative,left:-1px;width:496px".But the main question is: In my HTML I actually call 2 classes in one 'blow' (1 tag line). This works in IE7 (did not test for other browsers yet), but is this correct code as well? Thanks in advance,Egbert

[ShadowMage]

But the main question is: In my HTML I actually call 2 classes in one 'blow' (1 tag line). This works in IE7 (did not test for other browsers yet), but is this correct code as well?

Absolutely. You can use as many as you like.

[cousineaug]

as a matter of fact you can compres your style sheet by defining more than one element at a time

.imgbox_left, imgbox_right/*define the common elements for both sides*/ {  width:495px;  margin-top:4px;    padding-bottom:4px;  border-bottom:1px solid #000000;}/*now define the different elements*/.imgbox_left {  float:left;  margin-right: 10px;  border-right: 1px solid #000000;}.imgbox_right {  float:right;  margin-left: 10px;  border-left: 1px solid #000000;}.imgbox p {  margin:0;  font-size:10px;  font-weight:bold;  text-align:center;  text-indent:0;}

so now your html can use just one class

<div class = "imgbox_left"><img src="myimage" style="width:496px" alt="blabla" /><p>caption text</p></div>

note the comma to say both elements have the same properties rather than without a comma to mean the second is child of the first.both versions are correct and should work in all browsers. Which is more elegant? Which is faster?in the old days we would optimize processor code for speed by counting how many cycles were required for each operation. But that was with 8 bit processors and a 2meg processor......today speed is relatively immaterial.

[egbertz]

as a matter of fact you can compres your style sheet by defining more than one element at a time (...)

At the first glance I thought: "this looks better", merely as a matter of appreciation I believe. But... now what? I suddenly need 2 identical style sheets for the <p>-contents of these 2 containers. So, what is efficient here? Since '2 strikes in a blow' is apparently allowed, as ShadowMage states, I'll return to my first approach.Thanks and regards,Egbert

[thescientist]

two style sheets? I don't that's what he trying to impart. As you get more comfortable with selectors and you experience and code starts growing, you fill it helpful to combine styles to reduce file size and to improve the efficiency of your stylesheets. Sometimes styles need to very specific, and sometimes they don't. Reducing the amount of times you duplicate a style is just a common convention in programming, just being applied to HTML/CSS. (known as the DRY (Dont Repeat Yourself) Principle.)

[egbertz]

Sorry, I meant 2 identical styles, not sheets.Regards,Egbert

[ShadowMage]

At the first glance I thought: "this looks better", merely as a matter of appreciation I believe. But... now what? I suddenly need 2 identical style sheets for the <p>-contents of these 2 containers. So, what is efficient here? Since '2 strikes in a blow' is apparently allowed, as ShadowMage states, I'll return to my first approach.

The main difference is not in the stylesheet, but in the HTML. With your example, though, there isn't a lot of difference. Sometimes it will be more efficient to do it one way or the other.Let's say you have four different elements that use similar styles but also have a few unique properties:<div>3px padding, 1px solid blue border, bold, red bg</div><div>3px padding, 1px solid blue border, large green text</div><div>3px padding, 1px solid blue border, large bold text</div><div>3px padding, 1px solid blue border, bold green text</div>By doing it with separate classes you'll need five classes:

.base {   padding: 3px;   border: 1px solid blue;}.red_bg {   background-color: red;}.bolded {   font-weight: bold;}.large_txt {   font-size: 20pt;}.grn_txt {   color: green;}

<div class='base bolded red_bg'>3px padding, 1px solid blue border, bold, red bg</div><div class='base large_txt grn_txt'>3px padding, 1px solid blue border, large green text</div><div class='base large_txt bolded'>3px padding, 1px solid blue border, large bold text</div><div class='base bolded grn_txt'>3px padding, 1px solid blue border, bold green text</div>But now let's use the method Guy suggested. You'll only need four classes and your stylesheet might look like this:

.bold_redBG, .lgGrn_txt, .lgBold_txt, boldGrn_txt {   padding: 3px;   border: 1px solid blue;}.bold_redBG, .lgBold_txt, boldGrn_txt {   font-weight: bold;}.lgGrn_txt, .lgBold_txt {   font-size: 20pt;}.lgGrn_txt, boldGrn_txt {   color: green;}.bold_redBG {   background-color: red;}

<div class='bold_redBG'>3px padding, 1px solid blue border, bold, red bg</div><div class='lgGrn_txt'>3px padding, 1px solid blue border, large green text</div><div class='lgBold_txt'>3px padding, 1px solid blue border, large bold text</div><div class='boldGrn_txt'>3px padding, 1px solid blue border, bold green text</div>This example doesn't really illustrate the usefulness of combining selectors very well, but I think you get the idea. It all depends on your situation.