I have a problem trying to add a favicon and stylesheet to my personal website i'm trying to build. This is what i have at the moment:
<!DOCTYPE html
PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head>
<title>Super Chilun's Portfolio</title>
<link rel="icon"
type="image/png"
href="myicon.png">
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
Hello World!
</body>
</html>
The favicon part loads fine, but I cannot load the external mystyle.css file (just a few lines for now)
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("mybackground.png");}
Any help is appreciated.
For html external style-sheets...if not, html5, type="text/css" is an important attribute to identify the content type.
try adding it and it should work, if not, check the path to the css file...
<link type="text/css" rel="stylesheet" href="src/style.css">
<!--__^^^^^^^^^^^^^^^__this part-->
Replaced the background image file - now working fine
Related
I am working on a home page that links to several of my projects. I am trying to link to another html that has a different style than the home page. The images and text I have for the second html works fine, but it takes on the style of the home page, and not its own design which is different. My question is is it possible to link to another html that has a different style? If so, how do I input this? When I try putting the style for the second html in the home page's folder, it won't let me since there's already another style.css I used for the main home page. I tried changing the name of the second style file and it still does not work.
If I understand you correctly, you have two HTML pages and you want a different CSS style for each page.
You can have several CSS files but you cannot have two with the same name.
Create two different CSS files. For example home.css and secondpage.css
Create two different HTML files. For example home.html and secondpage.html
Go to the <head> of home.html and add <link href="home.css" type="text/css" rel="stylesheet" />
Go to the <head> of secondpage.html and add <link href="secondpage.css" type="text/css" rel="stylesheet" />
Make sure the html files and css files are in the same folder.
If you have trouble finding the <head>, see the code below:
<!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 href="home.css" type="text/css" rel="stylesheet" />
</head>
<body>
<p>Hello World</p>
</body>
</html>
Yes, it is possible to use different style for diffrent html pages. There are mainly two easy way
Either you use different css files for each html page (Which is not recommended):
Let say for homepage.html you use mystyle.css
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
</html>
So for other html page you can use secondpage.css
<html>
<head>
<link rel="stylesheet" type="text/css" href="secondpage.css">
</head>
</html>
and make sure you specify path correctly
Other way which is recommended is you give diffrent class name for the html attributes, So that you can specify the all styling in single stylesheet. which will reduce your page loding time too.
Lets say this is home.html :
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<div class="homepage">
// Other content here
</div
</body>
</html>
So in Second html file you can use different class
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<div class="secondpage">
// Other content here
</div
</body>
</html>
so now yourstylesheet will look like :
.homepage{
//your style here
}
.secondpage{
// your style here
}
Hope so this helps.
I was trying to add css in my blogger's blog but for some reason blogger theme designer is not working so i decided to add css directly in the code using tags, but I can't find the tag in the html file. It is my first time when I am unable to understand where is. Anyone know where tag is in this file to add css?
I did not Code it completely! And the person who did is no longer in contact with me!
Click Here to see Code
To use an external style sheet, add a link to it in the section of the HTML page:
<head>
<link rel="stylesheet" href="styles.css">
</head>
Search for this ]]></b:skin> and place your CSS code before it without using <style>
Or if you want to use a style tag, place it after </b:skin>
The <style> element is used to add CSS style rules to an HTML document. The element is expected to appear in the document <head>, but will also render acceptably when used in the <body> of the document.
Your program should look like this
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
you should add the head tag yourself to the top of the document if you do not have one already. for the href change that to the name of your css file.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML amp='amp' lang='en'>
<head>
<meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1, minimum-scale=1' name='viewport'/>
<!--[if ie]><meta content='IE=9; IE=8; IE=7; IE=EDGE; chrome=1' http-equiv='X-UA-Compatible'/> <![endif]-->
<meta content='blogger' name='generator'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<link href='https://justpaste.it/redirect/3qnyk/http://www.blogger.com/openid-server.g' rel='nofollow'/>
<link expr:href='' rel='nofollow'/>
<link expr:href='' rel='nofollow'/>
</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'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>
<head>
<title>Water Bureau</title>
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="stylesheet" href="/css/main.css" type="text/css" media="screen" title="Main CSS">
<link rel="stylesheet" href="custom.css" type="text/css" media="screen" title="Custom Styles">
<script language="JavaScript" src="/shared/js/createWin.js" type="text/javascript"></script>
</head>
Thats the code, but the "custom.css" isn't working. It doesn't work at all. If we add a #import into main.css OR into the header instead of a it works fine though. Any ideas? We also got rid of the media="screens" on both as well.
The CSS inside of it is working fine, it's just when we stack those two, the first one parsed is the only one read by the browser. So if we swap main below custom, custom than works but NONE of main works. and custom just has snippet of CSS, and doesn't override all the CSS in main, just 1 element.
I can't figure it out! We have other ed stylesheets in the head (which we took out for trying to fix this) and they worked fine...
Like hsource said, try validating both css files.
http://jigsaw.w3.org/css-validator/
Also just try this, without that title thing with both css files in same folder, both relative to the page which is importing them:
<link rel="stylesheet" type="text/css" href="css/main.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/custom.css" media="screen" />
It also might be that because you are not using any doctype and also you are not closing your link tags, something related to that might be your problem. So try this:
<!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" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/main.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/custom.css" media="screen" />
</head>
There's a two places that I think may be the problem:
The href for custom.css currently points to a location in the current directory of the HTML file. If custom.css is in the /css directory like main.css, you'd have to add that. The file is included when you use an#import tag because the #import is relative to main.css, and it can find custom.css in the same directory as main.css
There's an unclosed CSS tag or something that is breaking all the CSS coming after it; this is pretty unlikely, but you can verify your CSS with the W3.org CSS validator.
This might be due to the way CSS handles style precedence, but might as well be caused by bad markup. Try validating your document or using an absolute path for the custom.css stylesheet.
GaVra, you were right about the doctype, etc. We should have known that, given the HTML5 doctype was being used and probably isn't quite ready for action.
Thanks!