I'm trying to teach myself html/css. I can't get Aptana to recognize my css stylesheet.
Here's what I have for my html file (index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Josh's Worthwhile Practice</title>
<meta name="author" content="Joshua Soileau" />
<link rel="stylesheet" href="style.css" type="text/css"/>
<!-- Date: 2012-07-11 -->
</head>
<body>
<div id="nav">
<ul>
<li><h4>Solutions</h4><p>what we do</p></li>
<li><h4>Work</h4><p>what we've done</p></li>
<li><h4>Team</h4><p>who we are</p></li>
<li id="nav_logo">LOGO</li>
<li><h4>Blog</h4><p>stuff we say</p></li>
<li><h4>Contact</h4><p>talk to us</p></li>
<li><h4>Client</h4><p>login</p></li>
</ul>
</div>
</body>
</html>
And here's my .css file (style.css, in the same directory as index.html)
* {
clear: both;
padding: 0;
margin: 0;
}
body {
background-color: #eee;
font-family: Arial, Helvetica, sans-serif;
}
#nav {
color: #121415;
width: 100%;
height: 30px;
}
I have the link tag in my html code:
<link rel="stylesheet" href="style.css" type="text/css"/>
But when I open index.html in a browser or the Aptana preview pane, it just shows the plain html with none of my css pulled in.
Am I missing something obvious?
I found my answer. I had left an empty css tag in the file and Aptana didn't like it. This is my fault, I left it out of this post because I didn't think it was relevant.
I had:
#nav li {}
Sorry for not given you guys all the info, you were all very helpful and I helped me learn some new things. Thanks!
Try removing the type="text/css" attribute. Most modern browsers will complain if a type is specified and doesn't exactly match the Content-Type header the file returns, and when loading files locally there is no Content-Type header.
Your style.css file must be in the same location as index.html for it to work.
What do you see in the address bar of the browser when previewing?
What happens if you replace index.html with style.css? Are you able to see the CSS file?
Does it work without Aptana's preview, if you open the index.html file directly?
Also open up firebug or developer tools and hit the network tab to check if the browser is making a request for the CSS file and what if any errors are being reported. Also check the response headers.
You may also want to verify what Aptana is doing to your source after it generates the preview. Does doing a view source in the preview browser show the exact same link / path to the stylesheet?
Do you have a similar issue as this user with absolute path's in Aptana's preview: Aptana Studio 3 preview problems with absolute path
I'm pretty sure aptana has autocomplete on files and other html/css tags so try
<link rel="stylesheet" href="
I believe that when you have typed this if should start to give you all the files within your folder hysterical set up. If it doesn't try a / or the likes?
try putting it in a folder for example CSS
<link href="CSS/aki.css" rel="stylesheet"
type="text/css" />
Related
My CSS file somehow not loaded when i clicked my html file directly in my folder. But somehow with vscode when go live after compiling the scss to css it works fine.
do you guys have any idea why?
I place my css file in dist folder when using the Live Sass Compiler.
I tried open the html directly from folder using all the browser i have but the css not loaded.
body {
background-color: aqua;
}
<!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 rel="stylesheet" href="/dist/test.css">
</head>
<body>
<h1> TEST </h1>
</body>
</html>
Because you use absolute path, you should use relative path
instead of /dist/test.csstry dist/test.css
If you want to read more, here is an article about absolute/relative path:
https://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/
The preview work on vscode because vscode probably use a localserver to run your html file. something like localhost:3000/index.html. So in this case your html file is at the root of the domain, that's why the absolute path will be the same as the relative path
You can try this
<link rel="stylesheet" type="text/css" href="/dist/test.css"/>
you can try ./dist/test.css, this will also works fine
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.
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>
I am trying to build a simple website in Sublime Text Editor 2, however, my CSS file won't link to my HTML file and therefore printing plain text. My HTML code is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Christopher Olson</title>
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,600,700" rel="stylesheet" />
<link rel="stylesheet" href="css/style.css" />
As far as I know, the last line is supposed to link the CSS file.
This is part of the CSS that I have:
body, input, textarea
{
font-family: 'Open Sans', sans-serif;
line-height: 1.85em;
color: #888;
font-weight: 300;
}
Any ideas to fix? Please help
EDIT: I have the tags, I just ran out of room to post it
Your path your CSS file is probably wrong. If you're sane your CSS directory is in the webroot so your <link> should probably look like this:
<link rel="stylesheet" href="/css/style.css" />
Definitely is your link's href incorrect.
The link to your css files will be relative to the location of your html file. If both are int the same directory, then just include the name of the css file, if it is in a folder named "css" and that folder is in the same directory as your html file then you do "css/"
I think your href is wrong
You can tried using a absolute url just like
<link rel="stylesheet" href="http://..../css/style.css" />
You can download a very nice plugin for firefox called "firebug" it show you when some resource can't be reach
It will 100% work if your "call" link is placed within the html file. I'm having the same issue, my only work around is to include the call links in both the .html and .css ball ache, but it works
I am learning HTML and want to use an external CSS for my site. I have created a very basic site and stylesheet and placed them in the same directory on my hard drive. The site opens in both Firefox and IE but Firefox ignores the stylesheet.
Can anyone tell me what I'm doing wrong? The HTML and stylesheet are shown below:
The HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" media="all"/>
</head>
<body>
<hr />
<p>This is a website with a style sheet!</p>
</body>
</html>
The stylesheet:
body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}
The style sheet is save in the file style.css in the same directory as the HTML file, which is saved in a file called index.html.
Thanks everyone for the help, but I have just discovered the problem. The file style.css was save in DOS format, I saved it in unicode format and it now works!
First, if your doctype is HTML4 and not XHTML, you shouldn't use the syntax, so:
<link rel="stylesheet" type="text/css" href="style.css" media="all"/>
should be
<link rel="stylesheet" type="text/css" href="style.css" media="all">
Second, your CSS file is probably not delivered as text/css (missing mime-type declaration for .css) by the web server you're testing it on. Does it fail too when you open your file locally?
If this is an Apache server, upload a .htaccess file containing this:
AddType text/css .css