CSS TUTORIAL: LEARN GROUPING AND NESTING

Hello, friends today we learn about Grouping and Nesting of selectors in CSS. So, this tutorial will give you the exact method of how the grouping and nesting of selectors work.

Grouping:

So, guys firstly we learn about the grouping of selectors. then we learn nesting on selectors.

We can group any number of selectors that have common properties. Grouping helps us in writing less and systematic code. So. let’s see some examples of code.

Watch This Tutorial On YouTube:

Code:

first we are going to create the HTML file of this code and then we make CSS file.

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<!---- The page title -->
	<title>Grouping in Selectors</title>
	<!---- External css file main.css -->
	<link rel="stylesheet" type ="text/css" 
	href ="main.css">
	
	</head>
	
	<body>
		
		<p> You are Awesome </p>
		
		<div>I Love developersnaton.co.in website</div>
		
	</body>
		
</html>

this is our HTML code let’s create CSS code.

p, div {color: navy;}

Output:

Explanation:

In this code, you will find we are giving the same values for paragraph tag and div tag. Because they have the same value as the color. So, we make them as a commonly share property and value.

You will notice that we separate the p and div using ( , ). This method is very helpful to make code short and sweet.

Nesting:

Now we can group the selectors. Let’s see how we can make nesting of selectors.

In CSS we apply styles to a selector within selectors. Let’s have a look at the example to clear the concept.

Code:

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<!---- The page title -->
	<title> Nesting Selectors </title>
	<!---- External css file main.css -->
	<link rel="stylesheet" type ="text/css" 
	href ="main.css">
	
	</head>
	
	<body>
		
		<p> DEVELOPERS NATION <p>
		
		<div id="dn"> developersnaton.co.in 
		website very useful
		<p>I'm visit weekly this website</p>
		</div>
		
		<p> I'm learn HTML from this website </p>
		
	</body>
		
</html>

This is our HTML code let’s make CSS code.

	
	p{ color: lime; }
	
	div { background-color: yellow;}
	
	#dn p { color: orangered; }

So, this is our CSS document make sure that these document in the same directory. If the CSS and HTML on different folders the CSS in not work on that condition. Let’s look the output.

Output:

For opening the document in the browser you can click on the file you make which have ( .html ) format. Or you copy the file path and paste on the browser’s URL and press the enter to see the output.

Explanation:

In this example, we defined the lime color for all the p elements. After that, we give the div element to the yellow background.

Inside the div element, we define the orange color for the p element. Which is inside the div element. So, we can see that which paragraph tag is inside the div element his color was orange and which is outside of the div they are in lime color.

Guy’s if you don’t have any idea about selectors then you read the following tutorial on selectors.