CSS Selectors , Pseudo classes ,Pseudo classes ,and Positions

CSS Selectors , Pseudo classes ,Pseudo classes ,and Positions

CSS stands for Cascading Style Sheets. It is used to target any element in HTML and work on it. Using CSS you give styling to your web page which includes the colors, fonts, alignment, transitions, transformation and many more things.

Selectors in CSS

Selectors tell which elements or which part of HTML to work on.

  • Universal Selectors-Selects all

          background-color: yellow;
  • Element Selectors-Select element

      h1 {
        color: blue;
  • Class Selectors-Select class

          color: red;
  • ID selectors -Select ID



This specifies a special state for the selected elements

  • Hover

  • active

  • checked

  • nth-of-type

  • visited

  • link

  • focus

      a:hover {


This lets you style a specific part of the selected elements.

  • first-letter

  • first-line

  • selection

  • after




The position decides how an element is positioned in a document. It sets the top, right, bottom, and left properties which determine the final position.

  • Static -The top, left, right and bottom has no effect. This is the default value.

  • Relative - This value positions an element relative to its normal position in the document flow, without taking it out of the flow. It allows you to use properties like top, right, bottom, and left to adjust the element's position.

  • Absolute -the element is removed from the normal document flow and no space is created for the element in the page.

  • Fixed -It is positioned relative to the initial containing block established by the viewport.

  • Sticky -it scrolls with the page ut always remains on the page.