CSS rules

In CSS, a “rule” (often called a “CSS rule” or “CSS rule set”) is a fundamental concept used to apply styles to HTML elements. Each CSS rule defines how a particular set of HTML elements should be styled according to specified criteria. A CSS rule consists of a selector and a declaration block.

Components of a CSS Rule

1. Selector:
   • The selector targets one or more HTML elements that the CSS rules will apply to. Selectors can be simple (e.g., element names) or complex (e.g., class names, IDs, or attribute selectors).
2. Declaration Block:
   • The declaration block contains one or more declarations enclosed in curly braces {}. Each declaration includes a property and a value separated by a colon :.

Syntax of a CSS Rule

• Selector: Specifies which HTML elements to style.
• Property: Defines what aspect of the element to style (e.g., color, font-size, margin).
• Value: Defines the value for the property (e.g., red, 16px, 10%).

Example of a CSS Rule

In this example:

• Selector: h1
  • This rule applies to all <h1> elements in the HTML document.
• Declarations:
  • color: blue; sets the text color of <h1> elements to blue.
  • font-size: 24px; sets the font size of <h1> elements to 24 pixels.
  • margin-bottom: 10px; sets the bottom margin of <h1> elements to 10 pixels.

Types of Selectors

• Type Selector: Targets elements by their tag name.
  css

  p { /* Styles all <p> elements */ }

• Class Selector: Targets elements with a specific class attribute.
  css

  .class-name { /* Styles elements with class="class-name" */ }

• ID Selector: Targets an element with a specific ID attribute (should be unique within the document).
  css

  #unique-id { /* Styles the element with id="unique-id" */ }

• Attribute Selector: Targets elements based on attributes.
  css

  [type="text"] { /* Styles input elements with type="text" */ }

• Pseudo-class Selector: Targets elements in a specific state.
  css

  a:hover { /* Styles <a> elements when hovered over */ }

• Pseudo-element Selector: Targets a specific part of an element.
  css

  p::first-line { /* Styles the first line of all <p> elements */ }


Combining Selectors

CSS allows you to combine selectors to target elements more precisely:

• Descendant Selector: Targets elements that are descendants of a specified element.
  css

  div p { /* Styles all <p> elements inside <div> elements */ }

• Child Selector: Targets elements that are direct children of a specified element.
  css

  ul > li { /* Styles <li> elements that are direct children of <ul> elements */ }

• Adjacent Sibling Selector: Targets an element that is immediately preceded by a specified element.
  css

  h1 + p { /* Styles the first <p> immediately following an <h1> */ }

• General Sibling Selector: Targets elements that are siblings following a specified element.
  css

  h1 ~ p { /* Styles all <p> elements that are siblings following an <h1> */ }


CSS Rule Priority and Specificity

CSS rules are applied based on specificity and the order in which they appear:

• Specificity: Determines which rules take precedence when multiple rules apply to the same element. Specificity is calculated based on the type of selectors used (e.g., IDs are more specific than classes).
• Order: When multiple rules with the same specificity apply, the rule that appears last in the CSS file takes precedence.