Additional CSS Features

Floating elements

The CSS float property can be used to create columns in a page. This content appears in a <div> that has had the following style rule applied to it:

div.sidebar { float: right; width: 40%; 
              background-color:lightcyan;
              padding: 20px; margin-left: 20px; }

When you float an element off to one side of the page and then give that element a width that is less than 100% HTML will then attempt to flow the content that comes after that element around it.

This page will give you a quick overview of some important additional features of CSS.

div and span

The HTML <div> and <span> are used to enclose parts of a page, usually for the purpose of applying a special style.

The <span> element is an inline element that can be used to enclose some text inside a paragraph. The most common use for a <span> element is to apply a special style to some text. There is an example of that use in this paragraph. If you do a view source on this page you can see how I used a <span> to make this text red.

The <div> element serves a similar purpose. A <div> is used to enclose a group of block elements in order to apply a special style to the group. You can see an example of this in this page. The sidebar that appears off to the right is set up by putting some content in a <div> and then applying a special class to that div.

Borders, padding, and margins

The CSS border property is used to place a border around an element. One structure you can use for a border property looks like this:

border: <thickness> <color> <line style>;

The <thickness> is usually expressed in pixels, such as 1px for one pixel thick. For <color> you can use a named CSS color or an RGB color. The values for <line style> that are available include solid, dashed, dotted, and double.

When you use the border property you will get a border that goes all the way around the element. If you want to put a border on just one side of an element you can use the border-top, border-bottom, border-left or border-right properties instead.

When you place a border on an element the border will wrap as tightly as possible around the element's content. In most cases this won't look right, so you may need to apply some padding to the element to create a separation between the border and the content. Finally, you may want to also apply some additional margin to the element to create a separation between the border itself and the elements around your element.

You can see an example of this in this page. I applied the CSS class

p.urgent { border: 2px red solid; padding: 10px; margin-top: 10px; margin-bottom: 10px; }

to the paragraph above.