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 Box Model  In CSS, the term "box model" is used when talking about design and layout.The CSS box model is essentially a box that wraps around every H… Read More
  • CSS Padding CSS works on a box model structure, where elements are packed according to the sequence of the imageThe padding property defines the space betwe… Read More
  • CSS Margin CSS MarginsMargins are used to create space around elements, outside of any defined bordersWith CSS, you have full control over the margins. The… Read More
  • CSS Outline CSS OutlineAn outline is a line drawn outside the element's border.CSS has the following outline properties:outline-styleoutline-coloroutline-wi… Read More
  • CSS Height, Width and Max-widthThe CSS height and width properties are used to set the height and width of an element.The CSS max-width property is used to set the maximum width of … Read More

0 Comments:

Post a Comment

Do leave your comments