Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Dan Williams
Dan Williams
5,339 Points
Posted by Dan Williams
Dan Williams
5,339 Points

Am I following the correct principles for HTML / CSS coding?

I've just started learning HTML and CSS with TreeHouse. Currently I'm creating a test site to practice with.

I'm just after an early idea if the principles I'm using are correct.The below is an snipit from the main body of my html code. Its just about positioning text and images on a grid at the moment. I seem to be using alot of "divs" with IDs in the CSS for styling etc.

Can someone tell me if the structure is ok, or not and what I'd need to do to change this.

Much thanks in advance.

PS, some of the alt text is work in progress and repeated currently hence why it repeats.

<div id="social_media" class="grid_8"> <img src="logo.jpg" alt="This is the company logo"><img src="logo.jpg" alt="This is the company logo"><img src="logo.jpg" alt="This is the company logo"> </div>

<div id="topmenu" class="grid_4">
    <a href="www.bbc.com">About Us &nbsp &nbsp</a><a href="www.bbc.com">Our Cheeses &nbsp &nbsp</a><a href="www.bbc.com">Contact Us</a>
</div>

<div id="quote_one" class="grid_4">
    <p>"QUOTE 1 - We really love the taste of your cheese, we will be back for more"</p>
</div>

<div id="logo" class="grid_4">
    <img src="logo.jpg" alt="This is the company logo">
</div>

<div id="quote_two" class="grid_4">
    <p>"QUOTE 2 - We really love the taste of your cheese, we will be back for more"</p>
</div>

4 Answers

Matt Campbell
Matt Campbell
9,767 Points
Matt Campbell
Matt Campbell
9,767 Points

First off, use classes not ids. With CSS you want to be as least specific as possible. Look up css specificity to learn a bit about it.

Without seeing how you want to structure the site, its hard to tell if the divs are required or if you can put two or three elements in one div and then give classes to the elements.

If you're repeating the same CSS over and over again to position stuff, then you're being too specific with your selectors.

Dan Williams
Dan Williams
5,339 Points
Dan Williams
Dan Williams
5,339 Points

Thanks, So I'd replace the id="topmenu with class="topmenu" and in the css file use .topmenu not #topmenu ?

Is there a advantage to nesting 2 o3 div elements together or is it just layout?

Matt Campbell
Matt Campbell
9,767 Points
Matt Campbell
Matt Campbell
9,767 Points

Say, the text is all blue or the background is blue for all the elements, then you don't need to write out a separate CSS rule for each element. It's all about writing as little code as possible. Every piece of code you write needs executing and adds size to your files. You need to keep everything as small as possible.

The time to use ids is when it's a very specific element. Say you had a nav bar section or div containing all the elements that you're going to build the nav with. Then using an ID for the container div is appropriate but even then, you can just use a class.

Dan Williams
Dan Williams
5,339 Points
Dan Williams
Dan Williams
5,339 Points

Ok understood. IS there anything wrong with the way I have my divs structured? or if I was using one class for say 3 of them would it be better to nest them together?

Dan Williams
Dan Williams
5,339 Points
Dan Williams
Dan Williams
5,339 Points

Thanks, So I'd replace the id="topmenu with class="topmenu" and in the css file use .topmenu not #topmenu ?

Is there a advantage to nesting 2 o3 div elements together or is it just layout?

Jason D'Angelo
Jason D'Angelo
6,592 Points
Jason D'Angelo
Jason D'Angelo
6,592 Points

From the snippet you provided, it looks like you are classifying each div with an id and a class. I agree, less is better. If you have several different elements on one part of the page, try to wrap them all in one div and then fix each element as needed. Example would be: <div class = "topmenu"> <img class = "picture" /> <p>Some text.</p> </div> Then you can css the whole div to the top and the individual elements however you like. (Please excuse the pseudo code ).