CSS - Cascading Style Sheets

What is a CSS Rule?

CSS or Cascading Style Sheets, is a language used to describe the appearance and layout of a web page written in HTML.

CSS is used to :
-> change colors, fonts, sizes, spacing
-> control layout
-> adapt the page to different screens
-> add simple visual effects

To use CSS properly, the creation of special elements called rules is necessary. To create applicable styles for our HTML, a unique structure must be written in CSS. This structure, or rule, is made up of three elements: a selector, a property, and a value :

selector {
property: value;
}

The syntax of a CSS rule is simple. After the selector, curly braces "{}" are used to enclose the rule, with each property followed by a colon ":" and its value. Each property-value pair ends with a semicolon ";"

1. Selectors

A selector is a symbol or a combination of symbols used in CSS to target one or more HTML elements in order to apply style rules to them.

In CSS3, there are 10 distinct types of selectors :

  • *  {} : Universal Selector  [0000]
  • tag  {} : Type Selector  [0001]
  • .class  {} : Class Selector  [0010]
  • #id  {} : ID Selector  [0100]
  • [attribute="value"]  {} : Attribute Selector  [0010]
  • :pseudo-class  {} : Pseudo-Class Selector  [0010]
  • ::pseudo-element  {} : Pseudo-Element Selector  [0001]
  • >  {} : Child Selector  [0000]
  • +  {} : Adjacent Sibling Selector  [0000]
  • ~  {} : General Sibling Selector  [0000]

The numbers written in square brackets [ ] next to each selector represents its specificity, which indicates its weight. Specificity determines which CSS rule takes precedence: if the same property is defined differently by multiple rules targeting the same element, the rule with the highest specificity will be applied.

2. Properties

A property in CSS is the style attribute you want to change on an HTML element. It defines what aspect of the element like color, size, or spacing you want to modify.

  • color:  -> Change the text color
  • font-size:  -> sets the size of the text
  • margin:  -> Controls the spacing outside an element
  • padding:  -> Controls the spacing inside an element
  • background-color:  -> Sets the background color of an element

An HTML element can have multiple properties applied at the same time, allowing you to change several aspects of its appearance with a single rule. Each property works together to determine how the element is displayed on the page.

Although properties always need a value to fully apply a style, at this stage we focus only on the properties themselves. Later, we will see how values specify exactly how a property affects an element.

3. Values

A value in CSS tells the browser exactly how a property should change an element. Each property is paired with a value to form a property-value declaration, like color: blue; or margin: 10px;. Values can be keywords (bold, center), lengths, colors (#ff0000), or other types depending on the property. Together, the property and its value tell the browser how to style the element.

  • px;  = pixels, fixed size (e.g., 10px)
  • %;  = percentage relative to the parent element (e.g., 50%)
  • em;  = relative to the font size of the element (e.g., 2em)
  • rem;  = relative to the root element’s font size (e.g., 1.5rem)
  • vw;  = viewport width (e.g., 50vw)
  • vh;  = viewport height (e.g., 20vh)
  • fr;  = fractional unit used in CSS Grid (e.g., 1fr)

Conclusion

CSS allows you to control the appearance and layout of HTML elements by combining selectors, properties, and values into structured rules. Selectors target the elements you want to style, properties define what aspects of those elements to change, and values specify exactly how to apply those changes. By understanding how these three components work together, you can create well-structured, flexible, and visually appealing web pages.