Helpful Information

Category: CSS Help

css classes

hi,

Is it possible to declare a class and then apend another class to that class when needed??

eg.

.blue {
color: blue
}

.bold {
font-weight: bold
}

then use it like this:

<div class="bold">blue text</div>
<br>
<div class="blue.bold">blue and bold</div> <--- so the text here is bold and blue.

I know that is not the correct way of using it but how would I do this in CSS?

thanks
edwin

Never come across that way of using CSS. This probably doesn't help and is stating the obvious, but why can't you just declare a new class? Using your example:

.blue {
color: blue;
}

.bold {
font-weight: bold
}

.boldblue {
color: blue;
font-weight: bold;
}

Are your classes so detailed that you can't declare a new one?
:)

Inch

Originally posted by Inch
Never come across that way of using CSS. This probably doesn't help and is stating the obvious, but why can't you just declare a new class? Using your example:

.blue {
color: blue;
}

.bold {
font-weight: bold
}

.boldblue {
color: blue;
font-weight: bold;
}

Are your classes so detailed that you can't declare a new one?
:)

Inch

hmm..i guess.

what i'm trying to do is make a class called .indent and apply that whenever needed without making a whole new class called .body1text-indent.

and how would i use the those psuedo class features of CSS? i read through some examples but it hasn't sunk in yet..

thanks!
edwin

Edwin,
What you can do if you want to indent text is just put the style element inside the <div> tag, if you don't want to create a new class.

Example

.bold {
font-weight: bold;
}

Then in the body put:

<div class="bold" style="text-indent: 10px;">Hello World</div>

This is a way round your problem, but I still think the best way is as follows:

<head>
<style type="text/css">

.bold {
font-weight: bold;
}

.boldindent {
font-weight: bold;
text-indent: 10px;
}
</style>
</head>

<body>
<div class="bold">Hello World</div>
<div class="boldindent"> Hello World</div>

Hope this helps....
:)

Try this:

<html>
<head>
<style>
.bold { font-weight: bold }
.blue { color: blue }
</style>
</head>
<body>
<div class="blue bold">This is bolded blue text</div>
</body>
</html>

Works in IE6, not tested anywhere else.

:D

neocookie,

That method doesn't seem to work in Netscape, unfortunately. Works fine in IE though...

Inch:)

is it even possible to do what i want? or is CSS limited in some ways?

edwin

hi,

does anyone know what section 6.4.3 means in this css reference??

<url>http://www.w3.org/TR/REC-CSS2/cascade.html</url>