Css question...newbie/beginner
I am beginning to make my first website and I so far have a menu and all but the problem is I don't know how to use an external css for formatting....
What I mean by that is, I DO KNOW in an external css if I put body { background-color: yellow} and use <link rel="stylesheet" type="text/css" href="style1.css" /> it will apply yellow to background color of my website.
What I can't figure out is how can I use a css file to apply the menu and fonts to all of the web pages I make....I don't want to post this same css code in every web page as the tutorial I am following says it is good programming to just import a css file into all the web pages you want to apply the format to instead of pasting that css code into each and every one....
Here is my code, basically what I want to know is how can I put the css part of the code into a css file so I can call it for all my web pages instead of putting it into my code directly, beware the css changes according to what browser you are using for blur etc.
In short: What will my CSS file look like and what will my htm file look like for code?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Blurry Menu</title>
<style type="text/css">
body {
background: #1a1a1a url(bg.jpg);
}
#blur {
position: relative;
top: 50px;
width: 100%;
border: 2px solid #000000;
border-style: solid none;
}
#blur:before {
position: absolute;
top: 0px;
width: 100%;
height: 100%;
border-top: 2px solid #212121;
content: '';
}
#blur:after {
position: absolute;
width: 100%;
height: 100%;
top: 1px;
border-bottom: 2px solid #212121开发者_JAVA百科;
content: '';
}
#blur ul {
position: relative;
top: 0;
width: 960px;
margin: 0 auto;
list-style-type: none;
overflow: hidden;
}
#blur li {
float: left;
position: relative;
}
#blur a {
position: relative;
float: left;
padding: 20px 25px;
margin-left: 10px;
text-decoration: none;
font-family: "trebuchet ms";
font-variant: small-caps;
color: transparent;
text-shadow: 0 0 2px #cacaca;
z-index: 100;
}
/* normal styles */
#blur a:hover, #blur a:focus {
color: #ffffca;
text-shadow: 0 0 0 transparent;
}
/* active styles */
#blur .active a, #blur .active a:hover {
color: #cacaca;
text-shadow: 0 0 2px #cacaca;
}
</style>
<!--[if IE]>
<style type="text/css">
#blur {
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#212121,direction=180,strength=0)";
filter: progid:DXImageTransform.Microsoft.Shadow(color=#212121,direction=180,strength=0);
}
#blur ul li a {
color: #ffffca;
-ms-filter: "progid:DXImageTransform.Microsoft.Blur()";
filter: progid:DXImageTransform.Microsoft.Blur();
}
#blur ul a:hover, #blur ul .active a, #blur ul a:focus {
position: relative;
margin: 2px 0 -10px 10px;
-ms-filter: "progid:DXImageTransform.Microsoft.Blur(enabled = false)";
filter: progid:DXImageTransform.Microsoft.Blur(enabled = false);
}
</style>
<![endif]-->
<!--[if lt IE 8]>
<style type="text/css">
#blur ul a:hover, #blur ul .active a {
position: relative;
margin: 2px 4px 0 10px;
filter: progid:DXImageTransform.Microsoft.Blur(enabled = false);
}
</style>
<![endif]-->
</head>
<body>
<div id="blur">
<ul>
<li>
<a href="http://dev.icalapp.rogersdigitalmedia.com.rogers-test.com/website.php">Home</a>
</li>
<li>
<a href="http://dev.icalapp.rogersdigitalmedia.com.rogers-test.com/How-to.htm">How-to</a>
</li>
<li class="active">
<a href="http://dev.icalapp.rogersdigitalmedia.com.rogers-test.com/Edit.php">Edit</a>
</li>
<li>
<a href="#">Features</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
</body>
</html>
Place your style sheet within your header, e.g.
<head>
<title>My Awesome Site</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
...with the href referencing the location of your style sheet. Then you may apply the style sheet rules the same as if you had an internal stylesheet.
When you create your external style sheet, just remember, don't include <style> tags inside of the document itself.
Move your CSS to a new file, say, "style.css" and import the stylesheet in your webpages. To do this, add the following tag to the HEAD section of your HTML:
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
For more details, I recommend you go through this page.
http://www.tizag.com/cssT/external.php. Will tell you how.
<link rel="stylesheet" type="text/css" href="theme.css" />
Is what you want. I suggest reading over http://www.w3schools.com/css/default.asp for basics.
A simple way is
<link rel="stylesheet" href="/css/master.css" type="text/css" media=">
This needs to be placed in the head section of you page.
The href references the path to the file.
You can also use the @import method.
<style type="text/css">
@import url("/css/master.css");
</style>
Put your inline styles in a document and name it with the extension .css. Then reference it between your tags with the following line.
<link rel="stylesheet" href="path/to/file.css" type="text/css" />
The href can be both relative (../images/file.css) or absolute (/images/file.css).
If you need to access different media, you can put in a media tag (like media="screen") or media="print" for stylesheet only to be used when printing a page.
As the html5 evolved you can declare ur document type <!doctype> and utilise the external css by placing all the css in a file named style.css and then u can acess it with
<link rel="stylesheet" href="path/to/file.css"/>
and embed ur css into your website
NOTE:In html5 type is optional
加载中,请稍侯......
精彩评论