Div and Span: Web Design Series: CSS Part 14

div and span

The Div and Span elements in CSS

The HTML elements <div> and <span> are used for grouping sections of your content for positioning and styling with CSS. Div’s are used for large sections and span’s are more commonly used for just a few words. We’ll start with the div element and add some style. Since we haven’t worked with positioning yet, we’ll leave that alone. The first example below shows how a div works.

div and span html css

div and span html css display

In the example, we have three h1 elements and three p elements. The first and second h1 and p elements are embedded in a div. We essentially grouped this section of code. Up in the CSS, we created a div rule that just changes the background color to #0000ff(blue). I’ve also included an HTML comment and highlighted it. Although the code in the recent lessons would have run in a browser, I accidentally left out the opening HTML tag. I wanted to notify you of this for future reference, because if you remember, way back in the beginning of this tutorial series; the first line is the doctype declaration, and it tells the browser what type of document to expect. The opening and closing <html> tags are separate from this. Back to our example. In our displayed page, we can see that everything contained inside of the div element has a background color of blue. I used a background color to show you exactly what the div element affected in this case. In the next example, I will add a few more declarations to our CSS div rule, and show you how the span works.

div span css html code

div span html css display

Looking at our div rule first, we have two more declarations in it. One to give 15 pixels of padding(space between text and the border), and one to make the font color white. When we look at our displayed page, we see that both the h1 and p elements have white text and spacing between the text and the border from the padding declaration. This refers back to our INHERITANCE AND OVERRIDING lesson. The div is the parent element of the h1’s and p’s nested inside of it. The h1’s and p’s are children of div and inherit its styles. There are so many more things that can be done with divs. We will be learning about CSS classes and id’s very soon, which is easily two of the most useful tools in the CSS language. Classes, id’s, div’s, and span’s all work together in harmony, so you’ll gain the ability to control every aspect of your website design individually.

The final lesson to be learned here is how the span works. Whether you use inline CSS or CSS in a stylesheet, spans are very useful for things like highlighting one or more words, bolding, italicizing, and so much more. They work very similar to the div, but are meant for small areas. Span’s can even be applied to a single letter. In the final example, I have added two span elements to our HTML code and highlighted them. I put one of them inside of the div, and one outside of it. Up in the CSS, we have a span rule that just makes the background green. In the display image, the background color of both spans have been colored green. Using a span element as a “virtual highlighter” is a very common use. Normally the span would be assigned a class. For example, a span with a class name of yellow could be set up to highlight(or make the background yellow) wherever it is used.

We are going to leave it at that with div’s and span’s for now. From this point on, we’ll be using them periodically. Thanks for reading.

Source Code

<!DOCTYPE html>
<html><!--I have accidently left out this opening html tag in recent post images.-->
<head>
<title>DIV AND SPAN</title>
<style>
div{
background-color: #0000ff;
padding: 15px;
color: white;
}
span{
background-color: #00ff00;
}
</style>
</head>
<body>
<div>
<h1>First Heading</h1>
<p>First <span>paragraph</span> element.</p>
<h1>Second Heading</h1>
<p>Second paragraph element.</p>
</div>
<h1>Third Heading</h1>
<p><span>Third paragraph</span> element.</p></body>
</html>

posted by Clear Coded Programming

Please Leave a comment

%d bloggers like this: