CSS external file doesn't make an effect - html

I am new in CSS so am practice it.
I wrote a css file and a html file in order to see the effect of external CSS file on my html page but no change observed.
Here my codes
style.css
p {
Color:red;
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset ="UTF-8">
<title>Css Syntax </title>
<link rel ="stylesheet" href="style.css" type="text/CSS">
</head>
<body>
<p>this is nirmal paragtne</p>
</body>
</html>

Your code seems to be working fine for me.. If it's in the same directory maybe you could try checking your filenames if there's no typing error?

I checked my code in firefox browser and it works fine

Related

Page HTML dont working with the css i get an error

Hello i try to bulid a web and the css dont working with the html , what is the problem ???
I get a error message.
I hava a three files :
index.html
styles.css
main.js
You need to connect the HTML to CSS for them to work together, you need to add a link to the CSS inside the HEAD tag in the HTML:
<html lang="en">
<head>
<meta charset="utf-8"/>
<title></title>
<link rel="stylesheet" href="styles.css"/> // Connect the HTML to CSS
</head>
<body>
</body>
</html>

I'm having trouble linking the css file in my html

When I open the html file in chrome or IE, the background color and font size doesn't change and I don't know why.
Is it the way I linked to the css file from the html ? Is the path wrong? Should I use / instead of \ in the path name? Is the css content of the css file ok?
This is the head section of my html document (notepad):
<head>
<meta charset="UTF-8">
<title>Final Project</title>
<link rel="stylesheet" href="/CSS3/css/styles"/>
</head>
This is the content of my .css document (I'm using notepad):
h1{
background:#B3B3B3;
font-size:150%;
}
My css file is located here --> C:\Users\m529759\OneDrive for Business\Desktop\Web Design Course\CSS3\css
My html file is located here--> C:\Users\m529759\OneDrive for Business\Desktop\Web Design Course\CSS3\html
Since you are using external CSS:
HTML document:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Final Project</title>
<link rel="stylesheet" href="/home/bhavya/Desktop
/styles.css">
</head>
<body>
<h1>This is a heading</h1>
</body>
</html>
Content of styles.css document
body {
background-color: powderblue;
}
h1{
background:#B3B3B3;
font-size:150%;
}
So the reultant output will be:
Update 1:
I think there is some syntactic error in the path which you are using C:\Users\m529759\OneDrive for Business\Desktop\Web Design Course\CSS3\css
DO CHECK YOUR PATH AGAIN, AND DONT FORGET TO SAVE YOUR CSS FILE WITH .css extension AND YOUR HTML FILE WITH .html extension
I had a folder with 2 folders in them. One named html and the other css. I fixed this by deleting the html folder and putting the html document in the folder, like this:
revised file path
I also changed the <head> link in the html file, like this: <link rel="stylesheet" href="css/style.css"> and it worked.

Working on web page, trying to setup style sheet outside of Html. Not working

I have this simple HTML and CSS below. If I uncomment the style inside I get hotpink. When the link to the style sheet is used I do not get blue.
The test.html and test.css are in the same directory.
The browser error is:
test.html:9 GET file:///test.css net::ERR_FILE_NOT_FOUND - Crome on
Mac.
New to all this, but I have good understanding of what I should be doing I think.
.p {
background-color: blue;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="test.css">
<!-- <style>
p{background-color: hotpink}
</style> -->
</head>
<body>
<app-root></app-root>
<p>This is a test of color</p>
</body>
</html>
When trying to style ".p", you are referring to an object with class name "p". Just remove the dot before the p, and your problem will be solved!
Your problem can be solved by removing base tag from html document. In this case base tag messed things up and changed your link tag attribute "href" to "/" and that is why you get a reference error and the browser cannot find your test.css file.

Css in a separate file doesn't apply to index.html

I am new to html and I tried to create my webpage with the html as follows
<!DOCTYPE html>
<html>
<head>
<title>My webpage</title>
</head>
<body>
<h1> My web page </h1>
</body>
</html>
And the following css
h1{
color: red;
}
I tried adding a class to the h1 and styling it that way but in vain. If i do the css in style tags inside my html file it works but i want to have it in a main.css file
I want the h1 to have the color red, also I would want the css in a separate file, no the same one as my html so that it will be clean
If I am not mistaken you did not link your css file to the index.html, try something like this
<!DOCTYPE html>
<html>
<head>
<title>My webpage</title>
<link rel="stylesheet" type="text/css" href="./main.css">.
</head>
<body>
<h1> My web page </h1>
</body>
</html>
But try to replace ./main.css with the actual path of your main.css reffer to this for more info.
In the head section you have to link the html file to your css file.
Place the following code within <head> tags:
<link rel="stylesheet" href="[the path to your CSS file]">
It is usually this tag
<link rel="stylesheet" href="yourfilename.css">
But I think the problem you might be facing is the path of your css. Where is your css file located if it is inside a folder like a style folder then you would do something like this.
<link rel="stylesheet" href="style/yourfilename.css">
You need to import the css in the HTML file

Don't know why the css isn't linking?

So I'm about to start to code a website using Sublime Text, but I have not touched code in a couple of months (5-7) so I am trying to get used to it again. So I have created my HTML and CSS page, but even though the CSS link is right, it is not displaying in browser. I know once you tell me I will be kicking myself but why is it not showing up?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="home.css">
<title>Home</title>
</head>
<body>
<h1>GymHub</h1>
</body>
</html>
Your code assumes that your folder structure is like this (where your css file is a sibling to the html):
index.html
home.css
However, make sure that if your project setup is in a way that your css is in a folder, you should reflect that in the code:
index.html
-- css
home.css
And you would then put this in your html file:
<link rel="stylesheet" type="text/css" href="/css/home.css">
you have to create a root-directory with the exact adress of the css file , but maybe its because you forgot to make a backslash at the end of the link ( i am not sure )
You are missing the slash in link tag. Try this. Also make sure css file is in same directory.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="home.css"/>
<title>Home</title>
</head>
<body>
<h1>GymHub</h1>
</body>
</html>