CSS Tutorial 7: Identification and grouping

Usually you need to apply a distinct kind to a unique detail or a exact group of elements. In this lesson, we can take a better appear at how you can use type and identification to specify homes for chosen factors. Identification and grouping

How can you color one particular headline otherwise than the opposite headlines for your website? How can you team your hyperlinks into exceptional categories and provides every class a targeted type? These are simply examples of questions we will be able to answer on this lesson. Identification and grouping

CSS Tutorial 7: Identification and grouping

Grouping elements with class

Let’s say that we’ve two lists of links of specific grapes used for white wine and purple wine. The HTML code would appear like this:

	<p>Grapes for white wine:</p>
	<ul>
	<li><a href="ri.htm">Riesling</a></li>
	<li><a href="ch.htm">Chardonnay</a></li>
	<li><a href="pb.htm">Pinot Blanc</a></li>
	</ul>

	<p>Grapes for red wine:</p>
	<ul>
	<li><a href="cs.htm">Cabernet Sauvignon</a></li>
	<li><a href="me.htm">Merlot</a></li>
	<li><a href="pn.htm">Pinot Noir</a></li>
	</ul>
	

Then we would like the white wine links to be yellow, the purple wine hyperlinks to be purple and the rest of the existing links on the webpage to stay blue. Identification and grouping

To achieve this, we divide the hyperlinks into two classes. This is done via assigning a class to each and every link utilizing the attribute classification. Identification and grouping

Let us try to specify some classes in the example above:

	
	<p>Grapes for white wine:</p>
	<ul>
	<li><a href="ri.htm" class="whitewine">Riesling</a></li>
	<li><a href="ch.htm" class="whitewine">Chardonnay</a></li>
	<li><a href="pb.htm" class="whitewine">Pinot Blanc</a></li>
	</ul>

	<p>Grapes for red wine:</p>
	<ul>
	<li><a href="cs.htm" class="redwine">Cabernet Sauvignon</a></li>
	<li><a href="me.htm" class="redwine">Merlot</a></li>
	<li><a href="pn.htm" class="redwine">Pinot Noir</a></li>
	</ul>

We can hereafter define detailed properties for hyperlinks belonging to whitewine and redwine, respectively.

	
	a {
		color: blue;
	}

	a.whitewine {
		color: #FFBB00;
	}

	a.redwine {
		color: #800000;
	}
	

As shown in the illustration which you can outline the houses for elements which belong to a certain classification by utilizing .Classname within the sort sheet of the document.

Identification of element using id

Furthermore to grouping factors, you would must identify one specified element. This is achieved via using the attribute identification.

What’s certain concerning the attribute identity is that there cannot be two factors within the equal record with the equal identity. Every identity has to be certain. In other cases, you should utilize the category attribute instead. Now, allow us to take a appear at an example of a viable usage of id:

	
	<h1>Chapter 1</h1>
	...
	<h2>Chapter 1.1</h2>
	...
	<h2>Chapter 1.2</h2>
	...
	<h1>Chapter 2</h1>
	...
	<h2>Chapter 2.1</h2>
	...
	<h3>Chapter 2.1.2</h3>
	...
	

The above could be headings of any report cut up into chapters or paragraphs. It would be natural to assign an identity to each and every chapter as follows:

	
	<h1 id="c1">Chapter 1</h1>
	...
	<h2 id="c1-1">Chapter 1.1</h2>
	...
	<h2 id="c1-2">Chapter 1.2</h2>
	...
	<h1 id="c2">Chapter 2</h1>
	...
	<h2 id="c2-1">Chapter 2.1</h2>
	...
	<h3 id="c2-1-2">Chapter 2.1.2</h3>
	...
	

Let us say that the headline for chapter 1.2 have got to be in red. This can also be accomplished hence with CSS:

	
	#c1-2 {
		color: red;
	}
	

As shown in the instance above that you can outline the residences in a detailed detail with the aid of utilizing #id in the stylesheet of the file. Identification and grouping

Summary:

On this lesson we’ve got realized that through the usage of the selectors, classification and identity, you might be able to specify properties for precise elements.

Within the subsequent lesson, we will take a better seem at two HTML-factors which is largely used in connection with CSS: <span> and <div>. Identification and grouping