CSS Selectors, Types of Selectors, Comment in CSS

0
67
css

CSS Selectors

While HTML has labels, CSS has selectors. CSS Selectors are the names given to styles in inside and outside templates. In this CSS Category, we will focus on HTML selectors, which are essentially the names of HTML labels and are utilized to change the style of a particular kind of component.

A style run is made of three sections −

Selector − A selector is an HTML tag at which a style will be connected. This could be any tag like <h1> or <table> and so on.

Property – A property is a kind of quality of HTML tag But basically, all the HTML characteristics are changed over into CSS properties. They could be color, background and so on.

Values – Values are allocated to properties. For instance, a color property can have value either blue or #0000FF.

css selectors

For each selector there are “properties” inside curly brackets, value is given to the property following a colon (NOT an “equals” sign). Semi-colons are used to separate the properties.

body {
   font-size: 14px;
   color: navy;
   }

This will apply the given values to the font-size and color properties to the body selector.

Types of CSS Selectors

  • The Universal Selectors

Instead of choosing components of a particular sort, the all-inclusive selector just matches the name of any component sort −

* { 
   color: black; 
   font-size: 12px;
 }
  • The Class Selectors

The class selector selects HTML elements with a specific class attribute. It is used with a period character (.) followed by the class name.

.center {  
    text-align: center;  
    color: blue;  
}
  • The ID Selectors

The id selector selects the id attribute of an HTML element to select a specific element. An id is always unique within the page so it is chosen to select a single, unique element.

It is written with the hash character (#), followed by the id of the element.

#center {  
    text-align: center;  
    color: blue;  
}
  • The Element Selector

The element selector selects the HTML element by name.

p{  
    text-align: center;  
    color: blue;  
}
  • The Attribute Selectors

The attribute selector selects the HTML element attribute. The style rule below will match all the input elements having a type attribute with a value of text −

input[type = "text"]{
    color: blue; 
}
  • Grouping Selectors

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

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

CSS Comments

Comments are used to explain the code and may help when you edit the source code at a later date.

Comments are ignored by browsers.

A CSS comment starts with /* and ends with */. Comments can also span multiple lines:

p {
    color: blue;
    /* This is a single-line comment */
    text-align: center;
}

/* This is
a multi-line
comment */

LEAVE A REPLY

Please enter your comment!
Please enter your name here