What could be the reason behind CSS internal style not working while inline style is functioning properly?

Here is the code I am currently working with. It seems that there may be an issue, but I'm not sure what it could be. The first part contains internal CSS and below is inline CSS which appears to be functioning properly. My suspicion is that the image itself might be causing the problem, as inline CSS works fine with other images except for one (Capture.png).

<!DOCTYPE html>
<html>
<style>  <!-- This is where I have added the internal CSS -->
body{
padding: 0px;
margin: 0px;
}

.cap{                    <!-- This is the class designated for the image -->
   position: absolute; 
   height:100px; 
   width:200px;
   left:150px; 
}
</style>

<body>
<div class="cap"><img src="Capture.png"/></div>      
</body>
</html>


However, this second piece of code works!

<div class="cap"><img src="Capture.png" style="position: absolute; 
   height:100px; 
   width:200px;
   left:150px;"/></div>

Answer №1

This particular coding example functions properly due to the direct application of the style attribute to the image itself.

<div class="cap"><img src="Capture.png" style=" position: absolute; 
   height:100px; 
   width:200px;
   left:150px;"/>
</div>

It's important to note that the .cap class pertains to the div element housing the image, not the image directly. If the CSS is intended for the image, it should be applied as demonstrated below:

<div class="cap"><img src="Capture.png"/></div>

The code snippet below demonstrates how to target the image specifically for styling purposes:

<style>
.cap img {              <!-- Observe the change from ".cap" to ".cap img" in the selector -->
       position: absolute; 
       height:100px; 
       width:200px;
       left:150px;
}
</style>

I trust this addresses your query adequately. I recommend delving deeper into CSS Selectors to enhance your comprehension of their functionality. Happy coding!

Answer №2

If you're having trouble selecting the image with CSS, it may be because .cap is the div containing the image. To style the image itself, you'll need to target it specifically by applying a class to the image or using a selector like .cap img... within the containing div. It's generally recommended to apply styling through CSS rather than inline styles.

The reason the inline styling worked is because it was directly applied to the image element.

To replicate the inline styling using external CSS, add the following code targeting the img within .cap:

.cap img{
   position: absolute; 
   height:100px; 
   width:200px;
   left:150px; 
}

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

Retrieve the identifier of the higher-order block when it is clicked

When I have a parent block with a nested child block inside of it, I expect to retrieve the id of the parent when clicked. However, the event target seems to be the child element instead. Is there a way for JavaScript to recognize the parent as the event ...

Execute a task on Mobile Safari (after a delay)

I'm currently experimenting with HTML5 on Mobile Safari for iOS 6 and I'm curious about executing JavaScript code after a certain amount of time has elapsed. One specific task I am interested in is redirecting to a different page after 60 seconds ...

Is it possible to save an entire webpage that infinitely scrolls without actually manually scrolling through it?

I'm dealing with a webpage that has infinite downward scrolling. I tried automating the scrolling, but eventually the page became too large to continue scrolling. To fix this, I manually removed some DIV blocks from the source code which decreased the ...

react-basic-photo-carousel: adjust size and dimensions

As a newcomer to React JS, I decided to use react-simple-image-slider for my image slider component. However, I am facing an issue with making the images responsive on mobile devices. I tried setting the width and height using vw, vh or percentage units, ...

Tips for retrieving data from a database with just one key press

There is a text field that triggers a JavaScript function when a key is pressed. <input type="text" class="text" id="txt_sh_vid" onKeyPress="vhc_record()" maxlength="4"> The function takes the input from the text field and searches for a result in t ...

Creating dynamic SVG animations through CSS instead of relying on the <animateMotion> tag offer greater flexibility and control

I am attempting to position an arrow at the midpoint of a bezier curve. The method outlined in this StackOverflow question, which involves using <animateMotion> to move a <path> representing the arrow and freezing it at the center of the curve, ...

Can you show me how to recreate a 502 gateway timeout error?

Looking for suggestions on how to create a page that exceeds 600 seconds to load? Any tips on triggering a 502 gateway timeout error would be helpful as well. ...

Using Tailwind CSS to center a NexJS <Image /> component within a modal

In an effort to style my MapBoxGL popup content, I am working on aligning the text above the image to the left and centering the image below within the popup. As shown in the image below, this is currently proving to be a challenge as I transition from usi ...

The issue of CSS3 Grid-gap not functioning properly on iPhone devices

I've been working on creating a CSS template and everything seems to be functioning correctly, except for the grid gap which doesn't seem to work properly on my iPhone. Here's the code I have so far: <div class="grid"> <h1 ...

Can someone guide me on how to utilize the onkeyup event within a bootstrap select element?

This code uses Bootstrap to filter elements, but I want to implement an onkeyup event to trigger a function. Whenever I type in the search input, I want it to automatically call myFunction(). <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/ ...

Begin the animation again by hitting the start button, using the burst-engine and canvas

I have successfully created a simple animation using Burst Engine and HTML5. My goal is to make the start button trigger the animation to restart if pressed twice. Currently, when I press it, the animation just starts and nothing else happens. I suspect t ...

I am having trouble getting bootstrap-icons to work in my Angular project and I'm eager to figure it out

I am having trouble incorporating bootstrap-icons into my angular project. Despite running the npm i bootstrap-icons command, I am unable to successfully add icons using icon fonts on my webpage. As a temporary solution, I have added the bootstrap icon CD ...

What is the reasoning behind having blank space between the buttons?

Can anyone help me understand why there is visible space between the buttons in the code example provided below? Despite removing margins and paddings, the whitespace persists. <body> <div class="button-container"> <button>1& ...

Is there a way to have the information on the table automatically update based on the selection made in a drop-down menu?

When a user is selected from the combo box, I want the table displaying user data from the database to only show information related to the selected user. I attempted to use an array to store values but was unable to make it work. A Combo Box that allows ...

CSS: text positioning issue observed in Mozilla browser

I am facing an issue with the text position inside the box/button element on my website. The text appears correctly in Chrome, but in Firefox, it is positioned above the box, making it difficult to read. Can someone assist me with fixing the CSS or identi ...

Getting rid of background color in a tooltip using Material UI

I'm currently tackling an issue with Material UI's tooltip. I can't seem to find a way to make the background of the tooltip completely transparent. By default, it displays with a grey background and white text. Changing the background color ...

What is the best way to automatically hide the Materialize CSS mobile navbar?

Recently, I completed a website called Link. Using only Materialize CSS, Vanilla JS, and plain CSS, I developed a single-page application that effectively hides and reveals different sections based on event listeners. Everything functions smoothly except ...

Discovering the art of line breaks

Imagine I have a random block of text displayed in a single line, like this: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Due to various reasons such as width settings or text-zoom, the text may display as two or more lines on the viewer&apos ...

Looking to implement a scroll bar in your PhoneGap mobile app for Android?

Encountering an issue with my Android PhoneGap mobile website application. I have implemented a scroll bar in the application which works perfectly on PC. However, when testing on an Android device (mobile phone), the scroll bar does not enable. ...

Investigating the Hierarchy of CSS Selectors

I've been pondering this question: What exactly is the functional distinction between these two code snippets, if any? I'm not certain how the use of a comma impacts statements. Does the #page > have an influence on the link in the first examp ...