Div's and Span's - HTML, CSS, WEBSITE DEVELOPMENT AND DESIGN (2015)

HTML, CSS, WEBSITE DEVELOPMENT AND DESIGN (2015)

Chapter 18: Div's and Span's

This chapter is going to be more of a discussion about these two elements. First of all they are HTML elements and it didn't make sense to learn about these until we got into CSS. Because they kind of need CSS to actually do something.

Div's

The div element is used to divide your HTML content up into logical sections for things like positioning and styling. You can have one or multiple elements inside of a div. An example of the use of two div's follows, Don't write this code in your text editor. We'll be using div's a lot when we build our website layout. The purpose of this is just to explain to you what a div is and how it works.

<div id="navigation">

<ul>

<li>Home</li>

<li>News</li>

<li>Pictures</li>

<li>Contact</li>

</ul>

</div>

<div id="maincontent">

<h1>Welcome to my Website</h1>

<p>Check out my news section and the pictures page.</p>

</div>

In the above example we have two div's. One we used to hold a navigation menu and the other is used to hold our main content section. So we name them accordingly. One of the main uses of a div is to control how you position your elements. But they can also be used for inheriting styles. Remember the parent/child hierarchy again. Same concept. And like I've said before. There are many, many ways to style your elements. Especially multiple elements at the same time. Now in the example above if we did enter this into our HTML it wouldn't do anything. We would have to make some CSS rules to tell the browser what to do with our div's. So as far as this code goes, we divided the code into two sections but didn't tell the browser what to do with them. And therefore your page would look exactly the same.

Span's

The span element is similar to a div but is used inline inside of your HTML content. And for much smaller things. Like a word or just a few words. One of the most common uses of a span is to highlight a word. So we'll do that here to show you how to use it. Let's use the paragraph element that we gave the class="gray" to. We're gonna highlight a few words with yellow as if we used an actual highlighter. In your paragraph enter this code around these words:

<span class="highlightyellow">text color, size, and alignment properties</span>

So we entered a span element around these six words in our paragraph.

¨We have to give it a class and a name. The name we gave is "highlightyellow". You could name it anything you want to. For example "yellowbackground". And the span element has an opening and a closing tag just like the div.

Once again if you save and run your code here nothing would happen. We have to add some CSS for it to do something. Add this new CSS rule somewhere in between your style element tags:

.highlightyellow {

background-color: yellow;

}

¨We specify that this is a class rule with the . dot. And this class does one thing. It changes the background of the text to yellow.

¨Notice that we used a class for the span element and an id for the div element. That's because we would probably use a span multiple times throughout our pages and inside of different HTML elements where as the div is more unique so we use an id.

Save and run your page and now you have the words that we surrounded with the span tags highlighted yellow. Some other uses for the span element would be to bold or italicize text. So you would have a .bold rule and a .italic rule in that case. And you would use it over and over. You can even combine the classes. For example if you wanted to bold and italicize some text you would create a class with a name of .boldital or something similar. Then you could use this rule anywhere in your website.

One other thing you should know here is that in the example above we used a class to add the CSS to our span. But you could use inline styling as well. Again it's up to you what way you prefer to code. And using a span with inline CSS style would just look like this:

<span style="background-color: yellow">text color, size, and alignment properties</span>

You wouldn't have to create a class rule in your internal style sheet because you are styling inline. And you could set multiple properties here. But you can see how this could get messy and somewhat confusing if you did this throughout all of your elements. I recommend using either an internal or external style sheet. The external style sheet is the most common method used because you control all of your CSS from one document or multiple documents for extremely large websites. You'll see that later in this book.

Quiz Chapter 18

1.Where would you use a span instead of a div?

2.What is the most common use of a div?

3.Would you use a class or an id for a span?