CSS Rules

CSS rule is a fundamental building block of cascading style sheets. We use it to style HTML Elements.

A rule consists of:

           Selector -> which elements the rules applied to

           Declaration block -> one or more style declarations inside { }

           Declaration -> property + value pair

CSS Rule Structure

            Selector{

            Property: value

 }

. Selector: Targets HTML Elements (head, body, div, p, etc.)

. Property: The style you want to change (color, font-size, padding, etc.)

. Value: The settings for that property (red, 13px, 10px, etc.)

Types of CSS Rules

  Element selector -> p {font-size: 12px;}

  Class selector -> .div{padding: 10px;} 

  ID selector -> #body{background-color: wheat;}

  Group selector -> h1, body, div, p{font-family: arial;}

  Descendant selector -> div p{font-size: 12px;}

  Pseudo-classes -> a:hover{color: blue;}

  Pseudo-elements -> p::first-line{font-weight: bold;}