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

Is there any Tool To help of Creation of div Tags?

Hi there, I always have the same problem when designing a web page. I understand what <div> tags do, but my problem is, I find it difficult to specify div tags, because I am not sure of the CSS for that div tag. Is there any tool out there that helps with this, or maybe I am lacking understanding of basic web page layout. Any help would be much appreciated!

3 Answers

A div tag is just a block level element that isolates parts of a page from the rest of it. As for the css for a div tag, you can pretty much use anything. Maybe if you are more specific with an example, we can better help you out.

Mitchell, I am using Reveal.js. Not sure if you have heard of it or not, but I want to target the header of the slide? I am sorry I cannot provide any code as I am currently not at my laptop. Thanks anyway!

If you are using a div that is going to be more than just a container (i.e., it's going to be used with a color, image, explicit height or width, or anything else), you should always give it a class or an ID. A class can be anything you want it to be, but it's good practice to use a description or word that specifies what that div is doing. For example, if you are using a div for the main wrapper for your site to set the max width you want your content to stretch, you could do something like this:

<div class="wrapper">
 (the rest of your site's content)
</div>

Then you would target that div in your CSS by using that class, like so:

.wrapper {
 max-width: 1000px;
}

This is how you target divs, but remember that if you use divs with the same class, you'll have to get more specific if you want to avoid having one rule apply to all your elements. So, if you had divs with the class of pic and one was inside a div with the class of gallery and another was in your header, you would target the one inside the gallery div like this:

.gallery .pic {
 max-width: 50%;
}

The space between the two means you only want to target divs with the class pic that are inside another element with the class gallery.