CSS: Syntax & Structure

Learn how CSS rules are written and organized.

CSS Rule Anatomy

Every CSS rule follows the same pattern: a selector targets an element, and a declaration block holds one or more property: value pairs.

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

h1: selector that targets the element
color: property that describes what to change
steelblue: the value to set
{ }: declaration block that wraps all the rules

`CSS Rule`

A CSS rule is made of a selector and a declaration block. Each declaration inside the block is a property-value pair separated by a colon and ended with a semicolon.

Selectortargets the HTML element(s) to style
Propertythe aspect you want to change (color, font-size, margin)
Valuewhat you set the property to (red, 16px, bold)
Semicolon ;required at the end of every declaration
Curly braces { }wrap all declarations for that selector

CSS Rule Anatomy

Selector, property, and value in action.

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

.intro {
  color: gray;
  font-size: 16px;
}

Comments and Documentation

CSS comments are written with /* */. They are ignored by the browser and are used to explain your code or temporarily disable a rule.

`/* CSS Comment */`

Comments help you and others understand what a CSS rule does. They are also useful for disabling rules during debugging without deleting them.

/* ... */the only comment syntax in CSS (no // single-line comments)
Can span multiple lines
Browser ignores everything between /* and */
Use section comments like /* === Layout === */ to organize large stylesheets

CSS Comments

Documenting and organizing CSS with comments.

/* === Base Styles === */
h1 {
    color: darkblue;
    /* font-size: 32px; (disabled for now) */
}

/* Highlight class for important notes */
.note {
    color: green;
    font-weight: bold;
}

CSS Types & @import

CSS can be delivered in different ways. Beyond inline, internal, and external stylesheets, you can also load one CSS file into another using @import.

`@import`

@import lets you load one CSS file from inside another CSS file. It must be placed at the very top of the file, before any other rules.

@import url('file.css');loads an external CSS file
Must be the first statement in a stylesheet: nothing before it except @charset
Avoid chaining multiple @imports in production because it creates extra network requests
Mainly used in development to split CSS into logical files (e.g. reset.css, typography.css)

Using @import

@import must appear at the top of the CSS file.

/* main.css */
@import url('reset.css');
@import url('typography.css');

/* Your page styles come after the imports */
body {
  background: #f9f9f9;
}

Writing Clean, Readable CSS

Consistent formatting makes CSS easier to read, debug, and maintain, especially in teams.

`Clean CSS`

Well-formatted CSS is easier to scan. Each declaration on its own line, consistent indentation, and logical ordering of properties are the key habits.

One declaration per line, not everything on one line
Indent declarations with 2 spaces inside the block
Leave a blank line between rules
Order properties logically: positioning, box model, typography, visual
Use lowercase for selectors, properties, and values

Clean vs Messy CSS

Consistent formatting makes CSS easier to maintain.

/* Hard to read */
/* .card{color:red;padding:10px;margin:0;font-size:14px;} */

/* Easy to read */
.card {
  margin: 0;
  padding: 10px;
  font-size: 14px;
  color: darkslategray;
}

Grouping Selectors

When multiple elements share the same styles, you can list their selectors separated by commas instead of writing the same rule multiple times.

`Selector Grouping`

Grouping selectors with a comma applies the same declarations to all of them at once, keeping your CSS DRY.

h1, h2, h3 { }all three headings share the same rule
Each selector in the group is separated by a comma
If one selector in the group is invalid, browsers skip only that one
Grouped rules are identical to writing the same rule separately for each selector

Grouping Selectors

Apply the same styles to multiple selectors at once.

/* Without grouping: repetitive */
/* h1 { color: navy; }
     h2 { color: navy; }
     h3 { color: navy; } */

/* With grouping: clean */
h1, h2, h3 {
    color: navy;
    font-family: Arial, sans-serif;
}

Shorthand Properties

Shorthand properties let you set multiple related properties in a single line. Common shorthands include margin, padding, font, and border.

`Shorthand Properties`

Instead of setting margin-top, margin-right, margin-bottom, and margin-left separately, you can use the margin shorthand to set all four in one line.

margin: 10pxall four sides are 10px
margin: 10px 20pxtop/bottom: 10px, left/right: 20px
margin: 10px 20px 5px 15pxtop, right, bottom, left (clockwise)
font: bold 16px Arialfont-weight, font-size, font-family in one line
border: 1px solid redborder-width, border-style, border-color in one line

Shorthand Properties

margin, padding, border, and font shorthands.

/* Longhand: verbose */
/* margin-top: 10px;
     margin-right: 20px;
     margin-bottom: 10px;
     margin-left: 20px; */

/* Shorthand: clean */
.box {
    margin: 10px 20px;
    padding: 16px;
    border: 2px solid steelblue;
    font: bold 16px Arial, sans-serif;
}

Shorthand	What It Sets	Example
`margin`	margin-top/right/bottom/left	`margin: 10px 20px`
`padding`	padding-top/right/bottom/left	`padding: 8px 16px`
`border`	border-width, style, color	`border: 1px solid black`
`font`	font-weight, size, family	`font: bold 16px Arial`
`background`	color, image, position, size	`background: #fff url(bg.png) no-repeat`

Vendor Prefixes

When browsers first implement a new CSS feature, they often release it under a vendor-prefixed version before the official standard is finalized.

`Vendor Prefixes`

Vendor prefixes are browser-specific prefixes added to CSS properties so browsers can support experimental or not-yet-standardized features.

-webkit-Chrome, Safari, newer Edge
-moz-Firefox
-ms-Internet Explorer / old Edge
-o-old Opera
Always write the unprefixed version last: it overrides prefixed ones in modern browsers
Modern CSS rarely needs manual prefixes, and tools like Autoprefixer handle this automatically

Vendor Prefixes

Prefixed properties followed by the standard unprefixed version.

.box {
  width: 150px;
  height: 150px;
  background: steelblue;

    /* Prefixed versions for older browsers */
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;

    /* Standard version: always last */
    border-radius: 12px;
}

Most modern browsers support standard CSS properties without prefixes. Today vendor prefixes are mainly needed for cutting-edge features like certain animations or experimental layout properties.

Knowledge Check

1. In a CSS rule, what is the part inside the curly braces called?

2. Which of the following is a valid CSS comment?

3. What does the CSS shorthand `margin: 10px 20px;` mean?

4. Which of the following correctly groups two selectors?

5. What is the purpose of vendor prefixes like -webkit-?

Previous Next