What causes the inline style of the 'img' element in the stylesheet to take precedence over the inline style applied directly to <img> tags?

Having an issue with my code snippet below. The internal stylesheet's element styles (img {height: !important;}) are overriding the inline style on the img tag (style="height:200px;). What could be causing this?

Wondering if there might be a misunderstanding in CSS order or processing, or if something else is missing.

Code Sample

img { height:auto !important }
<img src="https://placehold.it/200x200" width="200" height="200" align="left" border="0">
<img src="http://placehold.it/1x1" height="200" width="9" alt="" align="left" border="0" style="height: 200px;">
<p>Lorem Ipsum cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras tortor turpis, iaculis eu convallis a, pellentesque vitae enim. Fusce commodo vehicula nulla, sit amet congue lacus adipiscing a. Vivamus at convallis nibh. Proin felis turpis, aliquet eu arcu aliquam, accumsan consectetur justo. Vestibulum sit amet arcu quis neque gravida vulputate ut quis sem. Curabitur a metus lacus. Mauris non dolor vitae massa viverra lobortis ut convallis diam. Fusce eu tempor dolor, vitae imperdiet ipsum.</p>

Other notes

Understand that adding !important to the img may solve the issue, but why should it be necessary? Acknowledging that this is not an ideal solution and align is deprecated. Yet, as it's for an HTML email format, compromises have to be made.

csscss-selectorscss-specificity

Answer №1

Regardless of selector specificity and !important rules, inline style declarations always take precedence over any author declarations:

  1. Inline style declarations with !important
  2. Author stylesheet declarations with !important
  3. Inline style declarations
  4. Author stylesheet declarations
  5. User Agent styles

Even if the selector for an element with an inline style attribute includes a [style] attribute selector.

For example, a height: auto !important will override a height: 200px inline style rule. Without the !important declaration, the inline style would be prioritized.

For more information, refer to: Relationship between !important and CSS specificity

Answer №2

When it comes to styling elements, the use of !important declarations can override inline styles. For example, in this scenario, the !important declaration for the height of an image would take precedence over any inline style specifying the height of that same image.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to obtain the width of images on Chrome browser

I've been developing a basic slider that moves images from right to left. It's functioning properly on Firefox, but I'm encountering an issue with Chrome when trying to obtain the width of the images. $(window).load(function() { // Loa ...

javascriptjqueryhtmlcssgoogle-chrome

Ways to shift footer lower if there is a floating element in the div above it

Trying to move my footer to the bottom of the page, regardless of the amount of content above it. After researching online, I came across a solution on this website: However, everything was fine until I added "float: left" to the content div. Suddenly, th ...

css

Fixing alignment and responsiveness problems with a hovering circle div

I have 3 circular divs that resize slightly when you hover over them, but this resizing also occurs if you hover near them. Additionally, I want them to be centered with some responsive spacing. Here is a live demo: demo Below is my code: <div id ...

htmlcssresponsive-design

Ensure that the body background image remains stretched and perfectly centered regardless of the screen resolution

I am having an issue with vertical centering on a website I created. Everything looks fine on my monitor, but at higher resolutions, the tables don't align in the center and the image shrinks. How can I ensure that everything stays aligned properly? ...

htmlcss

Using CSS to create a strikethrough effect on prices with spacing

I have a woocommerce setup and I want to showcase the original prices by striking them out like a price tag when products are on sale. However, there seems to be an issue with the space that woocommerce automatically adds between the currency and the pric ...

csswoocommercetext-decorationsstrikethrough

Ways to conceal the picture

Check out the JSfiddle link here for the full code. I'm having trouble with my slider as the last picture keeps collapsing underneath and is not hidden as it should be. I suspect this issue is causing the slider to malfunction. HTML <div class=" ...

javascriptjqueryhtmlcss

Can a child element be shown even when the parent element is hidden?

Is it possible to have a hidden parent and a visible child using CSS or jQuery? I'm attempting to make a child element visible on certain pages even if the parent is hidden. var bodyClass = jQuery('body').attr('class'); //ale ...

jquerycss

Tips for personalizing tooltips in Bootstrap 4

Currently, I am utilizing Bootstrap '4.0.0-alpha.6' and attempting to customize the tooltip styles. Despite adding a custom CSS class along with using Bootstrap 4, the tooltip is not responding correctly to my specified style when hovering over. ...

csshtmltwitter-bootstrap

How to center a Bootstrap 4 navbar with brand and links in the middle

I'm facing some difficulty in centering the navigation bar of my website, including the brand and the links. Since I am more focused on backend development, I'm struggling with the frontend aspect of this. Code <script src="https://ajax.go ...

htmlcssbootstrap-4

Children divs unexpectedly showing up outside of their parent divs

I have reviewed similar questions on this matter, but none of them seem to provide a solution for the issue I am facing. Currently, my goal is to display a stylized list, but I am encountering more difficulties than expected. You can find a fiddle linked ...

csshtml

Make a CSS div that expands based on the size of its absolutely positioned content

I'm currently experiencing some challenges trying to make a parent div expand to fit its contents which are positioned absolutely. The footer is reaching the bottom of the screen, but not the bottom of the document. This issue is clearly caused by th ...

javascriptjqueryhtmlcss

Tips for creating a left-floating element with a horizontal scrolling area

I am trying to make this outer <div> scroll only in the x-axis, but it doesn't seem to be working properly. .wrapper { width: 98%; height: 320px; padding-left:1%; padding-right:1%; white-space: nowrap; overflow-y: hidden; over ...

htmlcss

Creating a jQuery fade in effect for my custom lightbox design

I'm having trouble figuring out how to solve this issue. I have an image that functions as a thumbnail, and when clicked on, a larger version pops up. The setup works perfectly for me, but I would like to add a fade-in effect when the image is clicked ...

javascriptjquerycssfadeineffect

Puzzling blank area found beneath the form component

There seems to be some extra space at the bottom of a form when it's placed inside a div. How can we remove that unwanted space? In examples from stack overflow, the extra space is not visible in the code snippets provided. However, it appears elsewh ...

htmlcssformsspacing

Bootstrap does not show submenus on its navigation menus

I am currently designing a menu with Bootstrap, but for some reason, the submenu items are not showing up. https://i.stack.imgur.com/qZqyf.png After carefully reviewing the HTML code multiple times, I am unable to identify any issues. I am now questionin ...

javascripthtmlcsstwitter-bootstrap

Using the CSS property `absolute` can result in the input element shifting when entering text in Chrome

My grid layout is causing some issues with the search box placement. Whenever a user starts typing in the input box, it jumps to the other side of the page. After investigating, I realized that the culprit is the position: absolute property. Oddly enough, ...

htmlcss

Using CSS3 to apply transformations to multiple divs based on their individual attributes

I am currently developing JavaScript code that will enable the use of HTML like the example below: <div class="box" data-vert-speed="7">ContentDiv1</div> <div class="box" data-hori-speed="10">ContentDiv2</div> <di ...

javascripthtmlcssscrolltransform

Guide to customizing action button color on MatSnackbar?

Currently, I am encountering an issue with the snackbar in my Angular 9 project. Despite adding CSS styles to both the component.scss file and the global style.scss file, the action button on the snackbar displays the same background and text color. In an ...

htmlcssangulartypesangular-material

Tips for applying the same style to multiple classes:

I have experience with applying the same styling to multiple classes by using a comma between the class names. However, I am unsure about the following code: .navbar-inverse .navbar-toggle { background-color: #333; } ...

htmlcssbootstrap-4

Creating a div background that is transparent within a Bootstrap modal

Here is the HTML (Bootstrap) code I have: <div modal="showModal" close="cancel()"> <div class="modal-header text-center"> <h2>Members who shortlisted you </h2> </div> <div class="modal-body"> ...

javascriptjqueryhtmlcsstwitter-bootstrap