Making Groups: Divs and Spans

Grouping several elements with a DIV

Say you want to right justify a picture, a headline AND a paragraph.  You could add a right justify class to each element, OR you could put those 3 elements into a DIV tag grouping. Then, you can just apply a single Class or Id on the group, instead of on each of its members.

Inside index.html:

<div class="groupname">

<img src="picture.jpg">

<h1>This is the picture caption</h1>

<p>This is a sample paragraph. Lorem ipsum dolor </p>

</div>

Inside class.css:

div.groupname {

text-align: right;

}

Creating a subset of text with a SPAN

Another grouping method is intended for subsets of other tags.  Use the SPAN tag when you want to isolate things like a particular word or sentence in a paragraph.

Inside index.html:

<p>

This is a sample paragraph.  But we want <span class="redword">this word</span> to be red.

</p>

Inside class.css:

span.redword {

color: #ff0000;

}

Changing the container’s shape

Since DIVs and SPANs are “container” tags. It would make sense that we can change the shape of those containers.  In this way, we can create tall columns,  or wide headers or footers. We do that with two very important  style properties: “width” and “height”. Notice that we can use both pixels OR a percentage. And if you don’t include one of the dimensions, it will stretch to be just large enough for the contents.

Inside index.html:

<div id="header">

<p>We want this paragraph to display in a wide row.</p>

</div>

<div id="sidebar">

<p>We want this paragraph to display in a tall column.</p>

</div>

Inside class.css:

div#header{

width: 100%;
height: 200px;

}

div#sidebar{

width: 150px;

}

Now that we can group objects, you can be taught perhaps the most powerful trick in the book: Positioning.  You’ll soon see, with a few extra style properties, we can move screen elements anywhere we want!

Prev Page: Advanced Selectors
Next Page: Positioning