<head>
<title>Water Bureau</title>
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="stylesheet" href="/css/main.css" type="text/css" media="screen" title="Main CSS">
<link rel="stylesheet" href="custom.css" type="text/css" media="screen" title="Custom Styles">
<script language="JavaScript" src="/shared/js/createWin.js" type="text/javascript"></script>
</head>
Thats the code, but the "custom.css" isn't working. It doesn't work at all. If we add a #import into main.css OR into the header instead of a it works fine though. Any ideas? We also got rid of the media="screens" on both as well.
The CSS inside of it is working fine, it's just when we stack those two, the first one parsed is the only one read by the browser. So if we swap main below custom, custom than works but NONE of main works. and custom just has snippet of CSS, and doesn't override all the CSS in main, just 1 element.
I can't figure it out! We have other ed stylesheets in the head (which we took out for trying to fix this) and they worked fine...
Like hsource said, try validating both css files.
http://jigsaw.w3.org/css-validator/
Also just try this, without that title thing with both css files in same folder, both relative to the page which is importing them:
<link rel="stylesheet" type="text/css" href="css/main.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/custom.css" media="screen" />
It also might be that because you are not using any doctype and also you are not closing your link tags, something related to that might be your problem. So try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/main.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/custom.css" media="screen" />
</head>
There's a two places that I think may be the problem:
The href for custom.css currently points to a location in the current directory of the HTML file. If custom.css is in the /css directory like main.css, you'd have to add that. The file is included when you use an#import tag because the #import is relative to main.css, and it can find custom.css in the same directory as main.css
There's an unclosed CSS tag or something that is breaking all the CSS coming after it; this is pretty unlikely, but you can verify your CSS with the W3.org CSS validator.
This might be due to the way CSS handles style precedence, but might as well be caused by bad markup. Try validating your document or using an absolute path for the custom.css stylesheet.
GaVra, you were right about the doctype, etc. We should have known that, given the HTML5 doctype was being used and probably isn't quite ready for action.
Thanks!
Related
I have a problem trying to add a favicon and stylesheet to my personal website i'm trying to build. This is what i have at the moment:
<!DOCTYPE html
PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head>
<title>Super Chilun's Portfolio</title>
<link rel="icon"
type="image/png"
href="myicon.png">
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
Hello World!
</body>
</html>
The favicon part loads fine, but I cannot load the external mystyle.css file (just a few lines for now)
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("mybackground.png");}
Any help is appreciated.
For html external style-sheets...if not, html5, type="text/css" is an important attribute to identify the content type.
try adding it and it should work, if not, check the path to the css file...
<link type="text/css" rel="stylesheet" href="src/style.css">
<!--__^^^^^^^^^^^^^^^__this part-->
Replaced the background image file - now working fine
I have a problem where my css does not affect my html. I made a fiddle here
It worked when I wasn't trying to connect an external stylesheet and used style tags,
Thanks in advance to anyone who can help.
btw i tried
<link rel="stylesheet" type="text/css" href="index.css">
and it did not work.
Make sure you are linking it in your 'head' section of the HTML such as this:
<head>
<link href="index.css" type="text/css" rel="stylesheet" />
</head>
Also be sure to close the tag and that the style sheet you are linking is named 'index.css'
Edit:
HTML is split up into two main section tags: body and head. In a normal HTML page, the structure is like so:
<html>
<head>
</head>
<body>
</body>
</html>
The code I referenced at the beginning of this answer should be placed into the head section of the HTML page.
The fact that you are linking to simply index.css worries me. Is index.css in your site root? If so, specify that:
<link rel="stylesheet" type="text/css" href="/index.css">
As stated also by BuddhistBeast, check to make sure it's in between the head tags:
<head>
<link href="index.css" type="text/css" rel="stylesheet" />
</head>
Also check that you are referencing it correctly. If it is all in one folder, then
<link href="index.css" type="text/css" rel="stylesheet" />
is correct.
If it's in its own folder, named "css" for example, it should be written as:
<link href="css/index.css" type="text/css" rel="stylesheet" />
You put #button instead of input, #button in the css.
I'm a new web design student and I just learned about Cascading Style sheets and how to link them externally; however, I'm encountering a problem. I have the file linked in my <head> with no problem and the file directory is correct, but my changes are not showing up. If I had a <style> tag or attribute then my CSS works, but not from the external file. Any help?
<!DOCTYPE html>
<html>
<head>
<title>Protein Structures</title>
<link href="styles/main.css">
</head>
I make this same mistake when I'm in a rush. The problem is, you're linking the file correctly, but the browser doesn't know how to interpret the file. Is it a stylesheet, icon, alternate stylesheet? You need to add the rel attribute and set it equal to stylesheet.
<link rel="stylesheet" type="text/css" href="styles/main.css">
I'm not sure if type="text/css" is still mandatory. I know that when doing Javascript you don't have to have type="text/javascript".
Here's a good link explaining why.
You need to add what the relationship of the link is. Change your <link> tag to:
<link href="styles/main.css" rel="stylesheet">
You might want to take a look at the documentation for link types to understand why the rel is necessary.
try this i hope this is working.
<link type="text/css" rel="stylesheet" href="styles/main.css" media="all">
Say I have an HTML page linking to an external stylesheet:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Whatever Title</title>
</head>
<body>
// body goes here
</body>
</html>
Now, say I want to add another stylesheet (or 2 or 3 or 500). The usual way to do this is to have more than 1 <link> tag:
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="new.css" />
<link rel="stylesheet" type="text/css" href="old.css" />
...
Or maybe #importing, but I've never really done that personally. However, is there a way to have more than 1 stylesheet for a single <link> tag, probably in the href part? Perhaps something like this?
<link rel="stylesheet" type="text/css" href="style.css; new.css; old.css" />
More generally, is there a way to do this with other attributes of other tags, like with <script> tags or <a> tags (that last one would be weird)?
By the way, in case you were wondering, the syntax I used was for HTML5, but I'm sure it would be the same with HTML 4.01.
No you cannot specify multiple locations in the href attribute. Per the spec, each <link> represents a document that is connected to your html. So by design it would be only one document.
http://www.w3.org/TR/html401/struct/links.html#h-12.3
Firefox can't detect my CSS file, but IE can. Does anyone know how I can fix this?
<!DOCTYPE html>
<html>
<head>
<title>Pathfinder Outage Page</title>
<meta charset=utf-8 />
<LINK REL=StyleSheet HREF="c:\documents and settings\Desktop\Outage_Page\swanstyle.css" TYPE="text/css">
</head>
Don't use an absolute, local path to your CSS. Just put in a relative one.
So if your CSS file resides in the same directory as the HTML file, just use:
<LINK REL=StyleSheet HREF=".\swanstyle.css" TYPE="text/css">
The location of a file on your disk is not an appropriate value for an href element. If you want to pull in a file from the disk (and, again, I think in most cases you don't want to) the proper syntax is
<link rel=StyleSheet href="file:///c:/documents%20and%20settings/Desktop/Outage_Page/swanstyle.css" type="text/css">
Try this:
<link rel="stylesheet" href="C:\Documents and Settings\Desktop\Outage_Page\swanstyle.css" type="text/css" media="screen" />
PS: use relative paths!
Don't use UPPERCASES, and use local links
<link rel="stylesheet" href="..\Outage_Page\swanstyle.css" TYPE="text/css">
Try including it like this:
<link href="file:///c:/documents and settings/Desktop/Outage_Page/swanstyle.css" rel="stylesheet" type="text/css" />