I'm having problems linking a second stylesheet to my HTML document, and cannot find the (hopefully painfully obvious) problem.
I'm linking stylesheets in the head thus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" href="assets/css/global.css" type="text/css" media="all" title="Global styles" charset="utf-8">
<link rel="stylesheet" href="assets/css/ie.css" type="text/css" media="all" title="IE Overrides" charset="utf-8">
The problem is, the seconds stylesheet has no effect what so ever. Reversing their order proves this as well.
For testing, I put in a rule in the second stylesheet to make the body background red, even tried adding !important, but to no avail.
/* Global CSS */
body {
background-color: #fff;
}
/* IE CSS */
body {
background-color: #f00 !important;
}
Firebug net panel shows that both stylesheets do load, and the style panel shows me the styles in both of them, but the rules in the latter just don't do squat.
This has left me baffled, since it is very, very basic stuff, which I've previously done successfully hundreds and hundreds of times.
Try removing the title attribute from both your link tags. title has a special meaning when used with stylesheet links, more here:
Alternative Style: Working With Alternate Style Sheets
In my case, I had moved working CSS rulesets from a PHP string in the page source to an external CSS file:
From:
$headCss.=
' <style type="text/css">
#containBrainForHire
{ background:url(\'/graphics/BrainForHire.png\');
display:table;
height:300px;
margin:0 auto;
width:525px;
}
</style>
';
To:
#containBrainForHire
{ background:url(\'/graphics/BrainForHire.png\');
display:table;
height:300px;
margin:0 auto;
width:525px;
}
NOTHING in the new CSS file worked until I fixed the background definition: The backslashes needed to escape the single quotes in the PHP string are invalid in the CSS file.
Corrected CSS file contents:
#containBrainForHire
{ background:url('/graphics/BrainForHire.png');
display:table;
height:300px;
margin:0 auto;
width:525px;
}
There were no errors reported in the error console, just nothing in the new CSS file had any effect on the page's display. (So much for useful debugging tools...)
I hope this saves someone else the time that it took me to recognize the problem.
Related
How do i enable one stylesheet while keeping the code for the other one disabled?
EDIT: form comment on the question: how to keep a reference to a style sheet but disabled:
There is no CSS way to disable a selector other than commenting it out (or editing to match no elements).
But a <link> element can be commented out in HTML:
<!-- <link rel="stylesheet" href="/styling/somestyles.css"> -->
and the browser ignores the content of comments (with a few notable legacy exceptions).
Original Answer
An HTML document can include as many (or as few, including zero) stylesheets as it likes.
It does not matter if these are links to external stylesheets:
<link rel="stylesheet" href="/styling/somestyles.css">
<link rel="stylesheet" href="/styling/morestyles.css">
or <style> blocks embedded in the HTML
<style type="text/css">
h2 {
color: green;
}
</style>
<style type="text/css">
h2.important {
color: hotpink;
}
</style>
HTML and CSS noob running into my first problem.
I am using Notepad++ and I have my css and HTML files both saved in the same folder. But whenever I launch the HTML file in a browser the css ID that I am using is not doing anything specifically centering and changing color.
This seems like one of those easy fix kind of things.
Main.css
<style>
#change{color:red; text-align:center }
</style>
example.html
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<Title>sample</title>
<link rel="stylesheet" href="folder/main.css" />
</head>
<body>
<p id="change">Sample sample sample </p> //HERE IS WHERE THE ID IS
</body>
</html>
anyone have an idea what im doing wrong
To combine the two current answers:
If the directory structure of your website is simply the index.html and main.css in the same folder, than the path to link the two is:
<link rel="stylesheet" type="text/css" href"main.css"/>
The Style tags in your current css page are redundant and unnecessary. Style tags could be used in the html, though are rarely used.
Finally, not sure if this is just the code you have posted, but the html here is acting as if it is all a comment,and make sure to delete that if that is in your current code (/*).
Remove the <style> and </style> tags. Your main.css file should only contain CSS:
#change{ color:red; text-align:center }
check css path.
Are paths like below?
- example.html
- folder/
|- main.css
remove tag in main.css
In css files, any html tag MUST NOT be existed.
and welcome to the world of web designing! Things can get quite frustrating, but as long as you show your will to solve a problem, everything will go smoothly. I love the fact that you tried to solve the problem prior to posting. Even though it is a basic thing, let's go step by step:
main.css does NOT need <style> tags. Those are only required when editing CSS internally, inside of <head> element of HTML page. In *.css files, you just start defining CSS rules.
make sure that you follow proper spacing like #change { color: red; text-align: center; } (ALWAYS FINISH A CSS RULE WITH A SEMI-COLON)
you can also break them down like this:
#change {
color: red;
text-align: center;
}
Characters /* and */ are CSS comments syntax. ANYTHING between those characters shall be ignored by the browser.
<link rel="stylesheet" href="folder/main.css" /> might potentially be the cause of the problem, since you stated that html file and css file are in the same folder. If that is the case, you don't need "folder/main.css" but only href="main.css" /> Also it wouldn't hurt to add <link rel="stylesheet" type="text/css" href="main.css" /> to let the browser know the type of the file you're linking to.
Here is a working example.
#change {
color: red;
text-align: center;
}
<html lang="en">
<head>
<meta charset="utf-8">
<Title>sample</title>
<link rel="stylesheet" href="folder/main.css" />
</head>
<body>
<p id="change">Sample sample sample </p>
</body>
</html>
I have a jsp file that holds html elements, it has a table in it with a specific id. When I add the border: 1px; styling internally then it works, but when I want to use a css file that specifies styling, then it doesn't, there's no border at all as a result.
the relevant part of the jsp file:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Airline Database</title>
<link rel="stylesheet" type="text/css" href="styles/PassengerStyle.css"/>
</head>
<body>
<table id="main" width="1300px">
...
</table>
</body>
</html>
the PassengerStyle.css file:
#main {
border: 1px solid black;
}
the css file is in the styles folder that is in the same folder as the jsp file.
What did I miss?
It probably can't find the stylesheet, i.e. the url is wrong. Have you tried navigating to where the code in 'view source' thinks the file is located? That's probably different then where it is.
You can also try adding body { background-color: red; } to see if any styles from that stylesheet apply.
I would try to see if any other styles from the stylesheet apply (or do a test), if they do, then I would wonder is the table dynamically generated? If other styles do work, I would try giving the table to be styled a class in the tag versus using the id reference in the style sheet and see if that works. If nothing applies, probably a broken style sheet link.
I would also recommend putting the 'width=1300px' in the css style sheet along with the other css styles.
You can use Firebug or Chrome developer tools to see if your CSS is being overridden by different rule, and you can use the network tab of those tools to see if there were any errors loading the external stylesheet.
Adding !important to your css style can help in debugging, although I don't recommend it for production use.
Also try clearing your cache to see if a previous version of the stylesheet is being used.
Try this:
#main {
border: 1px solid black !important;
}
In the head of the document:
<link type="text/css" rel="stylesheet" href="css/resources/css/lessons-matching-test.css"/>
In the body of the document
<div class="tests">
Link
</div>
In the linked css stylesheet I added this new style
.tests
{
background-color: blue;
/* some stuff */
}
Why isn't my style being applied when I add class=tests to my div?
When I create a new HTML-file and insert your code (without the external css and js files) I get the expectated result.
<!DOCTYPE html>
<html lang="en"><!-- Forgot the quotes -->
<head>
<meta class="metatype" content="matching-test">
<meta charset="UTF-8">
<style type="text/css">
.tests
{
background-color: blue;
/* some stuff */
}
</style>
</head>
<body>
<div class="tests">
Link
</div>
</body>
</html>
What happens when you exclude the js files and/or the css file?
Two cases
your lessons.js is doing something with .tests
<script type="text/javascript" src="js/resources/js/libs/lessons.js"></script>
Your css set .tests as important so that you cannot change
<link type="text/css" rel="stylesheet" href="css/resources/css/lessons-matching-test.css"/>
The problem is that your old styles are being used due to caching. Your new styles do not show up because the browser is using the old styles. There are a couple ways to go about fixing or changing this.
The technique for avoiding that is called "cache busting". When a server side handler is involved this can be handled in a higher language. But if there is no access to one, then usually version names are used.
lessons-matching-test-v1.css
Naming your css file this way every time you make a change will allow that new version to be used and cached. Ever version, you would increment the number, so version 2 would be lessons-matching-test-v2.css.
Another approach is to attach a query string to the path every time you make a new version
href="css/resources/css/lessons-matching-test.css?v=1.0"
and then every time you make a new version, change the query string, so version 2 would be href="css/resources/css/lessons-matching-test.css?v=2.0"
I have a small CSS file with contents:
<style type="text/css">
li {
padding: 10px;
font-family: Arial;
}
</style>
Supposed to leave some space between list elements and change the font. Now, If I include this CSS file in the HTML like below:
<link rel="stylesheet" href="./css/lists.css" type="text/css" />
it does not work :(.
However, if I include the actual CSS code inside the html "head" block, it works.
I really prefer sourcing CSS (so different files can share the code). Any idea whats wrong and how to fix?
regards,
JP
You are supposed to omit the
<style type="text/css">
and
</style>
tags from your .css files, as those are tags used only in HTML to denote CSS styles if you're including them in your page <head>. If you include them, the browser will attempt to treat them as CSS code, which it isn't, and that causes your stylesheet to not work.
You shouldn't use script tag in your css files. Just li {..} is enough.
Also, checking path (./css/lists.css) might help. If it has mistake, nothing will be included.