Colored boxes - Step 8. Styling inside the containers
If you have the containers in the correct position and the content is behaving acceptably, you can start styling the content inside the containers.
Classes and IDs
Use as few IDs and classes as possible. You should be able to style almost any element inside a container using descendant selectors. For example:
#header {} /* styles the container */
#header h1 {} /* styles any <h1> in the container */
#header p {} /* styles any <p> in the container */
#header ul {} /* styles any <ul> in the container */
#header ul li {} /* styles any <li> in the container */
#header a {} /* styles any <a> in the container */
#header li a:link {} /* styles any <a> within an <li> in the container */
Environmental styling
It is also a good idea to group these rules together in your stylesheets, as you can work on a container and all related styles without having to search for them. Mark Newhouse refers to this as Environmental Style. These groups of rules can also be commented to make it easier for you to work on them in the future.
Each section of the page can now be styled individually, and as you have already established the overall positioning methods, you can confidently work on the finer details.
