CSS selectors

In CSS selectors are patterns used to select the element's you want to style. Use our CSS Selector Tester to demonstrate the different selectors.

There are several different types of selectors in CSS.

CSS Class Selector
CSS Id Selector
CSS Universal Selector
CSS Element Selector
CSS Group Selector

and more selectors etc...

Class Selector

The class selector selects HTML elements with a specific class attribute. It is used with a period character . (full stop symbol)

<!DOCTYPE html>  
<html>  
<head>  
<title>CSS Selectors - Class Selector</title> 
</head>  
<body>  

<style type="text/css">
.class_selector{
    color:#0099da;
	font-weight:bold;
	font-style:italic;
	text-align: center;
}
</style>

<h1 class="class_selector">Free Time Learning (F T L)</h1>
<h3 class="class_selector">www.freetimelearning.com</h3> 
  
</body>  
</html>

Output :

Free Time Learning (F T L)

www.freetimelearning.com

ID Selector

The id selector selects the id attribute of an HTML element to select a specific element. It is written with the hash character (#), followed by the id of the element.

<!DOCTYPE html>  
<html>  
<head>  
<title>CSS Selectors - ID Selector</title> 
</head>  
<body>  

<style type="text/css">
#id_selector{
	color:#0099da;
	font-weight:bold;
	font-style:italic;
	text-align: center;
}
#id_selector_2{
	color:#F60;
	font-weight:bold;
	font-style:italic;
	text-align: center;
}
</style>

<h1 id="id_selector">Free Time Learning (F T L)</h1>
<h3 id="id_selector_2">www.freetimelearning.com</h3> 
  
</body>  
</html>

Output :

Free Time Learning (F T L)

www.freetimelearning.com

Universal Selector

The universal selector is used as a wildcard character(*). It selects all the elements on the pages.

<!DOCTYPE html>  
<html>  
<head>  
<title>CSS Selectors - Universal Selector</title> 
</head>  
<body>  

<style type="text/css">
* {
   color:#6C0;
   text-align:center;
} 
</style>

<h1>Free Time Learning (F T L)</h1>
<h3>www.freetimelearning.com</h3> 
  
</body>  
</html>

Output :

Free Time Learning (F T L)

www.freetimelearning.com

Element Selector

The element selector selects the HTML element by name.

<!DOCTYPE html>  
<html>  
<head>  
<title>CSS Selectors - Element Selector</title> 
</head>  
<body>  

<style type="text/css">
h1{  
	color:#F00;
	font-weight:bold;
    text-align:center;  
     
} 
p{  
	color:#00F;
	font-weight:bold;
    text-align:center;  
     
}
</style>

<h1>Free Time Learning (F T L)</h1>
<p>www.freetimelearning.com</p> 
  
</body>  
</html>

Output :

Free Time Learning (F T L)

www.freetimelearning.com

Group Selector

The grouping selector is used to select all the elements with the same style definitions. Grouping selector is used to minimize the code. Commas are used to separate each selector in grouping.

<!DOCTYPE html>  
<html>  
<head>  
<title>CSS Selectors - Group Selector</title> 
</head>  
<body>  

<style type="text/css">
h1, h3, p, .my_font { 
    color:#F3C;
	text-align:center;
	font-weight:bold; 
}  
.my_font{ font-size:18px; font-style:italic;}
</style>

<h1>Free Time Learning (F T L)</h1>
<h3>www.freetimelearning.com</h3> 
<p>www.freetimelearn.com</p> 
<div class="my_font">Free Time Learning (www.freetimeleaning.com)</div>
  
</body>  
</html>

Output :

Free Time Learning (F T L)

www.freetimelearning.com

www.freetimelearn.com

Free Time Learning (www.freetimeleaning.com)

CSS Tutorial