HTML and CSS noob running into my first problem.
I am using Notepad++ and I have my css and HTML files both saved in the same folder. But whenever I launch the HTML file in a browser the css ID that I am using is not doing anything specifically centering and changing color.
This seems like one of those easy fix kind of things.
Main.css
<style>
#change{color:red; text-align:center }
</style>
example.html
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<Title>sample</title>
<link rel="stylesheet" href="folder/main.css" />
</head>
<body>
<p id="change">Sample sample sample </p> //HERE IS WHERE THE ID IS
</body>
</html>
anyone have an idea what im doing wrong
To combine the two current answers:
If the directory structure of your website is simply the index.html and main.css in the same folder, than the path to link the two is:
<link rel="stylesheet" type="text/css" href"main.css"/>
The Style tags in your current css page are redundant and unnecessary. Style tags could be used in the html, though are rarely used.
Finally, not sure if this is just the code you have posted, but the html here is acting as if it is all a comment,and make sure to delete that if that is in your current code (/*).
Remove the <style> and </style> tags. Your main.css file should only contain CSS:
#change{ color:red; text-align:center }
check css path.
Are paths like below?
- example.html
- folder/
|- main.css
remove tag in main.css
In css files, any html tag MUST NOT be existed.
and welcome to the world of web designing! Things can get quite frustrating, but as long as you show your will to solve a problem, everything will go smoothly. I love the fact that you tried to solve the problem prior to posting. Even though it is a basic thing, let's go step by step:
main.css does NOT need <style> tags. Those are only required when editing CSS internally, inside of <head> element of HTML page. In *.css files, you just start defining CSS rules.
make sure that you follow proper spacing like #change { color: red; text-align: center; } (ALWAYS FINISH A CSS RULE WITH A SEMI-COLON)
you can also break them down like this:
#change {
color: red;
text-align: center;
}
Characters /* and */ are CSS comments syntax. ANYTHING between those characters shall be ignored by the browser.
<link rel="stylesheet" href="folder/main.css" /> might potentially be the cause of the problem, since you stated that html file and css file are in the same folder. If that is the case, you don't need "folder/main.css" but only href="main.css" /> Also it wouldn't hurt to add <link rel="stylesheet" type="text/css" href="main.css" /> to let the browser know the type of the file you're linking to.
Here is a working example.
#change {
color: red;
text-align: center;
}
<html lang="en">
<head>
<meta charset="utf-8">
<Title>sample</title>
<link rel="stylesheet" href="folder/main.css" />
</head>
<body>
<p id="change">Sample sample sample </p>
</body>
</html>
Related
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.
I'm following the tutorial on the w3school for HTML and I'm stuck at the external linking part where you can include in your HTML page the CSS file you with the stylesheet defined by you with the <link> tag.
I have tried:
adding in the correct way the arguments rel, href, type, or media
clearing the cache from the browser, maybe it saved some old code but it was not the case
creating another .css file to try and code different style solutions
index.html
<!DOCTYPE html>
<html lang="it">
<head>
<style>
<link rel="stylesheet" href="whiteonblack.css" type="text/css" media="screen">
</style>
</head>
<body>
...
</body>
</html>
whiteonblack.css
body {
background-color: black;
color: white;
}
The body background should be completely black (I hate bright websites, even if this is for testing and with awful and old yet working (but not so much) HTML) and the general text to be white. Also some love from the community for DIY students :).
It defaults to the reverse, white bg and black text. God the hate.
The link tag belongs in the head tag directly. Do not nest it in a style tag; that's meant for actual CSS.
<head>
<link rel="stylesheet" href="whiteonblack.css" type="text/css" media="screen">
</head>
Remove the style tag. Use below CSS code.
<head>
<link rel="stylesheet" href="whiteonblack.css" type="text/css" media="screen">
</head>
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
So I am trying to make my first mobile-first website and my first problem is that the index.html file doesn't recognize my style.css file to stylize all the different div tags. The style.css file is located in a css folder, along with the normalization.css file. Here is my code for the index.html file:
<!DOCTYPE html>
<html>
<head>
<title>Put on a Show, Monkey-Boy</title>
<link href='http://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:900' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway:600' rel='stylesheet' type='text/css'>
<link href="/css/style.css" rel="stylesheet">
<link href="/css/normalization.css" rel="stylesheet">
</head>
<body>
Were the CSS working properly, there would be a background color, the divs would have their own individual colors and sizes, fonts would be stylized in Nunito and Lato respectively, and positions of block text would be different. I am using the latest version of Chrome.
I looked at the other threads relating to this topic, but none seemed exactly the same as the problem that I am having.
Any help would be much appreciated!
Thanks so much in advance,
Todd
you forget a closing curly bracket after the *-selector.
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Fiddle: http://jsfiddle.net/6pxn0oro/2/
Also you should put your normalization.css before the style.css , so you don't overwrite your created styles.
you can try to remove / on your link.
Before:
<head>
<link href="/css/style.css" rel="stylesheet">
<link href="/css/normalization.css" rel="stylesheet">
</head>
After:
<head>
<link href="css/style.css" rel="stylesheet">
<link href="css/normalization.css" rel="stylesheet">
</head>
Hope that helps.
After how many years of development, you wouldn't believe how often I find myself scratching my head with this exact problem.
Firstly, make sure the css folder is in the root directory of your site. This is where the leading slash (/) is pointing to. Alternatively, if you remove this as suggested, then it becomes a relative path. Relative to the directory you're in. So in that case, the css folder should be in the same directory as the your index.html file. (Note, that depending on how you have your webserver setup, what you see as the root directory, may not be the actual root directory. In which case a relative path can be useful).
Also, make sure your css is correct, no typos in class names or anything like that. I'll usually apply something very simple that I know will work, such as a background color to the body element. For example:
body {
background-color: #000000;
}
Use a code editor with syntax highlighting to help you address any errors both in your CSS, and in your HTML.
I have added
<link rel="stylesheet" type="text/css" href="http://blogsoc.org/mail1/style.css/" />
in the index.html above tag. But my stylesheet is not working. my style.css code is:
body
{
background-color: #23314F;
}
main
{
margin: 0 auto;
width: 880px;
background: #FAFAFA;
}
What changes should be made?
The link provided is incorrect
href="http://blogsoc.org/mail1/style.css/
must be
href="http://blogsoc.org/mail1/style.css
without last /
Not too much discriptiv question.
But try removing last slash.
<link rel="stylesheet" type="text/css" href="http://blogsoc.org/mail1/style.css" />
"Not working" is a very vague description of the problem.
The only obvious issue is that main will select <main> elements which do not exist in HTML. We can't tell you what to change it to because can't see your HTML. I recommend reading selectutorial.
Since the question has been updated:
http://blogsoc.org/mail1/style.css/ gives me a 404 error. You need to provide a working URI to your stylesheet. http://blogsoc.org/mail1/style.css appears to be what you want.
I had that problem before. And I solved it. The problem was that I originally declared my page as a <frameset> in Eclipse. Even when I changed it, the problem persisted. I copy and pasted the page and tested in different browsers.
The source page was linking to the stylesheet on the browser perfectly. It was just not showing the style on my page.
I created a new page with no declaration and it works.
The `<link>` tag was not the problem.
<html>
<head>
<link type="text/css" href="style.css" rel="stylesheet" />
</head>
<body>
<h1>Test Title</h1>
this is a test page.
</body>
</html>