View Single Post
Old 02-26-2011, 07:47 AM   #95
DMSmillie
Enquiring Mind
DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'
 
DMSmillie's Avatar
 
Posts: 562
Karma: 42350
Join Date: Aug 2010
Location: London, UK
Device: Kindle 3 (WiFi)
There are several ways to apply multiple styles to a single element:

1. Enclose the element inside another element. It will inherit the style applied to the element that it's sitting inside, and then its own style will be applied over that.

Example CSS:
Code:
div {
margin-top: 1em;
margin-bottom: 1em;
}
p {
text-indent: 0.3em;
}
Example HTML:
Code:
<div>
<p>bla bla bla</p>
</div>
2. Give the element a class, and define a style for the element type as a whole, and another style for the class. The class style will be applied over the generic element style.

Example CSS:
Code:
p {
margin-top: 1em;
margin-bottom: 1em;
text-indent: 0.3em;
}
.noindent {
text-indent: 0;
}
Example HTML:
Code:
<p class="noindent">bla bla bla</p>
3. Give the element more than one class, and define styles for each of these classes. They'll be applied to the element, in the order listed from left to right, each one over-ruling the one(s) before where the same CSS property is defined in each style.

Example CSS:
Code:
.bodytext {
margin-top: 1em;
margin-bottom: 1em;
text-indent: 0.3em;
}
.noindent {
text-indent: 0;
}
Example HTML:
Code:
<p class="bodytext noindent">bla bla bla</p>
4. Use any combination of the above, bearing in mind that the order in which each style is applied (enclosing element style, generic "this element" style, specific "class" styles from left to right) will determine which format properties will cascade untouched and which will be replaced by a later, or more specific, style.
DMSmillie is offline   Reply With Quote