Div and Span

The <div> and <span> tags are applied together with Cascading Style Sheets. They do not cause much changes separately. The fact is that the <span> tag doesn’t affect content visually. Using <div> tag will result only in blocking off its contents, like when you put a <br> tag before and after a section on the page.

Like it is with most tags, the <div> and <span> tag can have the class, id, and style attributes. Thanks to these attributes styles can be applied to the elements. The tags are applied the same way any other HTML tags and it is possible to nest them within each other any number levels.

Code Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Div and Span</title>
</head>
<body> <div style="position:absolute; left:0px; top:0px; font-family:Verdana; font-size:10pt; border-style:groove; border-width:30px; border-color:blue; padding:4px">
This text appears in the  <span style="font-style:italic; color:red">upper-left hand corner</span>
 of the page.<br />
 It also has a big blue groovy border around it.
</div>
</body>
</html>

Exercise: Divs and Spans

Task duration: 10 to 20 minutes.

This exercise will teach you how to add class and id attributes to div and span tags to HTML page that already exists. The HTML page already has an embedded style sheet, which should stay without modification. Your task is to make the page look as follows.

There are no detailed instructions. Analyzing the rules in the embedded style sheet use classes and ids as it is appropriate to apply them.

Units of Measurement

In CSS you can determine font size, border size, margins, padding, etc. by the means of many specific units of measurement. Check in the table below which units are available.

Unit	Description	Example
px	Pixels	margin-top: 10px;
pt	Points	font-size: 12pt;
in	Inches	padding-top: .5in;
cm	Centimeters	top: 5cm;
mm	Millimeters	left: 45mm;
pc	Picas	bottom: 12pc;
em	Ems	font-size: 1.5em;
ex	Exs	font-size: 1.5ex;
%	Percentage	width: 80%;

Pixels (px)

The measurement unit the most commonly applied in website design is pixels. Unlike, for example, an inch or a point, a pixel is not an absolute measurement. The final size of a pixel is dictated by the resolution and size of a user’s monitor. Imagine an image that has 900 pixels width. If setting of the monitor resolution is 800 by 600 pixels, it means the image will not fit on the screen. But, if the setting of monitor resolution on the same computer is 1024 by 768 pixels, the image will fit and some room will be left.

Points (pt)

Points should be used for print. An inch contains 72 points.

Inches (in), Centimeters (cm), and Millimeters (mm)

Even if these are the most commonly used units of measurement, it is not good to use them in Web design.

Picas (pc)

Picas should be used for print only. An inch contains 6 picas.

Ems (em)

An em (or Mutt) is a relative unit defining the size of the letter “M” in a font. Since em is a relative, not an absolute measurement, it is often applied in Web design.

Exs (ex)

The “x-height” defines the height of font’s lowercase “x”. Exs are applied for setting the size of content depending on the size of the surrounding font.

DIV AND SPAN