Bird
Raised Fist0
CSSmarkup~5 mins

CSS syntax and rules

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction
CSS syntax and rules tell the browser how to style your webpage. They help you change colors, sizes, and layout in a clear way.
You want to change the color of text on your webpage.
You need to make a button bigger or smaller.
You want to add space between paragraphs.
You want to align images or text in a certain way.
You want to make your webpage look good on phones and computers.
Syntax
CSS
selector {
  property: value;
  property2: value2;
}
The selector chooses which HTML elements to style.
Each property sets a style, and the value tells how it looks.
Examples
This changes all paragraphs' text color to blue.
CSS
p {
  color: blue;
}
This sets the main heading size and space below it.
CSS
h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
}
This styles elements with class 'button' to have a green background and padding.
CSS
.button {
  background-color: green;
  padding: 0.5rem 1rem;
}
This styles the element with id 'main' to arrange children in a row with space between.
CSS
#main {
  display: flex;
  gap: 1rem;
}
Sample Program
This webpage uses CSS syntax to style headings and paragraphs. The heading is blue and bigger. The paragraphs have readable text color and spacing. One paragraph has a yellow highlight background.
CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Syntax Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f0f0f0;
      margin: 2rem;
    }
    h1 {
      color: #2a7ae2;
      font-size: 2.5rem;
      margin-bottom: 1rem;
    }
    p {
      color: #333333;
      font-size: 1.125rem;
      line-height: 1.5;
    }
    .highlight {
      background-color: #fff3b0;
      padding: 0.5rem;
      border-radius: 0.25rem;
    }
  </style>
</head>
<body>
  <h1>Welcome to CSS</h1>
  <p>This is a simple paragraph styled with CSS.</p>
  <p class="highlight">This paragraph has a highlighted background.</p>
</body>
</html>
OutputSuccess
Important Notes
Always end each property line with a semicolon (;).
Use meaningful selectors to target the right elements.
Indent properties inside braces for better readability.
Summary
CSS syntax uses selectors, braces, properties, and values to style HTML.
Each rule starts with a selector, followed by curly braces containing property-value pairs.
Proper syntax helps browsers show your webpage exactly how you want.

Practice

(1/5)
1. What is the correct order of parts in a CSS rule?
easy
A. Property, value, selector, curly braces
B. Selector, curly braces, property, value
C. Value, property, selector, curly braces
D. Curly braces, selector, property, value

Solution

  1. Step 1: Understand CSS rule structure

    A CSS rule starts with a selector that chooses HTML elements to style.

  2. Step 2: Identify the syntax order

    The selector is followed by curly braces { }, inside which property: value pairs define styles.

  3. Final Answer:

    Selector, curly braces, property, value -> Option B

  4. Quick Check:

    CSS rule = Selector + { property: value } [OK]
Hint: Remember: selector first, then braces with property:value inside [OK]
Common Mistakes:
  • Putting property before selector
  • Omitting curly braces
  • Swapping property and value order
2. Which of the following is the correct CSS syntax to set text color to blue?
easy
A. color; blue:
B. color = blue;
C. color-blue;
D. color: blue;

Solution

  1. Step 1: Identify property and value separator

    In CSS, properties and values are separated by a colon (:), not an equals sign or other symbols.

  2. Step 2: Check correct syntax for color property

    The correct syntax is color: blue; with a colon and semicolon ending the statement.

  3. Final Answer:

    color: blue; -> Option D

  4. Quick Check:

    Property and value separated by colon : [OK]
Hint: Use colon : between property and value, end with semicolon ; [OK]
Common Mistakes:
  • Using equals sign instead of colon
  • Missing semicolon at end
  • Swapping property and value order
3. What color will the text be in this CSS rule?
p { color: red; color: green; }
medium
A. Green
B. No color applied
C. Both red and green
D. Red

Solution

  1. Step 1: Understand CSS property overriding

    When the same property appears multiple times, the last one takes priority.

  2. Step 2: Identify which color is last

    The rule sets color: red; first, then color: green; which overrides red.

  3. Final Answer:

    Green -> Option A

  4. Quick Check:

    Last property value wins in CSS [OK]
Hint: Last property value overrides earlier ones [OK]
Common Mistakes:
  • Thinking both colors apply simultaneously
  • Choosing the first color instead of last
  • Assuming no override happens
4. Find the error in this CSS rule:
h1 { font-size 20px; }
medium
A. Wrong selector name
B. Missing semicolon at end
C. Missing colon between property and value
D. Curly braces are missing

Solution

  1. Step 1: Check property-value separator

    The property font-size must be followed by a colon before the value.

  2. Step 2: Verify other syntax parts

    Curly braces are present, semicolon is optional if only one property, selector is correct.

  3. Final Answer:

    Missing colon between property and value -> Option C

  4. Quick Check:

    Property and value must be separated by colon : [OK]
Hint: Always put colon : between property and value [OK]
Common Mistakes:
  • Forgetting colon after property
  • Confusing semicolon necessity
  • Misnaming selectors
5. You want to style all paragraphs inside a section with a blue background and white text. Which CSS rule correctly applies both styles?
hard
A. section p { background-color: blue; color: white; }
B. section, p { background-color: blue; color: white; }
C. section p { background-color = blue; color = white; }
D. section > p { background-color: blue; color: white }

Solution

  1. Step 1: Select paragraphs inside section

    The selector section p targets all p elements inside any section.

  2. Step 2: Use correct CSS syntax for multiple properties

    Properties must be separated by semicolons and use colon between property and value.

  3. Step 3: Check option correctness

    section p { background-color: blue; color: white; } uses correct selector and syntax. section, p { background-color: blue; color: white; } styles both section and p separately, not only p inside section. section p { background-color = blue; color = white; } uses equals sign which is invalid. section > p { background-color: blue; color: white } uses child selector which only selects direct children, not all descendants.

  4. Final Answer:

    section p { background-color: blue; color: white; } -> Option A

  5. Quick Check:

    Descendant selector + correct syntax = section p { background-color: blue; color: white; } [OK]
Hint: Use descendant selector and colon with semicolon syntax [OK]
Common Mistakes:
  • Using commas instead of spaces in selector
  • Using equals sign instead of colon
  • Confusing child selector > with descendant selector