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

    CSS shorthand help

    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!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 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 -
    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>
    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 the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    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.
    Code:
    #col_02 .feature_body p.author_desc i {
    font-style:normal;
    }
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    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
    •