CSS shorthand help

dhl

04-12-2011, 11:00 PM

Hello,

I'm taking over management and development responsibilities from the developer who rebuilt our site. He did an awesome job and everything is well structured and clearly commented so I've had a pretty easy time getting around his code and making the tweaks I want.

I need to make a simple CSS tweak but I'm unfamiliar with shorthand and need some help.

The rule sets the style for paragraphs with the class "author_desc", i.e.

<p class="author_desc">This is some text</p>

This is the CSS rule for the "author_desc" class:

#col_02 .feature_body p.author_desc { color: #a7a7a7; font-size: 1.3em; text-indent: 0; font-family: Arial, Verdana, sans-serif; font-style: italic; margin: 20px 0 0 0; padding: 0;}

I need to add an additional rule that would render any italicized text in the paragraph as normal, i.e.

<p class="author_desc">This is my body text that is italicized, <i>but this is regular text</i>. Now we're back to italicized again.</p>

How would I write the needed CSS for this?

Thanks for your help!

Excavator

04-12-2011, 11:22 PM

Hello dhl,
The way it's coded now all p.author_desc text is italic. Remove the font-style: italic; from your CSS and then only the text inside <i></i> is in italic.
Since inline styles, like your <i>text</i>, override linked or attached CSS the only way to make that italicized text normal would be to remove the <i></i> from the markup.

Not even !important seems to be able to overrided inline styles. See !important here (http://webdesign.about.com/od/css/f/blcssfaqimportn.htm).
See an example - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
background: #FC6;
font: normal 1.3em Arial, Verdana, sans-serif;
}
#container {
width: 750px;
padding: 50px 25px 400px;
margin: 30px auto;
background: #999;
}
p.author_desc {
margin: 20px 0 0;
padding: 0;
color: #a7a7a7;
text-indent: 0;
font-style: normal !important;
}
</style>
</head>
<body>
<div id="container">
<p class="author_desc">
This is my body text that is italicized, <i>but this is regular text</i>. Now we're back to italicized again.
</p>
</div>
</body>
</html>

_Aerospace_Eng_

04-13-2011, 04:41 AM

I think he wanted it the other way around though.
Leave what you have and add this. I would probably go with a span in this case as opposed to an <i> since its a bit more semantic.
#col_02 .feature_body p.author_desc i {
font-style:normal;
}