CSS Lesson 5: DIV Elements

Hand in hand with HTML

CSS and HTML work together like a team. Before you can create any CSS styles, you need to have an HTML page created. Once an HTML page is created, you can go in and apply your styles to whatever pieces of the code you wish.

The DIV Element

The <div> tag is one that is used often when creating HTML pages. <div> means a division of a page, or in other words a section or block of something. Think of it as a container that holds a certain selection of other elements. DIVs are used to create website layouts and position most elements of a page. To create a single DIV without styling, all you need to do is this:

<div>your block of content</div>

That just told your website to take your block of content and place it into one nice container. It looks like this (I made the background grey so you can see the container properly):

your block of content

ID Selectors

In the Introduction to CSS for Beginners, I went through the different types of selectors. If you haven’t read that post yet, do that now. An ID selector is basically a name you give to a certain HTML element that you can call upon in your stylesheet. As you learned in the Introduction, an ID selector should be applied to a single, unique element.

So, say we wanted to style that DIV code above. Let’s change the width of the container.

First, we need to apply an ID selector to the code, so we can call it from inside of our stylesheet:

<div id=”content”>your block of content</div>

All we are doing here is adding a selector called “content”.

Now, if we create an external stylesheet and add this new ID selector to it and apply a custom width, the inside of our .css file should include this:

#content {
width:200px;
}

The # sign is always used to call a specific ID selector, so we called upon “content” with “#content” and followed the basics I outlined in the introduction. Now our DIV looks like this with a width of 200px:

your block of content

.
We can also change the height:

#content {
width: 200px;
height:100px;
}

your block of content

.
and add some padding around the inside borders so that the text doesn’t touch the edges, and a 2px border around the whole thing:

#content {
width: 200px;
height:100px;
padding: 10px;
border: 2px solid;
}

your block of content

.
You can see that just by adding new properties to the selector in the CSS file, we can tell that DIV to do whatever we want. For a complete list of other CSS properties you can use, check out this CSS Properties List.

Now that you know how to create a DIV element with specific styles applied to it, you should have a basic understanding of what it is and what it does. We use DIVs in many, many applications so a basic understanding of this is essential if you want to move onto controlling other features and creating those fixed navigation links/social network buttons. In the next CSS tutorial I will explain how to do this.