Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Thanked 0 Times in 0 Posts

    CSS shorthand help


    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!

  2. #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Thanked 1,874 Times in 1,858 Posts
    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.
    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">
    <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;
        <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.
        <!--end container--></div>
    Last edited by Excavator; 04-13-2011 at 12:26 AM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  3. #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    In a place far, far away...
    Thanked 1,043 Times in 1,019 Posts
    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 {


Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts