CSS Selectors

 


A CSS selector selects the HTML element you want to style.

CSS selectors are used to "find" (or select) the HTML elements you want to style.

CSS element Selector

  • The element selector selects HTML elements based on the element name.
  • Here, all <p> elements on the page will be center-aligned, with a red text color:
p {
  text-align: center;
  color: red;
}
CSS id Selector
  • The id selector uses the id attribute of an HTML element to select a specific element.
  • The id of an element is unique within a page, so the id selector is used to select one unique element!
  • To select an element with a specific id, write a hash (#) character, followed by the id of the element
#para1 {
  text-align: center;
  color: red;
}

CSS class Selector
  • The class selector selects HTML elements with a specific class attribute.
  • To select elements with a specific class, write a period (.) character, followed by the class name
.center {
  text-align: center;
  color: red;
}

CSS Universal Selector
  • The universal selector (*) selects all HTML elements on the page.
* {
  text-align: center;
  color: blue;
}

CSS Grouping Selector
  • grouping selector selects all the HTML elements with the same style definitions
h1 {
  text-align: center;
  color: red;
}

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

p {
  text-align: center;
  color: red;
}
  • It will be better to group the selectors, to minimize the code.
  • To group selectors, separate each selector with a comma.
h1, h2, p {
  text-align: center;
  color: red;
}


Related Posts:

  • CSS Combinators It explains the relation between multiple or single selectors. There are four major combinators that we will be looking at here.Descendant Selec… Read More
  • Pseudo-classes What are Pseudo-classes?A pseudo-class is used to define a special state of an element.For example, it can be used to:Style an element when a us… Read More
  • CSS Overflow Sometimes the content shown is too large to be visible in a single line or division of the website. So, to avoid loss of that information we can… Read More
  • flexbox What is Flexbox?flex is used to make it easier to design the layout of the website.It is used to create a flexible structure without using float… Read More
  • Media Query What is a Media Query?Media query is used to make the webpage capable of the device.Mainly it is used to make responsive web designs.With media … Read More

0 Comments:

Post a Comment

Do leave your comments