Search Options
close
Search the following clips:
All Clips
Everyone's Clips
My Guides
Sign Up
Install
Learn More
Login
CSS: Working with Multiple Class Names
rMarks
follow
7
12-27-2006 7:57 AM
819 views
tags:
css
,
multiple
,
class
,
names
1 Comment
|
Add a Comment
12-27-2006
10:45 AM
travislaborde
Nice first clip rMarks! Welcome to Clipmarks!
Login
to Comment. Not a member yet?
Sign up
Related Clips
Createblog
CSS for Dynamic Data Table Presentation
30 Websites to follow if you’re into Web D...
What Would Jesus Do?
10 Signs you've been using Firefox too long
Free Web Bulding-This I Like
CSS Rounded Corners 'Roundup'
More clips from
rMarks
Crear iframes dinámicamente mediante Javas...
Today's Top Clips
Women: Just so darn tempting.
Cannabis less harmful than drinking, smoking: report
Bet you didn't hear this on Fox News!
Beauty in Decay
Stories They Can't Tell You
Too many calories send the brain off kilter
Has Slippery Sarah ever answered a question?
Magical Thinking
S&M Porn Illegal-Real Life Torture-OK!
Army Times: details of martial homeland security plans
visit the
Top Clips page
View the Top Clips from
December 27, 2006
Embed This Clip In Your Site...
<div style="margin: 12px 0px; font-family: arial; color: #333333; background: #ffffff; border: solid 4px #e5e5e5; width: 100%; clear: left;"><div class="CM_CTB_Content_Wrap" style="margin: 0px; padding: 0px;background-color:#e5e5e5;"><div style="border-bottom: solid 1px #dcdcdc; white-space: nowrap; margin-bottom: 8px; background-color: #eeeeee ;background-image: url(http://clipmarks.com/images/source-bg.gif); background-repeat: repeat-x; height: 24px; line-height: 24px; vertical-align: middle; padding-bottom: 4px; color: #666666; font-size: 10px;" ><a href="http://clipmarks.com/clip-to-blog/" title="see clips that are hot right now"><img src="http://content.clipmarks.com/blog_embed/9ccfd7f4-f1d4-46cb-9e17-487c40d951a0/BB1801C8-F86F-4EEF-B07F-1CBEE582CAD5/" alt="" width="19" height="19" border="0" style="vertical-align: middle; margin: 0px 4px; display: inline; border: none; float:none;" /></a>clipped from <a title="http://www.free-css-templates.com/css-techniques/css-working-with-multiple-class-names/" href="http://www.free-css-templates.com/css-techniques/css-working-with-multiple-class-names/" style="font-size: 11px;">www.free-css-templates.com</a></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.free-css-templates.com/css-techniques/css-working-with-multiple-class-names/"><DIV><H2>CSS: Working with Multiple Class Names</H2>This day I would like to share with you a good css trick ;) <BR /><BR />An element's class attribute can have multiple values, each separated by whitespace. This is a very powerful features of CSS, allowing you to apply styles from more than one class to any element. <BR /><BR />We can read in the <A href="http://www.w3.org/TR/html401/struct/global.html#h-7.5.2">HTML specifications</A>: <BR /><BR />class = <STRONG>cdata-list [CS]</STRONG> <BR /><BR />"<EM>This attribute assigns a class name or <STRONG>set of class names</STRONG> to an element. Any number of elements may be assigned the same class name or names. Multiple class names must be separated by white space characters</EM>." <BR /><BR />So we can make this css code: <BR /><BR /><PRE><BR />.title { font-size: 25px } <BR />.red { color: red } <BR />.right { float: right } <BR /></PRE><BR />and the html code: <BR /><BR /><PRE><BR />< h1 class = "title red right">Website Title< /h1> <BR /></PRE><BR /><BR />Now you should see your title (25px) in red on the right side :) <BR /><BR /><P>25 Dec 2006 . 13:56</P></DIV></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.free-css-templates.com/css-techniques/css-working-with-multiple-class-names/"></blockquote></div><div style="margin: 0px 6px 6px 4px;"><table style="font-size: 11px;border-spacing: 0px;padding: 0px;" cellpadding="0" cellspacing="0" width="100%"><tr><td style="background:transparent;border-width:0px;padding:0px;"> </td><td align="right" style="background:transparent;border-width:0px;padding:0px;width:107px" width="107"><a href="http://clipmarks.com/share/BB1801C8-F86F-4EEF-B07F-1CBEE582CAD5/blog/" title="blog or email this clip"><img src="http://content8.clipmarks.com/images/c2b-foot.png" border="0" alt="blog it" width="107" height="17" style="border-width:0px;padding:0px;margin:0px;" /></a></td></tr></table></div></div>
Clipmarks
Home
New Clips
Top Clips
Dashboard
Popular Topics
News
Life
Science
Technology
Entertainment
Get Started
Sign Up
Install Clipping Tool
How Clipping Works
Clip-to-Blog™
ClipSearch
Tools and Resources
FAQ
ClipWeek
Top Clippers
Top Tags
Site Map
About Clipmarks
About Us
Contact
Blog
Copyright
Privacy
EULA
OK