CSS Introduction

CSS Tutorial What is CSS CSS Syntax CSS Selector How to include CSS CSS Comments

CSS Attributes

CSS Background CSS Border CSS Display CSS Float CSS Font CSS Color CSS Hover CSS Important CSS Line-height CSS Margin CSS Opacity CSS Filter CSS Images CSS Overflow CSS Padding CSS Position CSS Vertical align CSS White space CSS Width Word-wrap in CSS Box-shadow in CSS Text-transform in CSS CSS Outline CSS Visibility CSS Counters CSS Clear fix CSS Icons CSS Justify-content Text-decoration in CSS CSS Lists CSS nth selector CSS Sticky CSS Background-clip CSS Checkbox-style CSS Letter-spacing CSS Navigation bar CSS Overlay CSS Root CSS Specificity CSS Text-indent CSS Text-stroke CSS Zoom CSS Order CSS Descendent selector CSS Clip CSS calc() CSS Background-blend-mode CSS radio-button CSS Superscript and subscript CSS Text-effects CSS Text-align CSS Variables CSS Page-break-before CSS Page-break-inside CSS Page-break-after CSS Content property CSS Word-spacing CSS Animation CSS @keyframes rules CSS Pseudo-classes CSS Pseudo-elements CSS Radial-gradient CSS Translate CSS Gradients CSS z-index CSS Loaders CSS Units CSS Transition CSS Masking CSS Arrow CSS Pagination

Misc

What is Bootstrap CSS What is CSS used for Difference between HTML and CSS How to center a table in CSS What is a CSS File How to center a button in CSS How to change background color in CSS How to change the font in CSS How to change font size in CSS How to resize an image in CSS How to get rid of bullet pioints in CSS Is CSS a programming language Grid Vs Flexbox in CSS How to edit CSS in WordPress How to use google fonts in CSS

CSS Selector

CSS Selector: There are some selectors used in CSS, which allows us to choose the content we wish to style. Various selectors are considered as the separation of the set of CSS rules. They choose elements of HTML based on its class, type, id, and attribute.

Here are some selector types in CSS which are as follows:

  • Element Selector
  • Id Selector
  • Class Selector
  • Universal Selector
  • Group Selector

Element Selector

The element selector of CSS is used to select the element of HTML by the name. The example of element selector is as follows:

<!DOCTYPE>
 <html>
 <head>
 <title> Element Selector of CSS </title>
 <style>
 p {
 color: grey;
 text-align: center; 
 }
 </style>
 </head>
 <body>
 <p> This is an example of Element Selector </p>
 <p> hellow! </p> 
 </body>
 </html> 

Output:

CSS Selector

Id Selector

This selector of CSS selects the HTML element’s attribute id to choose a particular element. The id is always considered special inside the page. Thus, it is selected to choose a unique and single element. The id is defined with a hash character (#), pursued by the element’s id.

The example of id selector is as follows which is defined with id “p”:

<!DOCTYPE>
 <html>
 <head>
 <title> ID Selector of CSS </title>
 <style>
 #p { 
 color: blue;
 text-align: center;
 }
 </style>
 </head>
 <body>
 <p id="p"> ID Selector </p> 
 <p> This is not troubled via the style </p>
 </body>
 </html> 

Output:

CSS Selector

Class Selector

These selectors choose the elements of HTML along with a particular attribute of class. A class selector can be used with the period character (Full stop). It is pursued by the name of the class. Usually, a class must not be begin with the number.

The example of the class selector is shown below:

In this, a class is represented by “class1”:

<!DOCTYPE>
 <html>
 <head>
 <title> Class Selector of CSS </title>
 <style>
 .class1 { 
 color: red;
 text-align: center;
 }
 </style>
 </head>
 <body> 
 <h1 class="class1"> Class Selector </h1>
 <h2 class="class1"> This is an example of Class Selector </h2>
 </body>
 </html> 

Output:

CSS Selector

Specific Element Selector: To define a specific element of troubled HTML, we can use the name of the element with the class selector.

Following is an example for selecting a specific element:

<!DOCTYPE>
 <html>
 <head>
 <title> Specific element Selector of CSS </title>
 <style>        
 h1.class1 {  
 color: brown; 
 text-align: center;
 }
 </style>
 </head>
 <body> 
 <h1 class="class1"> Specific Element Selector </h1>
 <p class="class1"> This is an example for selecting a specific element </p>
 </body>
 </html> 

Output:

CSS Selector
  • Various elements of HTML can also be referred to as one or more classes.

Example:

In the following example, element <p> is written according to the class=”class1” and to the class=”large”:

<!DOCTYPE>
 <html>
 <head>
 <title> One or More class Selector</title>
 <style>            
 p.class1 { 
 color: blue;
 text-align: center;
 }
 p.large {
 font-size: 200%;
 }
 </style> 
 </head>
 <body>
 <h1 class="class1"> One or More Class Selector </h1>
 <p class="class1"> This is an example for selecting one or more elements </p>
 <p class="class1 large">This is a paragraph which will be blue, center-aligned, and written in a large font-size. </p> 
 </body>
 </html> 

Output:

CSS Selector

Universal Selector

CSS has a unique kind of selector i.e., universal selector. It is applied on the elements as the wildcard character. These selectors select every element which is displayed over the page.

The example of universal selector is as written as below:

<!DOCTYPE>
 <html>
 <head>
 <title> Universal Selector</title>
 <style>             
 * {
 color: red; 
 font-size: 20px;
 }
 </style>
 </head>
 <body>
 <h1> Universal Selector </h1>
 <p> This is an example for selecting all the elements available on the page </p> 
 <p id="class1">This is a paragraph which will be blue, center-aligned, and written in a large font-size. </p>
 <p>hello!</p>
 </body>
 </html> 

Output:

CSS Selector

Group Selector

Various group selectors of CSS are applied to select every element including similar style definitions. A lengthy code can be reduced by the use of the group selectors. Commas can be used to isolate all the selectors in the grouping.

Take a look on the following code i.e., written without the use of group selector:

h1 {
 color: red;
 text-align: center;
 }          
 h2 {
 color: red; 
 text-align: center;
 }
 p {
 color: red;
 text-align: center;
 } 

We need to describe the properties of CSS for every element. These properties are grouped in the following ways:

h1,h2,p {
 color: red;
 text-align: center;
 }                  
 Let’s take a complete example of group selector which is as follows:
 <!DOCTYPE>
 <html>
 <head> 
 <title> Group Selector of CSS </title>
 <style>            
 h1,h2,p {
 color: red; 
 text-align: center;
 }
 </style> 
 </head>
 <body>
 <h1> Group Selector </h1>
 <h2> This is an example of Group Selector </h2>
 <p>This is not affected</p> 
 </body>
 </html> 

Output:

CSS Selector



ADVERTISEMENT
ADVERTISEMENT