Selectors in CSS | Free Front End Course

Selectors in CSS

CSS, Cascading style sheet use to give style to raw HTML. CSS Plays the most important role in front end and in this part we will cover the basics of HTML selectors in CSS, Element selector in CSS, ID selector in CSS, Class selector in CSS, Universal selector in CSS.



Selectors in CSS

CSS selectors are used to “find” (or choose) the HTML elements to style. CSS selectors are divided into five categories:

  • CSS Selectors, that are simple (select elements based on name, id, class)
  • Selectors for combinators (select elements based on a specific relationship between them)
  • Selectors for pseudo-classes (select elements based on a certain state)
  • For pseudo-elements (select and style a part of an element)
  • Selectors for attributes (select elements based on an attribute or attribute value)

Element Selector in CSS

The element selector uses the element name to pick HTML elements.

p {
  text-align: center;
  color: orange;

  background color : grey;
}

This will modify all <p> tag element in body according to the conditions

ID Selector in CSS

The id selector uses an HTML element’s id attribute to choose a specific element.

Because each element’s id is unique within a page, the id selector is used to pick just one!

Write a hash (#) character followed by the element’s id to choose an element with a specified id.

#tih {
  text-align: center;
  color: orange;
  background color : grey;
}

An Id name cannot start with a number.

Class Selector in CSS

The class selector is used to find HTML components that have a specified class property.

Write a period (.) character followed by the class name to select components with that class.

.tih {
  text-align: center;
  color: orange;
  background color : grey;
}

A class name cannot start with a number

p.tih {
  text-align: center;
  color: orange;
  background color : grey;
}

It will select the specific element from a class.

Universal Selector in CSS

The Universal selector (*) selects all the html element on the page and helps to modify them all together

* {
  text-align: center;
  color: orange;
  background color : grey;
}


Leave a Comment

Your email address will not be published. Required fields are marked *

0

Tech Info