4

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 {

        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>
2
  • 1
    What do you mean by a mistake? You said it is working? Are you wondering if this is a best practice? That really is a different question than what you are asking.
    – spinon
    May 22, 2011 at 23:04
  • @spinon - what I mean by mistake is that, am I using CSS correctly i.e. the right use of padding, margins, inheritance, etc. I said it is working because it gives me the layout I want however I don't know whether my coding is efficient and I am using the tags, properties, selectors, etc correctly. May 22, 2011 at 23:45

4 Answers 4

3

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.

15
  • 1
    I like HTML Validator, the Firefox add-on. addons.mozilla.org/en-US/firefox/addon/html-validator May 22, 2011 at 23:10
  • They're both the same thing, but the add-on is pretty nice to have, as it saves you a few clicks.
    – Blender
    May 22, 2011 at 23:11
  • I used it extensively when I was learning HTML. Very handy, since it shows results on every page, without having to specifically go to the online validator. May 22, 2011 at 23:13
  • 3
    Actually, the correct HTML is <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />, not <meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />.
    – Kevin Ji
    May 22, 2011 at 23:15
  • 1
    @PeanutsMonkey - I think it should be content="text/html; charset=UTF-8"; note the semicolon after html. May 22, 2011 at 23:45
2

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.

2
  • I'd rephrase (2). The id selectors are fine in this case. You only use classes when you have many elements which should look alike, like images with captions.
    – Blender
    May 22, 2011 at 23:10
  • @Blender - Yeah it was poorly worded, hopefully it should read better now. May 22, 2011 at 23:15
1

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.

1
  • Thanks. The concern I have with my code is whether it is efficient. Don't want code that just works. Would like to have code that works, is efficient and adheres to standards. May 22, 2011 at 23:42
0

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="" />
7
  • @SIFE - See the comments on Blender's answer. May 22, 2011 at 23:36
  • @Jared I read it, are you trying to say something?
    – SIFE
    May 22, 2011 at 23:39
  • @SIFE - Your first tip about the double-quote is probably wrong. There should be a semicolon after text/html, not another double quote. May 22, 2011 at 23:42
  • 1
    @SIFE - Why would I want avoid the meta and base tags? The reason I had the code of the external CSS is because I intend to move my internal stylesheet to an external one as soon as I have it working. May 22, 2011 at 23:43
  • 1
    @SIFE - Your edit isn't exactly right - you put a colon in instead of a semicolon, and are missing a space (not sure if the latter is required). May 23, 2011 at 0:00

Not the answer you're looking for? Browse other questions tagged or ask your own question.