Style declarations and class css. I need advice!

Posted on 2011-05-06
Last Modified: 2012-05-11

Hi all,

I am in a situation in which I HAVE to define an image align and some other style elements within the Image tag. However, these are just for the editor (FCKeditor 2.6x) The image also has a class declaration (class="WB_ImgLeft") which is defined in a css on the actual web page. I would much rather that the editor too would use this css however, it cannot.

What are the rules for having both style definitions within the tag and a class. Does one over-rule the other. If I have padding in the style definition in the tag and padding defined in the css do they get combined to an aggregate value or does the css take charge?

Example of code:
<img class="WB_ImgLeft" title="Family day out" border="2" alt="Family day out" align="left" style="padding-bottom: 5px; padding-left: 5px; padding-right: 5px; margin-right: 5px; padding-top: 5px" src="" />

Kind regards.

Abiel M de groot

Question by:Abiel de Groot
    LVL 14

    Assisted Solution

    by:Juan Ocasio
    I guess the curiousity is getting the best of me.  Why do you HAVE to have styles in the markup?  Is it just so you can see the page properly in the editor?  My advise would be to delete the styles in the markup once you have gotten everything correct and then transfer it into the class definition in the CSS.  But to your questions if you have padding-right in the markup and padding-left in the css, they would be combined.  If you had padding-right in the markup and css, the markup will take presidence as it is rendered after the css file is read.
    LVL 12

    Accepted Solution

    Generally speaking, the closer to the content a style is declared, the more priority that style has. Thus a style item within the <img> tag will override a style written in the <head> section which will override an external stylesheet.  There are exceptions, for example adding the tag !important grants a style higher order of precedence.  The full set of rules is discussed here:

    The important thing for your current situation is that the style code in the <img> tag is likely to have the highest precedence and it will override styles previously defined with which it conflicts.
    LVL 5

    Author Comment

    by:Abiel de Groot

    I understand your curiosity. can I refer you to my following question. Still waiting for an answer.


    many thanks all. i will leave this open a bit longer.
    LVL 5

    Author Closing Comment

    by:Abiel de Groot
    Many thanks guys

    Featured Post

    What Should I Do With This Threat Intelligence?

    Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

    Join & Write a Comment

    Suggested Solutions

    Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System ( introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
    Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL ( several years ago, it seemed like now was a good time to updat…
    In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
    The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

    733 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now