Is this the correct way to style a HTML document using CSS? [closed]
I am new to the world of coding as well as CSS and have put together a sample page however am unsure if I am doing it correctly i.e. is the use of my CSS valid? I seem to be getting the required layout however would like to know if I am making any mistakes.
<!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" />
<meta http-equiv="Content-Language" content="en-us" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content= "" />
<title>Example</title>
<base href="" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#wrapper {
}
#header {
background-image: url('images/bg-inner-page.gif');
height: 200px;
}
#logo {
position: relative;
top: 50px;
left: 100px;
}
#topnav {
position: relative;
top: 35px;
left: 300px;
}
#content {
开发者_StackOverflow社区 background-color: orange;
}
#footer {
background-color: blue;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo">
logo
</div>
<div id="topnav">
nav
</div>
</div>
<div id="content">content</div>
<div id="footer">footer</div>
</div>
</body>
</html>
When in doubt, use the W3C Validator. Just copy & paste your code into the form and it will tell you what's wrong.
For me, it just pointed to that <meta> tag:
<meta http-equiv="Content-Type" content="text/html" charset=UTF-8" />
You forgot the opening quote before UTF-8.
But your CSS is completely fine. As long as it's valid and works across all the browsers, don't worry about it.
Your CSS seems fine, there are no problems, but I do offer 2 suggestions:
1) Move your CSS into a separate file. This allows browsers to cache it and reduces your (and their) bandwidth usage. It also keeps your HTML file smaller, which makes it easier to read.
2) Although ID selectors are perfectly OK, I tend to favour class selectors (e.g. .class-selector { ... }) instead of ID selectors (e.g. #id-selector { ... }) since you might need a second wrapper div later in your code, and your ID's have to be unique. Using the class attribute will allow you to have two (or more) wrappers with the same style in your code (which is part of the beauty of CSS). More than once I've seen people create stylesheets that repeat themselves over and over again because they use only ID selectors to style content, which defeats the point of CSS.
As long as you are getting the desired output in the various browsers then that is fine. However, you may want to place your CSS code in an external file and link to it. This way the same styles can be applied to mutliple pages. I see that you have a link tag with no href attribute value so its just a matter of providing the name of the css file.
Your code looks fine except for this line:
<meta http-equiv="Content-Type" content="text/html" charset=UTF-8" />
UPDATE: You forget to put simicolon after html and before charset like this:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
It is a good practice to separate your CSS code from HTML to reduce the page size, save bandwidth. There are some lines you can avoid it like:
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content= "" />
<base href="" />
Avoid this line if you don't have any external CSS file.
<link rel="stylesheet" type="text/css" href="" />
加载中,请稍侯......
精彩评论