Unit 3: The Box Model

You did a good job adding all of the items of the assignment. Really nice work on that. Your code is working, as well.

I do need to point something out to you that we haven't talked much about, yet. That is about some basic principles of writing code and CSS for the Web. The idea is to add as little markup to the HTML file as possible. That makes for much easier maintenance and for the ability to take your content and re-purpose it someplace else without having to remove a lot of coding. When you use a lot of classes, you have to add markup to the HTML to add the class attributes to the elements.

Instead, use contextual selectors where you can. In your page, almost all of your major elements are only present once, so it's quite easy to use tag selectors and contextual selectors. For instance. You have an aside element with a nav element and a ul element inside of it. You don't need to use a single class to style any of those elements. You selectors would be:

aside
aside nav (a nav within an aside)
aside nav ul (a ul within a nav that's within an aside)
aisde nav ul li

And so on. You do have to make two classes for the main yellow and read containers - because there are two div tags in the same parent element. One could be a div with the class of "example1" and the other would have the class of "example2." Then, you can style all within them with selectors like:

example1
example1 div
example1 div p

You don't need to put on your footer, header, nav, etc. tags when you only have one in the same parent container. Just use the element for the selector.

I've redone your page as an example for you and uploaded it to your site. It's at gc.palomar.edu/32950/32950alincoln0761/Unit03a.html

Hope that it helps. You have completed your assignment 3, but I wanted to explain about how to more efficiently use contextual selectors and to have more standards compliant code.

I just looked at my code above. I had "dots" in there before the class name (.example1). However, this discussion board seems to have erased them. Hope that didn't confuse you.

As much as possible, it's best to put things like text-alignment in with the styles for a particular element - rather than adding an extra class to your html. For instance, instead of putting a class on a heading 1 tag to center it, write a rule for the h1 tag that centers the text. Example below:

h1 {
text-align:center;
font-family: Arial, Sans-serif;
color:#f00;
font-size:2em;
}