CSS Syntax Structure

CSS

"Learning CSS is like solving a puzzle—except if one piece is out of place, your entire website ends up looking like a closet hit by a tornado!"

 

Cracking the Code of CSS

CSS might look like a bunch of random curly brackets and colons at first, but once you get the hang of it, it’s like learning a secret language that makes websites beautiful! 

The Basic Structure of a CSS Rule

CSS rules are made up of selectors, properties, and values. Think of it like giving fashion advice:

selector {
  property: value;
}

Example:

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

• Selector (h1): The element you want to style.
• Property (color, font-size): What you want to change.
• Value (blue, 24px): The new style.

CSS is basically telling the <h1> tag, "Hey, you should wear blue and be 24px tall!"

Selectors: The Who in CSS

CSS needs to know which elements to style. Here are some common selectors:

• Element Selector – Targets all instances of a tag:

  p { color: red; }
  

• Class Selector (.) – Targets elements with a specific class:

  .highlight { background-color: yellow; }
  

• ID Selector (#) – Targets a unique element with an ID:

  #special { font-size: 20px; }
  

• Universal Selector (*) – Styles everything:

  * { margin: 0; padding: 0; }
  

Properties and Values: The What and How

Properties define what you’re changing, and values tell CSS how it should look.

Example:

button {
  background-color: green;
  border-radius: 10px;
}

This makes all <button> elements green with rounded corners!

Common properties include:

• color (text color)
• background-color
• font-size
• margin, padding
• border

Grouping and Nesting Rules

Instead of writing multiple rules, you can group them:

h1, h2, h3 {
  font-family: Arial, sans-serif;
}

This applies the same font to all headings!

Or use nesting inside a parent element:

nav ul {
  list-style: none;
}

This only affects <ul> inside <nav>.

Comments: Talking to Your Future Self

You can add comments in CSS to remember why you wrote something:

/* This makes the text red */
p {
  color: red;
}

Comments don’t affect your code but help keep things organized!