This line is missing a close parenthesis ) which is affecting your markup:
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.02, rgb(75,135,163)), color-stop(0.54, rgb(127,219,219))
Change it to this:
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.02, rgb(75,135,163)), color-stop(0.54, rgb(127,219,219)));
You should look into using W3C's HTML and CSS validation tools to catch problems like these. The HTML validator isn't great about catching bad CSS, so you can copy-paste your embedded CSS into the CSS validator.
Oh and might as well put a semi-colon at the end of that last background-image statement (I did it for you), since it'll save you grief if you add more lines in the future but forget to add the semi-colon to the previous line.
Answer from Anson on Stack OverflowVideos
LPChip suggested me to use the debugger/inspector of Firefox and there, the head is greyed out. On further investigation, I noticed it said "css was not loaded because its mime type "text/html" is not "text/css"
That made me check something...
I got the solution:
I had an apache mod_rewrite activated. While the path was correct, it seems that this mod_rewrite or the dedicated php for the redirection somehow told the browser that the file was html not css.
I had a similar issue. Was setting up a NGINX from scratch and all the styles for my project were not applied. But they existed and I did not had any other error.
I found out that I had to apply the correct mime types to all files served by NGINX. Before the fix it was text/plain and this did not worked.
I fixed it by adding those lines to NGINX configuration:
http {
# other config before ...
include /etc/nginx/mime.types;
default_type application/octet-stream;
# rest of config ...
}
I tried using bootstrap in my code for the first time and then after that my previous css work would not display. Now even though I’ve cut out the bootstrap and even tried making another simple bellow world page just to check , simple css like color won’t work. I’ve tried internal and inline Internal seems to be working for a complicated homepage but doesn’t for a simple hello world
EDIT- here’s my code And
This is it without bootstrap
<link rel="stylesheet" type="text/css" href="style.css"></link>
Only things to check for are that you add the closing tag and that the style.css file is in the same directory as your index.php.
Edit:
I just noticed that in your that you're missing the last set of quotation marks (") in the content attribute. Could that be affecting the rest of the page?
Also make sure you don't include the <style></style> tags in your external css file
You can't have spaces in a URL, try changing the space to its ASCII character: %20 so it would look like this:
<link rel="stylesheet" type="text/css" href="new%201.css">
Or what I would normally do is use proper file naming conventions, either camel case (every word [ besides the first one] starts with an upper case letter) or use underscores between the names.
I had the exact same problem a few days ago. (And I had no spaces in my file name..)
As soon as I outsourced my CSS code in an external file, the exact same problem came across.
For me the problem was in the encoding.
For those who have this problem too: Just switch the file encoding to UTF-8 . (I used Notepad++)
Maybe you have to add to your html file:
<meta charset="UTF-8">
And then it should finally work.
see more here: http://www.w3schools.com/html/html_charset.asp
The code below works because the style is being applied directly to the image.
<div class="cap"><img src="Capture.png" style=" position: absolute;
height:100px;
width:200px;
left:150px;"/>
</div>
Notice that the .cap class is for the div that contains the image, not the image itself. The image in the code below isn't working because the CSS you wrote is being applied to the div and not to the image.
<div class="cap"><img src="Capture.png"/></div>
The following piece of code selects the image. You're styles should be applied to the image using the code below.
<style>
.cap img { <!-- notice the change from ".cap" to ".cap img" -->
position: absolute;
height:100px;
width:200px;
left:150px;
}
</style>
I hope this answers your question. I recommend reading more into CSS Selectors to get a better understanding of how they work. Happy coding!
Your'e not selecting the image with the css because .cap is the div that houses the img - to apply the CSS to the image within that - you will need to target it. Either by applying a class to the image or targetting it within the containing div (using .cap img...). As a rule - it is always best to apply styling in the CSS rather than inline styling.
The reason the inline version worked is because that styling is applied directly to the image.
To use the inline style rule - add img to the .cap as shown below.
.cap img{
position: absolute;
height:100px;
width:200px;
left:150px;
}
Try it like this:
Copy <link rel="stylesheet" type="text/css" href="/stylesheet.css">
inside your subfolder pages.
In one of the comments you say "My style sheet is in the main folder along with homepage. Subfolders have files of each pages.".
So assuming the site's folder structure is like
Copy|- home.html
|- stylesheet.css
|- folder1
|------page1.html
|- folder2
|------page2.html
The link in home.html should be
Copy<link rel="stylesheet" type="text/css" href="stylesheet.css">
and the links in page1.html and page2.html should be
Copy<link rel="stylesheet" type="text/css" href="../stylesheet.css">
This just means "the CSS file is one folder above the curent one".
Internal (inline) CSS rules have a higher priority than external ones.
There are probably some rules that overriding your external CSS, while the internal gets the max priority and overrides them.
You can check which rule takes place with the "Inspect element" (On chrome - this tool also exist on Firefox, IE etc - just click F12 to open it). When you're inspecting an element you can see which rule is selected and where it appears in the code (file and line number) and also see the whole inheritance tree.
The order of the includes (link elements) plays a role in priorities.
Code lower in the includes or included files has a higher priority. Inline styles in turn have a higher priority than in CSS defined rules.
Then there's the !important keyword you can append to make something higher priority.
Priorities are as follows:
- Inline style with
!important - Stylesheet style with
!important - Inline style without
!important - Stylesheet style without
!important
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Practice Site</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="debug.css">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
</head>
<body>
<article>
<p class="debug-centre">ARTICLE</p>
</article>
<article>
<p class="debug-centre">ARTICLE</p>
</article>
<article>
<p class="debug-centre">ARTICLE</p>
</article>
</body>
</html>This is the HTML to my website titled index.html
article {
display: grid;
grid-template-columns: 1fr minmax(0, 8.5in) 1fr;
height: 100vh; /* temp fix */
padding: 0.5in 0;
}
article * {
grid-column: 2/3;
}And this is my external stylesheet style.css
Now, when I try to add padding to the <article> via my external CSS it does not work, even with the identical code. It only works if I copy paste it into the HTML file using <script>.
How can I fix this, and why does this happen?