Basic check of a html file and css style sheet from a book ...please

Hi
I’m just following book and finding a few basic mistake so far.

The author has just explained the differences between a Class Selector and an ID Selector. However, I’m not convinced that the <div id=“footer”>This is the footer area</div should really say <div class=“footer”>This is the footer area</div>

So far, I can actually see that there is not class “current” set within the .css file so thats good as far as I can see.

However, its mainly the div called “footer” that I would like someone to check over please.

Can someone check this for me before I get too involved to find that I get problems please.

This is the html file:-
<!DOCTYPE html>

<html lang=“en”>
<head>
<meta charset=“utf-8” />
<title></title>
<link href=“/StyleSheet.css” rel=“Stylesheet” type=“text/css” />
</head>
<body>
<div id=“header”>This is the head content</div>
<div id=“maincontent”>
<div id=“nav”>
<a href=“home.cshtml” class=“current”>Home</a> |
<a href=“about.cshtml”>About</a> |
<a href=“contact.cshtml”>Contact</a>
</div>
<div id=“content”>This is where the rest of the page content goes</div>
</div>
<div id=“footer”>This is the footer area</div>
</body>
</html>

And this is the .css file :-

body {
margin: 0;
padding:0;
font-family: Arial;
font-size: 80%;
}
#maincontent, #header, .footer {
width: 60%;
}
#header {
height: 80px;
border-bottom: 2px solid blue;
font-size: 200%;
font-weight: bold;
}
#nav a {
color: red;
text-decoration: none;
}

#nav a.current {
color: blue;
}
Content {
background-color: #c0c0c0;
}
.footer {
font-size: 90%;
font-style: italic;
color: #555555;
}

I’m not even sure why the footer div element needed to be a . class element if anyone can give some basic pointer please.

Kind Regards
Matt

Not exacty sure what the questions is here, but indeed, if you have id=“footer” in the HTML, then you need footer { } in the CSS.

The other complaint I’d have about that code is that for the menu, it would be better to have this:

<ul id="nav">
  <li><a href="home.cshtml" class="current">Home</a></li>
  <li><a href="about.cshtml">About</a></li> 
  <li><a href="contact.cshtml">Contact</a></li>
</ul>

and in the CSS


#nav {
  list-style: none;
  overflow: hidden;
}

#nav li {
  float: left;
}

There’s more to the nav styling than that, but that’s the basic idea.

Thanks Ralph. I agree that the navigation section would be better showing as a unordered list.

I’ll have to take another look at this though as I’m not sure what this does:-
list-style: none;
overflow: hidden;

Regarding the footer, can you say why it starts with a . full stop in the style sheet. All the styles start with a hash sign.

I’m still learning and the book is just showing the basics at the moment.

Much appreciated if you can mentor me through this section of the book.

Kind Regards
Matt

List-style: none removes the default bullet points from the UL
overflow: hidden is not essential, but it’s there to make the UL wrap around the floated LIs. It’s needed if you have a background color on the UL, for example.

Regarding the footer, can you say why it starts with a . full stop in the style sheet.

It’s a mistake, pure and simple. :slight_smile:

Oh, I love it!!
So if I replace .footer with #footer
then this would be ok.

Also in the .html file, could alternative fix be to declare the div like this:-
<div class=“footer”>

Cheers
Matt

The difference to note is that class can be used more than once whereas the id can only be used once.

When developing maybe try these two validation links and use them frequently.

http://jigsaw.w3.org/css-validator/

Yes you can have any of the alternative. For classes styling you use dot(.) and forl Ids you use hash (#). If you have still confusion then here are some references for making the concept even clearer:
http://www.w3schools.com/css/css_id_class.asp

Yep. :slight_smile:

Also in the .html file, could alternative fix be to declare the div like this:-
<div class=“footer”>

Yes, definitely. Indeed, that’s the way I do it. Since you only need the footer once on the page, and John noted, it’s fine to use an ID, but these days I prefer classes, reserving IDs as hooks for JavaScript. Classes are a little easier to work with, I find, as they are a bit easier to override, if necessary.

wow!!! so much resources to look at!!! Thanks guys - I going to go away and cry now!!! I’m very grateful - thanks - I will use css classes a lot more now to get going with css more also :slight_smile:

Thanks to Arthur also who provided :-
http://css-tricks.com/the-difference…-id-and-class/

Does anyone know of any basic html/css validators which can check the code without it being online?

Cheers
Matt

You can paste your HTML and [URL=“http://jigsaw.w3.org/css-validator/”]CSS into the w3c validators.

Try the FireFox Addon: “Html Validator 0.9.5.1”

Thanks John - now I’m starting to see the advantages that some browsers have over other ones. I’m learning at such a rapid rapid rate now - I’ll keep referring back to these threads forever I think.

Now back to this html code for a moment if thats ok… so ignoring the css style sheet for 1 second, within the html code would it be better to mostly replace all the div id= with div class=

Surely using class selectors is better… I can also add more classes to div at a later date if I need to. e.g.
<div class=“fontstyle headerfontstyle fontsize headerfontsize”>

Can I also do this?>>
<div id=“header” class=“fontstyle headerfontstyle fontsize headerfontsize”>

Oh I’m getting in a bit of jam now!!! which div statement is better practice to use, that is in bold above?

This is the original code from the book I am using:-

<!DOCTYPE html>

<html lang=“en”>
<head>
<meta charset=“utf-8” />
<title></title>
<link href=“/StyleSheet.css” rel=“Stylesheet” type=“text/css” />
</head>
<body>
<div id=“header”>This is the head content</div>
<div id=“maincontent”>
<div id=“nav”>
<a href=“home.cshtml” class=“current”>Home</a> |
<a href=“about.cshtml”>About</a> |
<a href=“contact.cshtml”>Contact</a>
</div>
<div id=“content”>This is where the rest of the page content goes</div>
</div>
<div id=“footer”>This is the footer area</div>
</body>
</html>

You can download the HTML Validator program (from which the addon is based) from http://www.htmlvalidator.com/

It not only can validate all your HTML and CSS but it is also a quite reasonable editor as well.

Yes, though you will rarely—if ever—need so many classes on an element.

Hi Ralph

Apparently it may be more efficient and more organised to state lots of classes in an element, as well a reducing the size of .css files.

Check this out :-
http://www.sitepoint.com/forums/showthread.php?1015787-Organising-css-so-its-easily-readable-and-using-the-import-comman-to-help&p=5375151&viewfull=1#post5375151

I’m easily confused!!! lol

Not without reason, though. It’s rare that I need more than one, so don’t assume you’ll need lots. It’s only in rare cases where you have, say, a series of boxes that are mostly the same but there are slight differences to each. The diferences can be handled by a separate class.

Cheers Ralph. I see where your coming from now.
Just out of curiosity, which html editor do you use?
Cheers
Matt

Currently, I use Coda, which is Mac-only. I used to use Dreamweaver, but got sick of it and switched to Coda and Sublime Text 2, but kind of prefer Coda, although Sublime is better in a lot of ways.

Glad to help :slight_smile: