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

    .button1{
        color: red;
    }
  

• ID selectors -Select ID

    #but{
        color:orange;
    }
  

Pseudo-classes

This specifies a special state for the selected elements

• Hover

• active

• checked

• nth-of-type

• visited

• link

• focus

    a:hover {
    }
  
    a:active{
    }
    ......
  

Pseudo-Elements

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

• first-letter

• first-line

• selection

• after

before

a::after{
}
a::first-letter{
}
......

Position

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.