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;
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>
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:
For more details, I recommend you go through this page.