Prev Next

CSS Syntax

The syntax of CSS is straightforward and consists of selectors and declarations. You choose an element (or group of elements) to style with a selector, and then apply styles using properties and values wrapped in braces. Understanding CSS syntax is the foundation for creating well-structured, maintainable stylesheets.

Key Topics

Basic Structure

Example: Each CSS rule begins with a selector, followed by curly braces containing one or more property-value pairs.

h1 {
    color: blue;
    font-size: 24px;
}

Properties and Values

Properties define what aspect of the element you’re styling (e.g., color, margin, font-size), and values set the specific styling. Different properties accept different types of values such as lengths, percentages, or predefined keywords.

Units and Colors

  • Units: Pixels (px), percentages (%), em, rem, and more control sizing and spacing.
  • Colors: Named colors, HEX codes, RGB, RGBA, and HSL notations provide flexibility in choosing colors.

Key Takeaways

  • CSS rules are composed of selectors and declaration blocks.
  • Properties define what you’re styling, while values specify the style details.
  • Use appropriate units and color formats for flexible, maintainable designs.
  • Clear, consistent syntax improves readability and scalability of your styles.
Prev Next