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.

This is some text

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  is in italic.
Since inline styles, like your text, override linked or attached CSS the only way to make that italicized text normal would be to remove the  from the markup.

Not even !important seems to be able to overrided inline styles. See !important here.
See an example -

Code:

<!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>
    <!--end container--></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 since its a bit more semantic.

Code:

#col_02 .feature_body p.author_desc i {
font-style:normal;
}