I've been trying to learn HTML and have been following a tutorial online.(https://www.w3schools.com/html/html_css.asp) the tutorial does have some misinformation, so I've been looking on here for help as well. I have reached the point where you use external CSS files rather than using the <style> function.
My code is in /HTML/[ProjectName]/project.html, while my CSS is in /HTML/[ProjectName]/CSS/styles.css. Below are both files;
body {
background-color: powderblue;
}
h1 {
color: red;
}
p1 {
font-size: 200%;
}
<!DOCTYPE html>
<html>
<title> Linked CSS </title>
<head>
<link rel="style" type="text/css" href="/CSS/styles.css">
</head>
<body>
<h1> The CSS is in a separate doc </h1>
<p1> Let's see how this works out </p1>
<a href="/CSS/Styles.css" target="_blank">
<p2> Link to CSS file </p2>
</a>
</body>
</html>
From what I've read the css is properly linked to my file, and when I open the link it opens to the css page. What am I doing wrong?
Make sure you update your code to match your correct filename.
If your CSS is stored in the /HTML/[ProjectName]/CSS/style.css, then you should it like this
<link rel="stylesheet" type="text/css" href="CSS/style.css">
Try writing <link rel="stylesheet" type="text/css" href="CSS\styles.css">and check the spelling of your CSS file because they are different in question and in your code.
It`s easy. Take it
link rel='stylesheet' type='text/css' href='CSS/style.css'
and read W3School
Related
I am trying to learn HTML and CSS. I have tried using my CSS but it doesn't seem to be working properly.
HTML:
<head>
<link rel="stylesheet" type="text/css" src="styling.css">
<script src="../(public)/js/js.js"></script>
<meta charset="utf-8" />
<title>MyPortfolio</title>
</head>
CSS:
body
{
background : (red);
}
<link rel="stylesheet" href="./styling.css">
The folder directory of your CSS file determines how you link it.
Its best practice to link your script at the end of your web page, before the end of the body tag.
Its not "src", its "href".
<link rel="stylesheet" href="style.css">
I suggest you put that script tag on the bottom of your page.
Oh and one last thing, that css is incorrect. Here's what you should use:
body{
background:red; /* Or #ff0000 */
}
<html>
<head>
<title> HELLO </title>
<link rel="stylesheet" type="text/css" href="back.css"/>
</head>
<body>
<h1> WELCOME TO THE NEW WORLD </h1>
<p> This is the world of Oppurtunities </p>
</body>
</html>
the css file is below.
body{
background-color: darkslategrey;
color: azure;
}
h1{
color: coral;
}
You question is pretty vague but your path to the CSS is probably off.
Without more info on your dev environment this is my best suggestion.
Change your CSS link to...
<link rel="stylesheet" type="text/css" href="../back.css"/> Notice the ./back.css
This may not be the correct path to the file but your issue lies in your relative path. It all depends on your file structure.
Basic Examples
<link rel="stylesheet" type="text/css" href="/back.css"/>
<link rel="stylesheet" type="text/css" href="../back.css"/>
<link rel="stylesheet" type="text/css" href="/someFolder/back.css"/>
Perhaps putting the css file into a folder might work out.
<link rel="stylesheet" type="text/css" href="styles/back.css"/>
That usually does the trick, let us know ;)!
My problem is that my website that I'm attempting to host with Github pages will not read the CSS that I have linked to it.
My HTML looks like this:
<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="https://github.com/legoman8304/legoman8304.github.io/blob/master/style.css">
<html>
<body>
<h1>Hello World</h1>
<p>I'm under construction!</p>
<h6>Copyright MIT Licence 2018</h6>
</body>
</html>
My CSS looks like this:
body {
background-color: lightblue;
}
h6 {
color: navy;
margin-left: 20px;
}
Link repository: legoman8304.github.io
I'm guessing I linked the CSS wrong because when I using inspect element on the site itself it does show style.css but when opened it's empty. Any help?
You need to link your HTML to the github page rendered style.css and not the file itself in the repo.
Change this:
<link rel="stylesheet" type="text/css" href="https://github.com/legoman8304/legoman8304.github.io/blob/master/style.css">
To this:
<link rel="stylesheet" type="text/css" href="https://legoman8304.github.io/style.css">
And move that stylesheet reference inside your <head> tag.
You can use some way:
Recommend: <link type="text/css" rel="stylesheet" href="style.css" />
Use from raw your css with href: https://raw.githubusercontent.com/legoman8304/legoman8304.github.io/master/style.css
I have a file containing both html and css code.How it is possible to separate the html code in some files and css in some other files??
Yes. You can save the css in a .css file. Then in your HTML head tags, you can do <link rel='stylesheet' href='yourcssfile.css'>
<html>
<head>
<link rel='stylesheet' type='text/css' href='yourcssfile.css'>
</head>
<body>
<p>Test</p>
</body>
</html>
In yourcssfile.css
p {
color:red;
}
This will make the paragraph text red and your CSS is within a different file.
Simply put the CSS code into a file.css and include it in your HTML file.
<head>
<link rel="stylesheet" type="text/css" href="file.css">
</head>
I am super new to HTML and CSS and I ran into a problem when I try to link CSS code in HTML. The code doesn't show the background color like it should. HTML Code:
<!doctype html>
<html>
<body>
<link href="styles/main.css" rel="stylesheet" type="text/css"/>
<body>
</html>
CSS code:
body {
background: #999;
}
I have them both in the same folder. I am lost and confused so any help would be greatly appreciated!
CSS files should be included in the head section. If you have them in the same folder you need to change the href aswell.
<!doctype html>
<html>
<head>
<link href="main.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<body>
</html>
You have to use href="main.css"
By using styles/ the browser searches for a folder called styles in the same folders and can't find it so no CSS will be applied
Try adding the link element to head tag instead of body tag.