CSS - Class Traverse In Reverse

Sorry for the lousy title, can't come up with better wording....

What I'm trying to say is can someone give me an example code of a css syntax that accept one css classname and add a few more properties to it under a different class name. Sort of like merging two classname into one.

Thanks...

The book i am reading does not clear this up. When would you use class vs id to put elements in different catagories? why not use all id? It seems to make more sense.. ie. make all headers id="header"
and divs also class.

thank you in advance

I'm using ASP.NET 2.0 for my site. I already have a CSS that is working for the site; however, because an ASP.NET lable requires CSS Class, how do I convert my current CSS to a CSS Class? I know that a CSS class start with a period then a unique name. The problem is how do I implement the li, ul, a, and so on. Here is what I have that I want to convert to a CSS Class.

#nav {
padding: 0;
clear: both;
}
body.main #nav, body.blogger #nav {
float:right;
width: 220px;
\width: 250px;
w\idth: 220px;
margin: 10px 10px 0 0;
padding: 0;
}
body.second #nav {
float:left;
width: 200px;
\width: 210px;
w\idth: 200px;
padding:0 0 20px;
margin: 0;
}
body.second #nav img {
padding-bottom: 10px;
}
#nav a { color: #006; }
body.second #nav ul {
list-style: none;
padding: 0 0 0 5px;
margin: 0;
}
body.second #nav ul li {
margin: 0 0 7px 0;
font-size: 11px;
}
body.second #nav ul li ul li { margin: 0 0 5px 15px; }
.skip { display:none; }
/* end #nav */

#content p, #nav p {
padding: 0;
margin-top: 0;
margin-bottom: 10px;
line-height: 140%;
}
#content li, #content ol {
margin-top: 0;
line-height: 140%;
}
code, pre { font-family:"Courier New", Courier, mono, monospace; }

/* definition lists, all that and a bag of chips! */
#content dl {
margin:0px;
padding:0;
}
#content dt { font-weight: bold; }
#content dd {
margin-top: 0;
margin-right: 0;
margin-bottom: 10px;
margin-left: 0;
padding: 0 5px 0 0;
}
/* end definition list*/

Any help is appreciated.

Which is better to use id (#) in CSS or to use class (.) ??

does it affect website rank?

When defining css in a webpage, it can be done using either a class or id. My understanding is that css uses . notation with classes and # notation with id's, regardless of whether the actual css is in the webpage itself of linked externally. Please correct me in error. My css uses classes and external . notation. When I use id's only and # notation exernally, I lose all my styling. Its only when I use the # notation internally that the styling works. In order to use external css I need to declare both a class and id and dot notation. Internally only an id. Is this correct behaviour?

In CSS, which would be more appropriate (or I suppose semantically correct) to use, p.text or .text p ? P representing the <p> tag, and "text" representing the class "text".

Any info or links to pages with info on this matter would be greatly appreciated!

I am new to CSS and confused about when to use id # and when to use class .

Some enlightenment on the benefits/purpose of each would be helpful. I have read several tutorials - but the same pretty much the same to me so I must be missing something

Thanks!

So I want to create a really simple css file that uses a lot of the same styles. For example I may create a box that takes up two fifths of the page, and is floated left or right, similarly I may have a box that takes up three fifths, or four fifths etc.

The main thing here is that I'm thinking the specifics will be placed inside an ID like so:

Code:

#twoFifths {width:275px; padding: 0px 12px 0px 50px;}
#threeFifths {width:375px; padding: 0px 50px 0px 12px;}

And then to handle the float I'd use a class like so:
Code:

.floatRight{float:right;}
.floatLeft{float:left;}

Is this considered good practice? Obviously as I generate layouts I may want to float either right or left so having an ID for every single thing I may want to use would be a little overwhelming. The problem with this of course is that I can't call an ID twice in a page, and I can't have more than one class... so for example:

Code:

	<div id="templateBlueBox" class="floatRight">
		<h2>Six free lessons</h2>
		<p>These free Lessons are great to read online or print out and carry with you.</p>
					</div>
					
	<div id="templateGreenBox" class="floatRight">
		<h2>New Features</h2>
	        <p>Some fun, helpful study tools to help you get more out of every Lesson. Check them out!</p>
					</div>
				
	<div id="templateOrangeBox" class="floatRight">
		<h2>Sign up for email updates</h2>
		<p>So we can let you know when you can subscribe to get it every week.</p>
	</div>
					
	<div id="templatePinkBox" class="floatleft">
			<h2>Send us feedback</h2>
			<p>Is it the coolest thing ever (or is it just okay)? Tell us what you think!</p>
			</div>
					
	<div id="templateBlueBox" class="floatLeft">
		<h2>Submit photos</h2>
		<p>
		You can be part it..</p>
	</div>

So as you can see I'm having to repeat the id templateBlueBox. Is there a better approach for accomplishing this?

Problem solved.

i am working for a client that is strict on making sure that all code is up to standards.

the question i have is, how can i use the same class container twice in the same page and have everything up to standards?

the catch is the doctype has to be XHTML 1.0 Transitional and i can't have the same id twice on the page. i'd hate to make 2 classes for the same style.

any suggestions?

Code:

<ul id="headerfooter">
<li><a href="link1.html">header link 1</a></li>
<li><a href="link2.html">header link 2</a></li>
<li><a href="link3.html">header link 3</a></li>
</ul>

Code:

<ul id="headerfooter">
<li><a href="link1.html">footer link 1</a></li>
<li><a href="link2.html">footer link 2</a></li>
<li><a href="link3.html">footer link 3</a></li>
</ul>

I cant use this statement below to import a style sheet properly. What happens is that it works for all elements except for the class tag lbox.
Why does th class tag get ignored from importing in a file but works when in the file.
So the css code does work but not when i import a file which is in the current dir.

<link rel="stylesheet" type="text/css" href="mystyle.css"/> //ignores the class tag lbox.

The file is

<style type="text/css">

.lbox {
position:relative;
width:120px;
height:155px;
background: red;
z-index:2;
left: 10px;
border:2px solid black;
top: 15px;
margin-bottom:15px;
/*dont use padding or top because this fails to space eachbox*/
}

...
</style>


html
..
<div id="boxlayer1" >
<div id="boxlayer2" class="lbox">5eareresae56</div>
<div id="boxlayer3" class="lbox">reerertertert</div>
<div id="boxlayer4" class="lbox">retererertert</div>
</div>

Thanks for taking the time to read my question.

I can never seem to get this right....

I have this line that I want to affect:

Code:

<li><div class="VACont"><a href="">Edit User</a></div></li>

and I want to be able to edit it with

a:link {}
a:visited {}
a:hover {}
a:active {}

How do I refer to the link with out having to add a class to the <a> tag?

I've tried:
Code:

VACont.a:link {text-decoration: none;}
li.VACont a:link {text-decoration: none;}
a:link li.VACont {text-decoration: none;}

So far no luck.

Thanks,

Brad

Hi all

Another stupid annoyance relating Internet Explorer: it seems IE6 does not recognize the following CSS selector rule:

tag#id.class

e.g.

div#content.active

One has to split it into

div#content .active

Is that right? Do we just have to live with this?

Greetings,
Josh

Hi There,
I am working with an online educational system and working to style it accordingly. The system has "modules" that contain information of various types in their own distinct boxes. I would like to target each heading and style it individually ie different colours etc. I know this is probably a very basic problem and I'm relatively new to the process, but any help would be much appreciated.

Here is the html generated by the system for one of the boxes "module:_148_1"

...............Start HTML Snippet

<div class="portlet clearfix " id="module:_148_1">
<!-- extid:148: --> <h2 class=" ">
<span class="moduleTitle" >What's happening at Ivanhoe</span>
</h2>
<div class="edit_controls">
</div>
<div class="collapsible" style="overflow: auto;">

............................End HTML Snippet

My Current generalised styling on all boxes is achieved via the following css

#moduleTitle,
.portlet h2 {
color: #fff;
padding: 4px 52px 5px 6px;
background: #13770a;
background-image:url(images/headings_details.png);
background-repeat:no-repeat;
background-position:right top;
margin: 0;
font-size:110%;
font-weight:bold;
position:relative;
vertical-align:middle;
overflow:visible;
}

As an example, if I wanted to target this particular module with ID module:_148_1 and set the background colour to #a0012e how would I best achieve this?

Many thanks
Chris

Hi, I have apage where the div only works on the bottom on the page. I am trying to place it also in the center to divide content. Here is the CSS code:
Code:

.doubleLine{
    clear:both;
    position:relative;
	float:left;
	width:1172px;
	height:6px;
    background-image: url(images/common/double_line.gif);
	background-repeat: no-repeat;
    margin-left:37px;
    margin-right:0px;
    margin-top:6px;
    margin-bottom:6px;
    padding:6px 0px 6px 0px;
}

can anyone tell me why this div with an image won't appear between content? I havetried everything I could think of.

thanks