I have an index.html and style.css. I currently use the inline css but I want to use a stylesheet. I have this code in my index.html just before my </head> tag.
<link rel="stylesheet" href="/style.css">
and then i have this in my style.css
body {
background-color: yellow;
}
note both of those files are located in public_html. But whenever I open the index.html the background stays white and does not change to yellow.
how can i link the style.css to index.html ?
You need to give your CSS at least a height and width.
Try adding:
height: 100%;
width: 100%;
If you're working locally, the /style.css reference will try to load the file from the root of your filesystem. Same thing applies if you're loading from a subfolder in a domain, it will try to look for the file at the root of the domain folder.
If you change it to <link rel="stylesheet" href="style.css"> (notice the missing slash) it will then try to find the style.css file in the folder relative to the index.html file, which is the same.
The background will then be yellow.
The main thing is you need to have relative file path to your stylesheet.In your case imagining you have style.css inside css folder you need to do
<link rel="stylesheet" href="style.css">
Remember / path is for absolute path of file. This means that it
represents your file path from the root directory. And without / the file path becomes relative
Since you said you were beginner this may be another issue. Maybe be you haven't specified where to apply your style
body{
background-color:yellow;
}
Try adding
height:1000px;
width:100%;
You cannot give percentage to body height because body has no parent.
And add
<link rel="stylesheet" href="style.css">
to <head> of html file.
If your html page has nothing in it (text or images) then it is difficult to see any bg color since it has no height/width, as mentioned above.
Insert some dummy text to see if this is the case.
If you only have one css file, it is not unusual to have it in the same folder as the index.html file, and in this case change the code to:
This may be the case since you indicate that both files are in the same root folder, so delete the "/" since that would mean the css is not being applied.
It is worth naming the stylesheet to something relevent to the site you are working on, such as catstyle.css or lollipopstyle.css so that, if you have many css files open in your text editor, you can clearly see which one is for which site.
I am assuming also that you have the skeletal structure of the html "bare bones" complete as shown here.
Make sure to put the link to the stylesheet inside the section, say, after the meta-charset line.
Related
I'm trying to import a ccs file in HTML. But, it doesn't seem to work.
<link rel="stylesheet" href="style/style.css">
This is my file structure:
If I use the script tag it works. I also tried to use style.css instead of style/style.css but still the same problem.
Any help is highly appreciated!
Assuming you're putting this in the head section it should work.
Try adding some obvious change to your css to see if it's linking for example:
body {
background-color: red;}
I don't see in your directory listing where your html files are. But if they're not in the directory above "style", then you'll want to change your link to:
<link rel="stylesheet" href="/style/style.css">
i.e. add a slash before "style", so that rather expecting the directory to sit within the current directory of the html, you'll point to the style directory as being at the top level of the site.
I have created a jsp file called top.jsp and a css file called top.css. My problem is that my top.jsp doesn't show the background color specified in top.css.
Code in top.css
#CHARSET "ISO-8859-1";
body {
background-color: blue;
}
Code in top.jsp
<link rel="stylesheet" type="text/css" href="css/top.css"/>
What do I need to do in order to make the background color blue?
Here is a picture of my file structure:
Your <link rel="stylesheet" type="text/css" href="css/top.css"/> statement is looking for a css folder inside the same folder as the top.jsp file. This means it's looking for your css in the wrong place: currently it's looking for -> /jsp/css/top.css
You actually want it to go up one level in the folder structure to be in the webapp folder and then into the css folder so you need to change your href to href="../css/top.css" (the .. takes you up to the webapp folder and out of the jsp folder).
I want to apply single font for each html pages through out my website.
So far I tried this:
* { font-family:Nyala; }
but this works for only one page.
You should include this CSS style to each html page you wish it to take affect in.
Each HTML page should include this:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
And the mystyle.css is:
* { font-family:Nyala; }
Note: see #Raptor comments in order to improve your code.
Move * { font-family:Nyala; } in to a external css file like style.css and call it to the head section of the all html file you want like below.
<link type="text/css" rel="stylesheet" href="style.css" />
Don't forget to give exact file path where you keep your .css file.
Add Below css
body{font-family:Nyala;}
To make a css global you can place it in one common css file and make it's reference on every page.
Another point is if you are using master page in your website then you can place the reference of that css file once in the master page and it will automatically inherited on every content page which have master page applied.
I have following scenario.
I have Created a Web folder on my desktop which contains the html file Test.html and another folder styles which contains the myStyle.css file.
I am trying to link .css file with my html using the following code but it is not working.
How can i do this ?
Here is my Code :
<head>
<link href="Web/styles/myStyle.css" rel="stylesheet" type="text/css">
</head>
Test.html is inside the Web folder, so you don't have to enter the Web folder when you look relative to the HTML document.
You are trying to read $HOME\Desktop\Web\Web\styles\myStyle.css.
Remove the Web/ portion of the URI.
href="styles/myStyle.css"
You should also have a space between attributes.
rel="stylesheet" type="text/css"
Seems like your folder structure is something like this:
Web
|--styles
| |--myStyle.css
|--Test.html
If you reference the stylesheet from Test.html, you should specify the path relative to the location of Test.html. Specifying Web is not a good idea, because the directory that contains Test.html - which is Web - does not have a subdirectory called Web.
If the structure is the way I have shown above, the path should be styles/myStyle.css.
First of all you need to enclose My first WebPage in a title tag:
<title>My first WebPage</title>
Then what you need to do is specify the href attribute as a relative path, so assuming that your css is in a directory called styles the link would be:
<link href="styles/myStyle.css" rel="stylesheet" type="text/css">
Also, make sure there is a space between " and type in your link tag.
I hope this helps
my css is in assets/css/style.css and my image is in assets/img/bg.png But when i try to link the background image:
background: url(../img/bg.png);
it instead uses assets/css/../img/bg.png as the url. Why is it?
Html file (/index.html)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" media="screen" href="assets/css/style.css" />
</head>
<body>
<h1>Background Image</h1>
</body>
</html>
Css file (/assets/css/style.css)
body{
background:url(../img/bg.jpg);
}
For mac OS you should use this :
body {
background: url(../../img/bg.png);
}
you can use this
body{
background-image: url('../img/bg.png');
}
I tried this on my project where I need to set the background image of a div so I used this and it worked!
I had a similar problem but solved changing the direction of the slash sign:
For some reason when Atom copies Paths from the project folder it does so like background-image: url(img\image.jpg\)instead of (img/image.jpeg)
While i can see it's not the case for OP may be useful for other people (I just wasted half the morning wondering why my stylesheet wasn´t loading)
Since you are providing a relative pathway to the image, the image location is looked for from the location in which you have the css file. So if you have the image in a different location to the css file you could either try giving the absolute URL(pathway starting from the root folder) or give the relative file location path. In your case since img and css are in the folder assets to move from location of css file to the img file, you can use '..' operator to refer that the browser has to move 1 folder back and then follow the pathway you have after the '..' operator.
This is basically how relative pathway works and you can use it to access resoures in different folders. Hope it helps.
body
{
background-image: url('../images/bg.jpeg');
}
You are using cache system.. you can modify the original file and clear cache to show updates
You are using a relative path. You should use the absolute path, url(/assets/css/style.css).