I have a very stupid question.
If I write a website layout in a css file and other stuff in a html file. How can I open the html but with the css layout in it?
Thanks!
You are looking for the <link ... /> element.
Read about it here:
http://www.w3.org/TR/html401/struct/links.html#h-12.3
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link
http://www.w3schools.com/tags/tag_link.asp
Linking your stylesheet works by putting
<link rel="stylesheet" type="text/css" href="yourcssfile.css" />
into the <head>-section of your HTML document.
Put <link rel="stylesheet" type="text/css" href="./yourstyle.css" /> in your <head>.
Related
I have folders laid out like this
website main folder
css
style.css
html
index.html
I was wondering how to do a <link> tag to go to the CSS folder from index and link to style.css If you have a solution for this, please let me know.
thanks.
for this, you can use the HTML link tag,
<link rel="stylesheet" href="../css/style.css">
sample :
enter image description here
You could try
<link rel="stylesheet" href="css/style.css">
or post you html code.
You can use this link tag in head tag.
<link rel="stylesheet" href="./../css/style.css">
Use this code in HTML file
<head>
<link rel="stylesheet" href="style.css">
</head>
<link rel = "stylesheet" href = "../CSS/style.css>
this seems to work, it is just my IDE that docent accept this, but when I load it in my browser it is fine, thanks so much!
I created the CSS folder and named it. I added this to my header in HTML but the changes aren’t happening.
<link rel="stylesheet" type="text/css" href="haiku-styles-shaun.css" />
You mentioned you've created a CSS folder. Then include that folder name in the href
<link rel="stylesheet" type="text/css" href="CSS_FOLDER_NAME/haiku-styles-shaun.css" />
Probably your CSS file isn't in the same directory as your HTML file, you provided the wrong name of your CSS file (also check that your CSS file's extension is .css). Solve these and try again.
You have to include each file you need separately.
e.g.:
<link rel="stylesheet" type="text/css" href="haiku-styles-shaun.css/myButton.css" />
<link rel="stylesheet" type="text/css" href="haiku-styles-shaun.css/myPhoto.css" />
<link rel="stylesheet" type="text/css" href="haiku-styles-shaun.css/myFooter.css" />
Most user don't need all their style definition at the same time. To save bandwidth you have to choose.
You said that you created a folder but you didn't write it on the path. Try adding the css folder before the file name like this:
<link ref="stylesheet" type="text/css" href="folder/file.css" />
Furthermore I suggest you to include versioning in your css to avoid browser caching when you refresh. To do that every time you update your css change the number at the end in the link:
<link ref="stylesheet" type="text/css" href="folder/file.css?v=1" />
The <link> tag is used to link to external style sheets. You have to use something like this :
<link rel="stylesheet" type="text/css" href="Folder-Name/Stylesheet-Name.css">
Make sure that your href address is setup properly otherwise it won't load in your HTML page .
Note: The element is an empty element, it contains attributes only.
Note: This element goes only in the head section, but it can appear any number of times.
In HTML the <link> tag has no end tag. In XHTML the tag
must be properly closed.
I have something like this in the body of my Html page.
<link rel="stylesheet" type="text/css" href="/untitled2.css">
I'm pretty sure this correct, but it's not working. What is wrong here?
You add your style sheets to the header such as
<head>
<!-- everything else -->
<link href="css/main.css"type="text/css" rel="stylesheet">
</head>
If you want to add it to the body you can style each element by using the style attribute such as ...
<body style="color:black;"></body>
or on each element itself
The answer is right inside the page you are looking at, try to figure out yourself as much as possible before asking the question here.
<link rel="stylesheet" type="text/css" href="//cdn.sstatic.net/stackoverflow/all.css?v=7bbb71ecd5eb">
( from StackOverflow's page source )
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.
<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!