Multiple CSS Classes (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

pageoneresults -> Multiple CSS Classes (5/12/2003 14:28:11)

Did you know that you can assign Multiple CSS Classes to one element? For example, in your external css file...

.blue{color:#336699;background:transparent;}
.red{color:#ff0000;background:transparent;}

.ctr{text-align:center;}
.rt{text-align:right;}

And then anywhere where you wish to use the Multiple CSS Classes you can do this...

<p class="blue ctr" >Blue centered text here.</p>

<p class="red rt" >Red right aligned text here.</p>

The possiblities are somewhat endless. Up until this point, I' ve been using individual classes to achieve the desired effects. Now that I know that I can assign Multiple CSS Classes to one element, it opens a whole new window of opportunity, especially in keeping my external css files lean and mean.

This topic was originally posted at WebmasterWorld by papabaer, and paraphrased by grahamstewart under the title of...

How to specify multiple classes for one element.



abbeyvet -> RE: Multiple CSS Classes (5/12/2003 14:45:37)

Nice [:D]

Thank you for that!



Shirley -> RE: Multiple CSS Classes (5/12/2003 20:56:30)

quote:

been using individual classes to achieve the desired effects. Now that I know that I can assign Multiple CSS Classes to one element, it opens a whole new window of opportunity, especially in keeping my external css files lean and mean.


same here. I really need to find the time to learn all of the ways to use css. Thanks for the tip!!!



ddhTechnologyGroup -> RE: Multiple CSS Classes (10/24/2004 3:56:45)

I didn't figure it would hurt to point out that if you place the same elements inside your classes (such as font-size) having multiple CSS classes assigned to one HTML element can get tricky.

take these two classes for example 

.small
{
font-size:10;
font-weight:normal;
}

.Div4
{
width:100%;
font-size:14;
font-weight:bold;
color:#222222;
padding:5;
border:0;
border-top:1;
border-style:solid;
border-color:#333333;
}


Now, if you do this: 

<div class="Div4 small">Text</div>


You're going to get a Div4 with BOLD type and a font size of 14. You will NOT get a Div4 with NORMAL type and a font size of 10.

If you place the CSS like this: 

.Div4
{
width:100%;
font-size:14;
font-weight:bold;
color:#222222;
padding:5;
border:0;
border-top:1;
border-style:solid;
border-color:#333333;
}

.small
{
font-size:10;
font-weight:normal;
}


Then the .small class is AFTER the .Div4 class, and you WILL get what you are probably looking for, which is a Div4 with font-weight:normal and a font size:10.

From doing this you should be able to see that the CSS parser cares about the order in which you put things into it. If you tell it to do both classes, and there are conflicting values between the two classes, then CSS will use the value that is read last from beginning to end.

Oh man, I hope this makes sense to someone. Play around with some code like this and it might make more sense if you don't get it.



d a v e -> RE: Multiple CSS Classes (10/24/2004 5:13:08)

yes did know that, but i'm not sure how robust it is in older browsers, say IE 5.5... so i've always avoided using it. pity though.

ddhTechnologyGroup that's called the cascade and it's prefectly logical and powerful.



ddhTechnologyGroup -> RE: Multiple CSS Classes (10/24/2004 7:19:57)

Logical but also tricky. Didn't know the name cascade but now I do. Knew the concept but never realized it applied with assigning multiple classes until today. In fact, never applied multiple classes until today. I'm a PHP guy...after 2 years CSS is just now becoming regular vocabulary for me.

Thing is, I happened upon this thread and thought to myself 'oh how cool' because I was looking for exactly how to do just this...but I tried it and that's when I realized the issue with the order as it pertains to multiple class assignments.

So I was hoping the next person who came onto this page from Google could skip the frustration I had because of my relative ignorance to the sometimes difficult to discern nuances of CSS.

Just joined the site, seems pretty cool, keep it up whoever.



d a v e -> RE: Multiple CSS Classes (10/24/2004 7:45:37)

yep sorry if i sounded a bit ars*y :)

there might be more, relevant info about it here (the cascade etc) http://www.w3schools.com/css/default.asp

i remember eric meyer pointing out that you can use multiple classes but that older browsers are an issue - will try and find out what level of browser he might have mentioned.




ddhTechnologyGroup -> RE: Multiple CSS Classes (10/24/2004 18:56:01)

I'd be interested to see what the browser compatibility issues are with cascading, but couldn't find specific reference with moderate searching.

this link http://www.richinstyle.com/bugs/table.html

says that IE5.x KINDA has support for multiple classes but that it is buggy and basically doesn't work. Not sure how that translates into reality but it seems that it's not supported.

According to W3schools.com only 6.4 percent of internet users are using browsers that do not support multiple classes.

I'd be willing to bet that if multiple classes are supported then cascading MUST be supported.



d a v e -> RE: Multiple CSS Classes (10/25/2004 0:06:30)

the cascade is supported by all css capable browsers, though there maybe one or two bugs for some things: it's an integral part of the way css works



ddhTechnologyGroup -> RE: Multiple CSS Classes (10/25/2004 7:57:16)

Ya, I don't think you and I are talking about the same concept when we say 'cascade'. What is your definition of that? with code example?



d a v e -> RE: Multiple CSS Classes (10/25/2004 10:13:55)

quote:

Multiple Styles Will Cascade Into One

Style Sheets allow style information to be specified in many ways. Styles can be specified inside a single HTML element, inside the <head> element of an HTML page, or in an external CSS file. Even multiple external Style Sheets can be referenced inside a single HTML document.
Cascading Order

What style will be used when there is more than one style specified for an HTML element?

Generally speaking we can say that all the styles will "cascade" into a new "virtual" Style Sheet by the following rules, where number four has the highest priority:
Browser default
External Style Sheet
Internal Style Sheet (inside the <head> tag)
Inline Style (inside HTML element)

So, an inline style (inside an HTML element) has the highest priority, which means that it will override every style declared inside the <head> tag, in an external style sheet, and in a browser (a default value).

(from http://www.w3schools.com/css/css_intro.asp )

and a bit more explanation with examples here
http://www.mako4css.com/BasCas.htm



ddhTechnologyGroup -> RE: Multiple CSS Classes (10/25/2004 10:23:04)

Oh...haha. Cascades..that's like, the main concept of Cascading Style Sheets. I thought it was something else. BUT

That still doesn't really explain the 'order' that you put them in an external file making a difference. In my example above both classes were in an external .css file. But it makes sense with that model.



d a v e -> RE: Multiple CSS Classes (10/25/2004 10:31:49)

quote:

That still doesn't really explain the 'order' that you put them in an external file making a difference.


so for example if you have two styles for H1 like 
 H1 {color: red;}

 H1 {color: blue;}

 then how do you decide which one wins? they are both equal so it's decided by whicever one comes last 
  
 so in this case all heading 1's would be blue. 
  
  
 you can use this to your advantage like this 
  
 
H1, H2, H3, H4, H5 {
	font-family: "Trebuchet MS", Geneva, Verdana, Helvetica, sans-serif;
	color: #006AAE;
	line-height: 1em;
	margin-bottom: 0;}
 
  
 but then you could easily make H1 red by this 
  
 
H1, H2, H3, H4, H5 {
	font-family: "Trebuchet MS", Geneva, Verdana, Helvetica, sans-serif;
	color: #006AAE;
	line-height: 1em;
	margin-bottom: 0;}
 
  
 ]H1 {	color: red; 
 	}[/code] 
  
 then the headings are all trebuchet MS with no bottom margin, etc, and blue, except H1 which is red, because it comes later in the stlye sheet (if it was the first style in the order then it would be over-ridden by the color: #006AAE; in the later style)



ddhTechnologyGroup -> RE: Multiple CSS Classes (10/25/2004 11:14:56)

That tip should be placed in a whole separate topic under articles, along with the multiple classes tip as a supplemental. Who's an admin?



c1sissy -> RE: Multiple CSS Classes (10/25/2004 19:02:24)

quote:

ORIGINAL: ddhTechnologyGroup

That tip should be placed in a whole separate topic under articles, along with the multiple classes tip as a supplemental. Who's an admin?


I believe if you take a look at the css links section in here you will find all of this explained through links to all the information for css that is posted by the members in there.


One thing to help you remember this a bit better, the closer to the code that the style is, the higher the cascade. Inline styles being the closest. They would have the highest priority over an embeded or linked.

Also, the site that Dave mentions above is also listed in there as well.

I would highly suggest that you read the links that Dave is supplying above. Good ones to get you started. There is also a tutorial in Outfronts tutorial section on css. And many books out there that have been purchased.

And of course keep posting questions in here. We all work together to keep learning css according to the standards that are set for style sheets.

Also, westciv is a good site to go for information. They have a bundled course that is terrific.

Good luck!



ddhTechnologyGroup -> RE: Multiple CSS Classes (10/25/2004 23:36:05)

lol. One good suggestion for you guys: Don't assume someone doesn't know anything just because they don't understand exactly what you're talking about every time you say something.

I'm not offended, but someone might get that way.



dpf -> RE: Multiple CSS Classes (10/26/2004 6:51:02)

quote:

lol. One good suggestion for you guys: Don't assume someone doesn't know anything just because they don't understand exactly what you're talking about every time you say something.

I'm not offended, but someone might get that way.

reading this thread, I am perplexed by that post. I dont see anywhere where dave, cissy et. al. treated you that way.



ddhTechnologyGroup -> RE: Multiple CSS Classes (10/26/2004 7:47:52)

Let's not be children...

I have programmed style sheets that cause internal bleeding in children from direct exposure to pure precision (laugh)... I don't get 25 cents/hr for nothin'

... Again, not offended, just thought it was funny and kinda weird. Was trying to help out with a very well thought out tip for a site that doesn't seem to have much content just yet (seems new), and got the "talkin' to" like I thought cascading style sheets were a fashion trend...The 'cascade' is the basic concept for CSS...I thought we were talking something a bit more complex. My mistake there.

We're all just programmers. And this stuff isn't complicated. Let's face it, HTML and CSS aren't even considered programming code, even by novice Perl (cringe) and PHP programmers. I certainly don't consider HTML or CSS a 'programming language' or anything even on a level with that. Forget C++. It's like Tinker Toys versus Space Stations.

And I know most of us here aren't just HTML/CSS people...not even enough money in that to pay the bills on an apartment (at least in my experience).

But none of us is better than the other. So let's play nice and try to help people without talking down to them. I'll try and do the same.

Only thing is, I've kinda got this thing, where um...Well...My first impression is always horrible. Always, without fail...horrible. So now hopefully it's out of the way. I'm sorry, I know, I'm an a**hole. You think I'm kidding. I'm seriously not kidding. Once you get to know me though, I'm a good guy. I like people, I want to help people. I'm nice. Just not the first time you meet me.

I do this sort of thing for a living...and have too much work so once ya get to know me and realize I'm not an a**hole no matter how much I let on that I am...then let me know if you need somethin' to do.

post edited due to language. Please try to remember that we have underage school children who visit our site for information, thank you, c1sissy.



Giomanach -> RE: Multiple CSS Classes (10/26/2004 8:11:07)

quote:

Let's not be children...

Only I'm allowed to be that, and Deb, Dan and Dave are most certainly not being children

quote:

We're all just programmers.

Not True. The world of web design is dominated by two kinds of Developer. Those that Program, and those that design - Web Designer, and Web Programmer. CSS is a styling language, (X)HTML is the basis of a web page - they are codes, not programming languages. JavaScript, ASP, PHP etc are programming languages.

quote:

Forget C++. It's like Tinker Toys versus Space Stations.

So what about those who intend to learn ASP.NET? ASP.NET is built on C++, therefore a background in C++ would assist greatly in the learning process of ASP.NET.[8|]

quote:

Only thing is, I've kinda got this thing, where um...Well...My first impression is always horrible. Always, without fail...horrible. So now hopefully it's out of the way. I'm sorry, I know, I'm an asshole. You think I'm kidding. I'm seriously not kidding. Once you get to know me though, I'm a good guy. I like people, I want to help people. I'm nice. Just not the first time you meet me.

First impressions don't always count, I would recommend you proof read your posts before posting - it may stop the "a**hole" image from appearing

Please excuse the tone of which I have written this post



c1sissy -> RE: Multiple CSS Classes (10/26/2004 8:23:50)

I"m not going to allow this to turn into an arguement of any sorts. If you are going to continue this discussion, please keep it kind and clean. And remember that we have visitors that come here that are not members, but could be. And we also have children that visit our site, please keep the language clean as well.

Thank you!



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
7.800293E-02