I am wanting to link a stlyesheet to my html doc, but it is not applying to my website. When I had the same css as an internal stylesheet, it worked fine but will not work as an external page. Attached is a screenshot for reference
You can try change with this way:
<head>
<link rel="stylesheet" href="styles.css">
</head>
change sylesheet to stylesheet
You can try this way.
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
Related
I am working on a home page that links to several of my projects. I am trying to link to another html that has a different style than the home page. The images and text I have for the second html works fine, but it takes on the style of the home page, and not its own design which is different. My question is is it possible to link to another html that has a different style? If so, how do I input this? When I try putting the style for the second html in the home page's folder, it won't let me since there's already another style.css I used for the main home page. I tried changing the name of the second style file and it still does not work.
If I understand you correctly, you have two HTML pages and you want a different CSS style for each page.
You can have several CSS files but you cannot have two with the same name.
Create two different CSS files. For example home.css and secondpage.css
Create two different HTML files. For example home.html and secondpage.html
Go to the <head> of home.html and add <link href="home.css" type="text/css" rel="stylesheet" />
Go to the <head> of secondpage.html and add <link href="secondpage.css" type="text/css" rel="stylesheet" />
Make sure the html files and css files are in the same folder.
If you have trouble finding the <head>, see the code below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="home.css" type="text/css" rel="stylesheet" />
</head>
<body>
<p>Hello World</p>
</body>
</html>
Yes, it is possible to use different style for diffrent html pages. There are mainly two easy way
Either you use different css files for each html page (Which is not recommended):
Let say for homepage.html you use mystyle.css
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
</html>
So for other html page you can use secondpage.css
<html>
<head>
<link rel="stylesheet" type="text/css" href="secondpage.css">
</head>
</html>
and make sure you specify path correctly
Other way which is recommended is you give diffrent class name for the html attributes, So that you can specify the all styling in single stylesheet. which will reduce your page loding time too.
Lets say this is home.html :
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<div class="homepage">
// Other content here
</div
</body>
</html>
So in Second html file you can use different class
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<div class="secondpage">
// Other content here
</div
</body>
</html>
so now yourstylesheet will look like :
.homepage{
//your style here
}
.secondpage{
// your style here
}
Hope so this helps.
Please help, i really cannot see what i am doing wrong. I have tried all permutations and still cannot link so have started to write css code in html. Not what i want to do. Been looking at it too long and hoping someone can see my error. Thnks
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>
My file tree is my directory folder name of the project then a sub folder css, then the style.css
Assuming your index file is in the root directly below the css file, you need to write "./css/style.css" - you're definitely not pointing to the right location.
<link href="./css/style.css" type="text/css" rel="stylesheet">
Try This:
<link href="../css/style.css" type="text/css" rel="stylesheet">
OR
<link href="/ProjectName/css/style.css" type="text/css" rel="stylesheet">
If you want to link to your stylesheet and it is not working, navigate to your stylesheet (it should look like http://www.example.com/css/style.css) and then copy the URL to your <link rel="stylesheet"> tag so it looks like this:
<link rel="stylesheet" type="text/css" href="http://www.example.com/css/style.css">
instead of this:
<link href="css/style.css" type="text/css" rel="stylesheet">
Hope this helps!
I typed the below code in the section of the HTML. However, the CSS code and the bootstrap is not being recognised by the HTML.
<link href="C:\Users\Robert\Desktop\Websites\public_html\Main.css" rel="stylesheet">
<link rel="stylesheet" href="C:\Users\Robert\Desktop\bootstrap-3.3.4-dist\css\bootstrap.css">
<link rel="stylesheet" href="Main.css">
What am I doing wrong pls?
You can find this answer very easy by using google.
I would do the following. Create on your desktop a directory website. In this directory create a directory called "css", "js", "img". Create in the directory "website" index.html and enter this in the document:
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
Try making a container in your html file like:
<div class="container">
some text...
</div>
Use inspect element in firefox and you can see if your browser reads your css file.
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.
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" />