I cannot load .css from a separate file.
For example if I have html:
<!DOCTYPE html>
<html>
<link href "style.css" rel="stylesheet" type = "text/css">
<head>
</head>
<body>
<h1>My CSS web page!</h1>
<p>Hello world! This is a W3Schools.com example.</p>
</body>
</html>
The css does not load
however if I have css within the same html file the css loads properly. What am I doing wrong?
EDIT:
Changed HTML To code below as suggested by several people. Still has not effect. sytle.css is in the same directory as my source html.
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>My CSS web page!</h1>
<p>Hello world! This is a W3Schools.com example.</p>
</body>
</html>
css style sheet:
<style>
body
{
background-color:#b0c4de;
}
</style>
Your link tag is malformed and should be in the head (as opposed to the root of the document):
<link href "style.css" rel="stylesheet" type="text/css">
Should be (notice the href= correction):
<link href="style.css" rel="stylesheet" type="text/css">
try this
<link href="style.css" rel="stylesheet" type = "text/css">
Related
<html>
<head>
<title>My Travel App</title>
<link rel="stylesheet" type="text/css" href="/stylesheets/app.css">
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
</head>
<body>
<div class="ui fixed inverted menu">
<div class="ui container">
<div class="header item"><i style="font-size: 20px;" class="edit icon"></i>Blog Site</div>
Home
New Post
</div>
</div>
<p class="sample"> I can style here with css in app.css</p>
Can anyone help with the css/semantic-ui problem, please?
When I use style tag in the file as above it is working but if try to style something in my app.css file it does not work. I can style something else that I did not use semantic-ui in but I cannot style anything that has something from semantic-ui.
For example: I can style the class "sample" in my app.css file but cannot style class "item".
Thanks!
Its because of your files precedence in header, it read line by line first come first serve.
Always add your custom file in the end of header so that your custom style's overwrite default styles.
Replace below code
<head>
<title>My Travel App</title>
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/app.css">
</head>
Move semantic.min.css in top of app.css...
<head>
<title>My Travel App</title>
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/app.css">
</head>
Hi I'm new to learning html and css and been really struggling with this problem. I can't link to an eternal CSS file, it just won't work when testing on my web host, I'm sure the file name is right though and it the css works fine when hosting locally. It's saved as "test.css" and is in the same folder as the "index.html" file.
This is my HTML -
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<p>This is some text</p>
</body>
</html>
This is my CSS
<style type="text/css">
p {background-color: blue;}
</style>
Any help would be greatly appreciated!
Two things...
1) remove </style> from your header
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
2) And remove <style> tags from css file
p {
background-color: blue;
}
There's no need to include <style type="text/css"> in your css file. Remove that and just put:
p {
background-color: blue;
}
The only time you put <style type="text/css"> is when you're putting the your css directly in your HTML file.
In your CSS there is no need to wrap your code in a <style> tag, that is only necessary in HTML.
Also not sure why there is a closing </style> tag below your <link> tag. There is currently no inline styling here in the head of your document.
<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="test.css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
This is first time I am trying bootstrap. Everything seems to be in place except the class jumbotron is not working. Class container works and brings content in center but jumbotron which is suppose to give some background does not seems to work. (adding or removing this like class="jumbotron" has no effect on page.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="./css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>My first Bootstrap website!</h1>
<p>This page will grow as we add more and more components from Bootstrap...</p>
</div>
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="./js/bootstrap.min.js"></script>
</body>
</html>
I am attaching the of ide so you can see my file tree. I checked it myself also and seems I have loaded everything correctly.
Update: redownloading the bootstrap solved the problem with exact same code. somehow my first download was not working correctly.
Try:
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
without the ./ instead.
or the CDN:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Try to use
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
in your HTML head.
I am trying to add animate.css into my website. For this I am trying out with a basic example.
<html>
<link rel="stylesheet" type="text/css" href="animate.css">
<h1 class="animated infinite bounce">Animate</h1>
</html>
But its not working. The path is absolutely correct. And I am working in XAMPP.
The link tag has to be inside the head element.
<html>
<head>
<link rel="stylesheet" type="text/css" href="animate.css">
</head>
<body>
<h1 class="animated infinite bounce">Animate</h1>
</body>
</html>
i dont see that my web page is changing according to the style defined in the css file. when i added the same in html file, it is working. can someone please help. dont know what is wrong.
below is my simple html file
<html>
<head>
<title>css</title>
<body>
<link rel="stylesheet" type="text/css" href="style.css">
test
</head>
</body>
</html>
below is my css file.
<style>
body
{
background-color:lightblue;
}
</style>
<style>
body {
background-color:lightblue;
}
</style>
is not a right way to write a .css file.
Remove those style tags from your .css file and check again.
Also,
Make sure your .html and .css files are on the same path
(In order to make things work without changing the link tag in your html head
Just noticed:
Your body tag is INSIDE your head tag. Which is incorrect.
Right way to do so is,
<html>
<head>
<title>css</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
test
</body>
</html>
Change css file as: Remove <style> </style>
body
{
background-color:lightblue;
}
Also correct the format of html as
<html>
<head>
<title>css</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
test
</body>
</html>
This works for Me. Make sure your html and css both the files should be in same folder.
Try this.
HTML-
<html>
<head>
<title>css</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
test
</body>
</html>
CSS-
body {
background-color: lightblue;
}
You wrapped the head tag around everything. And a link tag should always be placed between head tags and not in the body tag.
your code should be like the example below. All the rest seems fine.
<html>
<head>
<title>css</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
test
</body>
</html>
Css should be like this:
body {
background-color:lightblue;
}
always css link in head section, u can also see the path of the file, Do not use type attributes for style sheets (unless not using CSS),Specifying type attributes in these contexts is not necessary as HTML5 implies text/css and text/javascript as defaults. This can be safely done even for older browsers
type="text/css"
HTML
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
hello
</body>
</html>
You are using wrong CSS syntax. In a CSS file, there are no <style></style> tags, they are just rules. So you should have:
body
{
background-color: lightblue;
}
Also, you should link your CSS file into the <head> tag, it is better for your file's organization.