I've downloaded a style sheet that I want to use for a personal HTML webpage of mine. Quick question about implementing said style sheet. A screenshot of the folder is here:
http://imgur.com/94m11mz
I know to have an external style sheet I need to use the link tag, something akin to:
<link rel="stylesheet" href="external_style_sheet.css" type="text/css">
My questions are these:
1) Would href= "name of the .css files?" i.e href="default.css"
2) I'm not sure what to do with 2 .css files. Do I link to both of them? Meaning do I have 2 link tags? One going to default.css and one going to fonts.css? Such as:
<link rel="stylesheet" href="fonts.css" type="text/css">
<link rel="stylesheet" href="default.css" type="text/css">
3) Do I need to include all of the folders/.css files in the same folder as my HTML document? Or can I move that to a different folder if I explicitly type out the location to in href="name of .css file here" thing?
You can move them to your own folder, for example:
<link rel="stylesheet" href="css/fonts.css" type="text/css">
<link rel="stylesheet" href="css/default.css" type="text/css">
And yes you need one link tag per css file you want to include in your html file(s).
You will need two link tags as they are different files, the folder structure depends on how you think it is appropriate.
Generally it is a relative path like '..css/yourstylesheet.css'
href takes the virtual path. thats like say you have css folder in your root directory and the css file present in that then href = "css{your css filename}".
Question 1: Would href= "name of the .css files?" i.e href="default.css"
Yes you should name css with .css extension
<link rel="stylesheet" href="external_style_sheet.css" type="text/css">
Question 2: I'm not sure what to do with 2 .css files. Do I link to both of
them? Meaning do I have 2 link tags? One going to default.css and one
going to fonts.css?
Yes, you can use two link tags but keep in mind if you have same class or id name in the two stylesheet it will take the style of last stylesheet.
For eg:
if you have <div class="sample"> hi </div> in your html
and in your default.css if you have .sample{color:red;} and in your font.css you have .sample{color:blue} then the text "hi" will appear blue in color as you have linked font.css second.
Question 3: Do I need to include all of the folders/.css files in the same
folder as my HTML document? Or can I move that to a different folder
if I explicitly type out the location to in href="name of .css file
here" thing?
It is highly recommended to keep all .css extension files under a single folder. so that you can search for the stylesheet easily if you have large sum of files in your site.
And you should link like wise the stylesheet if you have it in a separate folder.
Folder Name: CSS
File Name : Default.css
<link rel="stylesheet" href="CSS/Default.css" type="text/css">
Related
I have two files of CSS, one is for styling webpage and the other is for styling my countdown timer. I have tried with the following but it uses to follow only one CSS file at a time (depending on what I have linked last). How can I use both files at the same time?
<link rel="stylesheet" href="Background.css">
<script type="text/css" src="CountDown.css">
You can add two style files like below:
<link rel="stylesheet" href="Background.css">
<link rel="stylesheet" href="Countdown.css">
Look, means you are linking a 'stylesheet' named 'Background.css' to your html file.
means you are adding some JS file/ script to your html file.
You have messed up between the 'script' tag and 'link' tag.
So, here you are trying to add two style/css files. that means two link tag with two different file name. Then, the code will be-
<link rel="stylesheet" href="Background.css">
<link rel="stylesheet" href="Countdown.css">
This question already has answers here:
How to link a CSS file from HTML file?
(2 answers)
Closed 1 year ago.
So my CSS link somehow doesn't work. I can't find a problem with it, but the CSS is not connecting to the HTML. My code:
<link rel="stylesheet" href="css/styles.css">
Try Using your CSS like this:
<link rel="stylesheet" href="../css/style.css">
Because your style.css is in a folder named CSS and your HTML is in another folder
So you have to use ../ to go back one file directory and go to css/style.css
Then the css will be loaded and it will work.
You need to go to the parent folder before being able to access the css folder from your html file:
<link rel="stylesheet" href="../css/styles.css">
Depending on specifics of your project, the CSS subdir could be placed inside the root DIR, along with .html files. Then your <link> tag, as shown in question, would take effect.
I've been trying to connect html with the CSS.
I've checked that:
The stylesheet path of the css is correct, and it is: css2/css2.css
The <link rel="stylesheet" type="text/css" href="css2/css2.css" /> code is well written and I think it is.
I also tried to try several code editors in case it was a preview problem, I've already tried Atom and brackets and the two do not show that the CSS gets connected.
HTML code :
The html close tag is written too at the bottom.
CSS
here is where the html and CSS file is placed
As you have mentioned in your statement that css files is css/css2.css
so it means you should link css file by this code.
<link rel="stylesheet" type="text/css" href="css/css2.css" />
You added css2 instead of css as folder name
This code will 100% work, Just make sure your HTML file and CSS2 folder need to be on same level (in same folder).
otherwise this CSS file not link to your HTML.
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 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