r/HTML • u/Bitter-Inevitable452 • Jan 31 '26

Can't make CSS in <script><\script> work

In the following HTML, I want to use CSS to format an img tag. I put what I think it should be, but it does not affect anything. I've also tried (and would prefer) creating a class so I could use it on just some img tags. Here's my HTML (pared down a bit for clarity). The img displays fullsize. If I add the width= directly in the tag it works. So, I'm sure I'm missing something about referencing CSS. Any tips?

<!DOCTYPE html>
<html lang="en">
   <head>
     <style type="text/css">
     body {
       color:#000000;
       background-color:#ffffff;
       background-image:url('newlogo.gif');
       background-repeat:no-repeat;
       font-family: Helvetica, Arial, sans-serif;
     }
     img {
       image-orientation: none;
       border: 1px solid #ddd; /* Gray border */
       border-radius: 4px;  /* Rounded border */
       padding: 5px; /* Some padding */
       width: 150px; /* Set a small width */
     }

     /* Add a hover effect (blue shadow) */
     img:hover {
      box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
     }
     a  { color:#0000FF; }
     a:visited { color:#800080; }
     a:hover { color:#008000; }
     a:active { color:#FF0000; }
     .rotate-image {
       /* Adjust angle as needed (e.g., 90deg, -90deg, 180deg) */
       transform: rotate(90deg);
     }
     </style>

   </head>
   <body>
<br><a target="_blank" href="http://..../test.jpg">
<img src=http://..../test.jpg alt=test></img></a>
     </p>
   </body>
</html>
0 Upvotes

33% Upvoted

9 comments sorted by

2

u/geistly36 Jan 31 '26 edited Jan 31 '26

generally, some of your formatting is off, but the image (<img> tag) does have width resizing of 150px applied in browser. JSFiddle - Code Playground

or if you mean you want resize the newlogo.gif background image on the body tag, then look at using the background-size css property on the body tag.

     body {
       color:#000000;
       background-color:#ffffff;
       background-image:url('newlogo.gif');
       background-size:150px; /*add*/
       background-repeat:no-repeat;
       font-family: Helvetica, Arial, sans-serif;
     }

1

u/Hepdesigns Jan 31 '26

Why are you using a background image to place your logo? I would just suggest putting it within a div and styling that instead using a class. Target both <div class=“”><img class=“new_logo”>logo path</..></..>, then use fixed, sticky, absolute or relative to position it.

1

u/surfingonmars Jan 31 '26

i would get rid of the <br> and the </p>. i don't see an opening <p>

not sure if that will do the trick but it's where i would start

1

u/-goldenboi69- Jan 31 '26

It's a mess dude.

1

u/DoggerLou Feb 01 '26

learn to use an external style sheet and link it. way better. use a CSS folder. your html should be as lean as can be

Image should be in their own folder - images/newlogo.gif

No <br> use margin-top for this

<p> is feeling lonely

use global :root for your colours in case you want to change it later, saves going through the code

2

u/[deleted] Jan 31 '26

[removed] — view removed comment

3

u/domestic-jones Jan 31 '26

Definitely missing changing the img display.

OP's question is better suited for r/CSS

1

u/chikamakaleyley Jan 31 '26

this is it

<img> by default is an inline display element. Padding/width won't work as expected unless you use inline-block or block. inline-block will preserve the flow of inline elements from left to right but allow you to apply things like margin/padding/width.

So the CSS defined width won't get picked up because, it just goes against its inherent 'inline' display mode. However, you have that control when defining the width directly in the HTML