//CSS: Style containers — <div> and <span>

<New code>

HTML <span id="spanExampleId"></span> — creates an inline style container element with id="spanExampleId"
HTML <div id="divExampleId"></div> — creates a block style container element with id="spanExampleId"

If a built-in HTML tag does not fit, you can make your own

Use a <span> tag in the middle of a sentence

Let's say that you want to change the color of the middle of a sentence without using <strong> or <em>.

Maybe I want to make one word in a sentence turn orange.

I can make this happen by using a <span> tag with an ID, like in the following example: 

<p>
    Maybe I want to make one word in a sentence turn <span id="specialColorId">orange</span>.
</p>

<span> is an inline HTML element.

This means that it lies inside another element without interrupting the flow. It behaves like a <strong>, <em>, <code>, or <img> tag.

Use a <div> tag to build a new block

<p>, <li>, <h1>, and <td> elements are all examples of block elements. They all start a new line of text.

You can use <div> to group elements together into a container. For example:

This is a floating box

It is a very narrow container with its own background color, border, and a different position.

<div> can be a very handy tag!

...is produced by this code:

<head>
    <style>
        #floatingId {
            width:              350px;
            background-color:   lightGray;
            color:              darkBlue;
            border:             2px solid darkBlue;
            position:           relative;
            left:               250px;
        }
    </style>
</head>
<body>
    <div id="floatingId">
        <h3>This is a floating box</h3>
        <p>
            It is a very narrow container with its own background color,
            border, and a different position.
        </p>
        <p><code>&lt;div></code> can be a very handy tag!</p>
    </div>
</body>

Learn more

Live example: span and div