Module 8.1 - style Attribute, div and span

To begin adding style to an HTML document, we will introduce the style attribute that can be used within a tag.

The style Attribute

We are introducing the style attribute because it is the easiest styling approach to understand. However, as we will see later, using the style attribute directly is not a good approach for managing large documents and websites.

So far, most of the tags we have seen are for organizing content. The only "styling" tags we have seen are the <b> tag for bold and the <i> tag for italic.

Consider if we also want to make the bolded word larger and the italicized word smaller. We can add a style attribute to the tags:

The general syntax of a style is a property (e.g., font-size), followed by a colon (:) and then a value (e.g., 30px):

    style="property: value"

As we will see shortly, multiple properties are separated by a semi-colon (;)

    style="property1: value1; property2: value2"

There is often more than one way of specifying a property's value. For the bolded text, we specified that the value of the font-size property is exactly 30 pixels (30px).

Alternatively, for the italicized text, we specified that the value is 75% of the current font size.

There are advantages and disadvantages to both approaches. Many web designers prefer to specify the number of pixels because it gives them more fine-grained control over how their web page appears. However, if a user is using an accessibility device or has adjusted the default font size in their browser, then specifying the relative size (e.g., 75%) may cause the text to be more faithfully displayed.

The span tag

The HTML <span> tag can be used to tag text that appears within other text. Consider the following example:

This example may be confusing because it seemed to have no visual effect on the text between the <span> opening tag and the </span> closing tag.

This is actually the expected behaviour because on its own, the <span> tag has no effect.

It might seem confusing why such a tag exists, but the following example should make it clearer:

The <span> tag was created to help style web pages.

The div tag

The <span> tag is designed for elements that flow horizontally. One property of an element that flows is that it can wrap around to the following line. Text content is the most obvious example of horizontally flowing elements, but <span> is more universal and can be used for non-textual content.

The counterpart to the "horizontal" <span> tag is the "vertical" <div> tag. Conceptually, the role of <div> in a web page is similar to the role of a paragraph (<p>) in a body of text. A <div> tag describes a vertical region or block of a web page, and <div>s are stacked vertically on top of each other. In practice, a <div> is more flexible than a paragraph because you can nest a <div> inside of another <div> and a <div> can contain non-textual elements such as images or tables.

In the above example, we also added some margin properties to control the whitespace around the text. At this point you are probably very curious about the different properties that are available. There are actually hundreds of styling properties available. Before we start exploring all of those properties, we will see how we can better organize the styles used in our documents.