CSS Tutorial 8: Grouping of elements

The factors <span> and <div> are used to workforce and constitution a document and can generally be used at the side of the attributes type and id. Grouping of elements

CSS Tutorial 8: Grouping of elements

In this lesson, we will be able to take a more in-depth look at using <span> and <div> as exactly these two HTML elements are of imperative value in the case of CSS.

  • Grouping with <span>
  • Grouping with <div>

Grouping with <span>

The element <span> is what you would call a neutral detail which does not add some thing to the report itself. But with CSS, <span> can be utilized to add visual points to specific parts of text for your records. Grouping of elements

An instance of this could be this Benjamin Franklin citation:

	
	<p>Early to bed and early to rise
makes a man healthy, wealthy and wise.</p>
	

Lets us say we wish what Mr. Franklin sees as the benefits of now not drowsing your day away emphasized in red. For that rationale, we are able to mark the benefits with <span>. Each and every span is then introduced a category, which we will define in our variety sheet:

	
	<p>Early to bed and early to rise
makes a man <span class="benefit">healthy</span>,
<span class="benefit">wealthy</span>
and <span class="benefit">wise</span>.</p>
	

The CSS belonging to it:

	
	span.benefit {
		color:red;
	}
	

Of course you too can use id so as to add sort to the <span>-factors. Simply as long as you recollect, that you’ll need to apply a specified identification to every of the three <span>-factors, as you learned within the previous lesson. Grouping of elements

Grouping with <div>

Whereas <span> is used within a block-level element as seen in the previous example, <div> is used to group one or more block-level elements. Grouping of elements

Aside from this difference, the grouping with <div> works in more or less the same way. Let us take a look at an example with two lists of U.S. presidents divided into their political affiliations:

	
	<div id="democrats">
	<ul>
	<li>Franklin D. Roosevelt</li>
	<li>Harry S. Truman</li>
	<li>John F. Kennedy</li>
	<li>Lyndon B. Johnson</li>
	<li>Jimmy Carter</li>
	<li>Bill Clinton</li>
	</ul>
	</div>

	<div id="republicans">
	<ul>
	<li>Dwight D. Eisenhower</li>
	<li>Richard Nixon</li>
	<li>Gerald Ford</li>
	<li>Ronald Reagan</li>
	<li>George Bush</li>
	<li>George W. Bush</li>
	</ul>
	</div>
	

And in our style sheet, we can utilize the grouping in the exact same way as above:

	
	#democrats {
		background:blue;
	}

	#republicans {
		background:red;
	}
	

In the examples above, we have only used <div> and <span> on very simple things such as text and background colors. Both elements have the potential to do much more advanced things. However this will not be introduced in this lesson. We will look into these later in this tutorial.

Summary

In lesson 7 and 8, you’ve got discovered concerning the selectors id and class and the elements span and div.

You will have to now be capable to group and determine, roughly, all elements of a record, which is a big step within the course of studying CSS. In lesson 9we will introduce you to the box model.