[Last Call] Learn how to a build a cloud-first strategyRegister Now


Style declarations and class css. I need advice!

Posted on 2011-05-06
Medium Priority
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="http://jonbysoft.es/Local_IMG_Pallet/175001_02.jpg" />

Kind regards.

Abiel M de groot

Question by:Abiel de Groot
  • 2
LVL 15

Assisted Solution

by:Juan Ocasio
Juan Ocasio earned 1000 total points
ID: 35705651
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

Amick earned 1000 total points
ID: 35705703
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: http://www.w3.org/TR/CSS2/cascade.html.

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.

Author Comment

by:Abiel de Groot
ID: 35706241

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.

Author Closing Comment

by:Abiel de Groot
ID: 35791624
Many thanks guys

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses

830 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