On my website*, I can't select a particular image (in order to style it to width: 180px). Note that it is currently the right size because I was forced to use inline style, but I want it be controlled with CSS. It is an img inside of a header parent, but: header > img doesn't select it. Neither does img#logo (an id I put on it). Weirdly, this works perfectly both when directly opening the site from my C: drive and while opening it using my ampps local host, also on my computer. The site is being hosted at SiteGround. I have to admit I've had some strange little issues with sites there before, maybe due to caching (although I thought I turned all that off). *can't post links, I guess? it's at bonafidebankruptcy . com
Can you post your HTML code here. Just the part you're trying to style. Also post your css code. But generally, it could happen if your css file is not being loaded properly. Try putting the css styles in the <style></style> tag in your HTML file and see if it works. If it does, then the problem is the way you added the external css file. If it doesn't, then you must be selecting the wrong element, so I'll have to see some code
You were right, when I put the <style> in the head, it worked. Here is the working code, including the bottom part of <head> that includes the new style. the <style> part is new but everything else is the same. I'll put the CSS beneath it, with the img part bolded. The weird thing is that it seems to be taking the rest of the css fine. Although... I have to admit, there have been tiny discrepancies here and there that I haven't hunted down yet. There tend to be minor differences between my local version and what shows up online. <style> header > img { width: 150px; } </style> </head> <body> <header id="top"> <img src="images/logo.png" id="logo"> <h1>Bona Fide <span class="contrast">Bankruptcy</span></h1> <nav class="grow"> <ul id="mainMenu"> <li><a href="tel:1-800-975-6441"> 1(800)975-6441</a></li> <li><a href="#icons">Services</a></li> <li><a href="#your-attorneys">Your Attorneys</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> </header> Code (markup): ******* CSS Code below /* RESET */ /* null margins and padding to give good cross-browser baseline */ html,body,address,blockquote,div, form,fieldset,caption, h1,h2,h3,h4,h5,h6, hr,ul,li,ol,ul,dl,dt,dd, table,tr,td,th,p,img { margin:0; padding:0; } img, fieldset { border:none; } * { box-sizing:border-box; } [USER=124521]@media[/USER] (max-width:450px) { /* Fix for pre "viewport <meta>" mobile browsers */ * { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } } html, body { height:100%; scroll-behavior:smooth; } /* END RESET */ /* START TYPOGRAPHY */ body, button, input, table, textarea, select, figcaption { font:normal 1em/1.5 "Roboto",arial,helvetica,sans-serif; color:#002e63; } h1 { font-family: "Roboto",arial,Helvetica,sans-serif; font-weight:bold; line-height:1.1em; } h2, h3 { font-family: "Roboto",arial,helvetica,sans-serif; font-weight:normal; line-height:1.1em; } span.contrast { color:royalblue; } span.contrast:hover { color:deepskyblue; } h2 + p { margin-top: 1em; } /* EFFECTS */ .grow { transition: all .5s ease-in-out; } .grow:hover { transform: scale(1.05); } /* HEADER SECTION */ header { display: flex; align-items: center; padding: 0; border: 1px solid gainsboro; margin: 5px; box-shadow: 0 2px 4px 0 rgba(0,0,0,.2); } header > img { width: 180px; } h1 { margin: 0 .25em; transform: skew(-5deg); font-size: 4em; } nav { /* padding-right: .7em; */ width: 65%; display: flex; justify-content: center; } nav>ul{ display: flex; list-style: none; box-shadow: 0 2px 4px 0 rgba(0,0,0,.2); } nav>ul>li { background-color: royalblue; color: white; padding: 2em; text-align: center; } nav>ul>li>a { text-decoration: none; color: white; } nav>ul>li:hover { color:white; background-color: deepskyblue; } nav>ul>li>a:hover { color: inherit; } /* nav>ul>li>a:visited { color:#002e63; } */ /* SPLASH SECTION */ .wrapper { display: grid; grid-gap: 10px; grid-template-columns: 1fr 1fr 1fr; background-color: #fff; color: #444; margin: 5px; } .box { border-radius: 5px; padding: 10px; } .a { grid-column: 1 / 3; grid-row: 1; display: flex; align-items: center; flex-direction: column; justify-content: center; } .b { grid-column: 3 ; grid-row: 1 / 3; } .c { grid-column: 1 ; grid-row: 2 ; display: flex; justify-content: center; align-items: center; } .d { grid-column: 2; grid-row: 2; display: flex; justify-content: center; align-items: center; } div > ul > li { text-align: left; padding: 1em; } div#how1 { padding:1em; margin:1em; } p + p { margin-top: 1em; } section#banner > div.column > figure { border-radius: 5px; position: relative; top: 25px; left: 20px; display: inline-block; } figure > img { border-radius: 5px; } img { max-width: 100%; height: auto; } figcaption { margin-top: 1em; text-align: center; } a#contact-button { font-family:"Roboto",arial,helvetica,sans-serif; text-transform: uppercase; text-align: center; font-weight:bolder; font-size: 1.3em; background-color: royalblue; color: white; border: 1px solid gainsboro; padding:.5em 1em; outline:none; text-decoration:none; /* border-radius:5px; */ display: inline-block; box-shadow: 0 2px 4px 0 rgba(0,0,0,.2); } a#contact-button:hover { background-color: deepskyblue; } /* ICON SECTION */ .icon-wrapper { display: grid; grid-gap: 10px; grid-template-columns: 24.5% 24.5% 24.5% 24.5%; background-color: #cdddee; color: #444; margin: 8em .5em 8em .5em; padding: 4em 0; } .icon-a { grid-area: 1 / 1 / 2 / 2; } .icon-b { grid-area: 1 / 2 / 2 / 3; } .icon-c { grid-area: 1 / 3 / 2 / 4; } .icon-d { grid-area: 1 / 4 / 2 / 5; } div.icon-box { padding:1em; text-align: center; border-radius: 5px; } .fas, .far { padding: .5em; } h3 + p { margin-top: 1em; } /* FIRM SECTION */ div#firm { margin: 5em 0; } .fa-calendar-times,div.wrapper>.box>.fa-building,.fa-car-side,.fa-heart { background-color:#cdddee; border-radius:50%; margin-bottom: .5em; } .how-a { grid-area: 1 / 2 / 2 / 3; display: flex; align-items: center; flex-direction: column; justify-content: center; } .how-b { grid-area: 2 / 2 / 3 / 3; display: flex; align-items: center; flex-direction: column; justify-content: center; } .how-c { grid-area: 2 / 3 / 3 / 4; display: flex; align-items: center; flex-direction: column; justify-content: center; } .how-d { grid-area: 1 / 1 / 3 / 2; padding: 2em; } .how-f { grid-area: 1 / 3 / 2 / 4; display: flex; align-items: center; flex-direction: column; justify-content: center; } /* COPY SECTION */ section#how-to-get-help { display:flex; align-items:center; padding:2em; margin: 8em 0; } .column { width:50%; } img#couple { max-width:80%; height:auto; border-radius:5px; } .column > h2 { margin:1em; } /* ATTORNEYS SECTION*/ section#your-attorneys { text-align:center; background-color:#cdddee; } section#your-attorneys > h2 { padding: 2em 0; } section#your-attorneys > p { padding: 2em 0; } .container { display:flex; justify-content:space-around; padding: 0 2em; } .container>.column { margin:2em; padding: 1em 2em; background-color:white; } .container>.column>img { width:80%; border-radius:5px; } /* CONTACT SECTION */ section#contact { display: flex; flex-direction: column; align-items: center; max-width: 100%; box-shadow: 0 2px 4px 0 rgba(0,0,0,.2); border: 1px solid gainsboro; } form { border-radius: 5px; padding: 30px; margin: ; text-align: left; } #contact>form>img { width: 180px; padding: 0; margin: 0; display: block; } form > h2 { padding: 1em 0; } div.submitsAndHiddens { padding: 0 0 1em 0; } div.submitsAndHiddens > button { border-radius:5px; border:none; padding: .5em 1em; font-family:"Roboto",arial,helvetica,sans-serif; box-shadow: 0 2px 4px 0 rgba(0,0,0,.2); } div.submitsAndHiddens > button:hover { background-color: deepskyblue; color: white; } input { /* width:500px; */ width: 100%; border:none; outline:none; background-color: rgb(239, 239, 239); border-top: 1px solid gainsboro; border-left: 1px solid gainsboro; } textarea { width: 100%; border:none; outline:none; background-color: rgb(239, 239, 239); } div.g-recaptcha { margin: 1em 0; } /* FOOTER */ footer { background-color:#cdddee; text-align:center; padding:.5em; } /* BACK TO TOP BUTTON */ #myBtn { font-family:"Roboto",arial,helvetica,sans-serif; font-weight:bold; display: none; /* Hidden by default */ position: fixed; /* Fixed/sticky position */ bottom: 20px; /* Place the button at the bottom of the page */ right: 30px; /* Place the button 30px from the right */ z-index: 99; /* Make sure it does not overlap */ border: none; outline: none; background-color:white;; color: #002e63; cursor: pointer; /* Add a mouse pointer on hover */ padding: .5em 1em; border-radius: 5px; box-shadow: 0 2px 4px 0 rgba(0,0,0,.2); } #myBtn:hover { background-color:deepskyblue; } [USER=124521]@media[/USER] screen and (max-width: 450px) { * { box-shadow: 0; } #myBtn { display: none; } header { flex-direction: column; margin: 0 auto; align-items: center; width: 100%; padding: 1em 0 0 0; border-top: 2em solid royalblue; } h1 { padding: 0 0 .25em 0; margin: 0 0 0 .4em; } nav { padding: 0; width: 100%; background-color: #cdddee; border-top: 2em solid royalblue; } ul { justify-content: center; } nav > ul > li { border: 1px solid royalblue; text-align: center; } div#firm { margin: 0; } .how-a {order: 1;} .how-b {order: 2;} .how-c {order: 3;} .how-d {order: 5;} .how-f {order: 4;} .box { padding: 20px; border: 1em solid royalblue; border-radius: 0; } section#how-to-get-help, .icon-wrapper, .wrapper, .container { display: flex; flex-direction: column; margin: 0; } section#how-to-get-help { padding: 0; } .column { width: 100%; } .container { align-items: center; } section#your-attorneys > h2 { padding: 1.5em 0 1em 0;; } section#your-attorneys > .container { padding: 0; } section#your-attorneys > .container > .column { margin: 0; } section#contact { display: flex; flex-direction: column; align-items: center; max-width: 100%; } img#couple, form, input, textarea { max-width: 100%; } footer { border-bottom: 2em solid royalblue; } } Code (markup):
It could be a browser cookie. Add something like ?version=0.1 at the end of your style.css like so: <link rel="stylesheet" href="style.css?version=0.1"> Save your index page with the new version. Now your .css file will load up like it's a new file. If you make another change(s) just change 0.1 to 0.2 and so on.
I created a codepen at https://codepen.io/itamer/pen/WNrPrOK With your css put into the actual css file, at the bottom so that we know the reset won't mess with it, it works just fine.
If it worked, and most part of your external css Worked, then you are loading the css file properly. The issue is most likely precedence. Meaning that a different rule might be overriding header > img. For example, on line 65, width is set to 180px. Try putting !important after your css rule. For example: header > img{ width: 150px !important; } Code (CSS): That should work if your issue is precedence. Don't forget to remove the <style></style> tags in your html so you won't get false result Also, to avoid the cache issue, if you use Chrome, you can also try this: Press Ctrl+Shift+J in Chrome Go to the Network Tab Click on "Disable Cache" This should prevent Chrome from Caching your files
Reporting back, I took out the <style> in the head to begin testing, and nothing happened (ie, it is now being correctly styled by the css). Could this be an issue with the host? It worked when I opened it in my browser from C:, while using my ampps server localhost, and in the codepen, but it _didn't_ work when uploaded to the server.
It _is_working, but it wasn't working before, even though everything else was the same. I'm wondering if there's something weird with the host, like caching or something.
This could be a hosting issue as well. To be sure, always write the IP address directly into the host file (C:\Windows\System32\drivers\etc\host ). For example (line in hosts): 104.73.74.43 site.com www.site.com Then you will see for sure whether the problem is in the browser cache or hosting.