Bird
Raised Fist0
CSSmarkup~5 mins

First CSS stylesheet - Cheat Sheet & Quick Revision

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
Recall & Review
beginner
What is a CSS stylesheet?
A CSS stylesheet is a file or section where you write rules to style HTML elements, like colors, fonts, and layout.
Click to reveal answer
beginner
How do you link a CSS stylesheet to an HTML file?
Use the <link> tag inside the <head> of your HTML: <link rel="stylesheet" href="styles.css" />.
Click to reveal answer
beginner
What does this CSS rule do? 
body { background-color: lightblue; }
It changes the background color of the whole page to light blue.
Click to reveal answer
beginner
Why use CSS instead of inline styles?
CSS keeps style separate from content, making it easier to change styles for many pages at once and keeps code clean.
Click to reveal answer
beginner
What is the correct syntax for a CSS rule?
Selector { property: value; } For example: p { color: red; }
Click to reveal answer
Which HTML tag is used to link an external CSS stylesheet?
A&lt;script&gt;
B&lt;style&gt;
C&lt;link&gt;
D&lt;css&gt;
What does this CSS rule do? 
h1 { font-size: 2rem; }
ASets the font size of all h1 headings to 2 rem units
BChanges the color of h1 headings to red
CAdds a border around h1 headings
DHides all h1 headings
Where should the <link> tag for CSS be placed in an HTML document?
AInside the &lt;footer&gt;
BInside the &lt;head&gt; section
CAt the end of the &lt;body&gt;
DOutside the &lt;html&gt; tag
Which property changes the text color in CSS?
Atext-align
Bbackground-color
Cfont-size
Dcolor
What is the correct way to write a CSS comment?
A/* This is a comment */
B// This is a comment
C<!-- This is a comment -->
D# This is a comment
Explain how to create and link your first CSS stylesheet to an HTML page.
Think about the file, the CSS code inside, and how HTML knows about it.
You got /4 concepts.
    Describe the basic structure of a CSS rule and what each part does.
    Focus on selector, property, and value.
    You got /5 concepts.

      Practice

      (1/5)
      1. What is the main purpose of a CSS stylesheet in web development?
      easy
      A. To control the appearance and layout of HTML elements on a webpage
      B. To add interactive behavior to webpage elements
      C. To store data for the webpage
      D. To write the content of the webpage

      Solution

      1. Step 1: Understand CSS role

        CSS is used to style and arrange how HTML elements look on a page.

      2. Step 2: Differentiate from other web technologies

        JavaScript adds behavior, HTML holds content, CSS controls style and layout.

      3. Final Answer:

        To control the appearance and layout of HTML elements on a webpage -> Option A

      4. Quick Check:

        CSS = style control [OK]
      Hint: Remember: CSS styles, HTML structures, JS acts [OK]
      Common Mistakes:
      • Confusing CSS with JavaScript functionality
      • Thinking CSS stores webpage content
      • Believing CSS adds interactivity
      2. Which of the following is the correct way to link an external CSS file named styles.css in an HTML document?
      easy
      A. <link rel="stylesheet" href="styles.css">
      B. <style src="styles.css"></style>
      C. <script src="styles.css"></script>
      D. <css href="styles.css">

      Solution

      1. Step 1: Identify correct HTML tag for CSS linking

        The <link> tag with rel="stylesheet" and href attribute is used to link CSS files.

      2. Step 2: Check other options for correctness

        <style> tag does not use src, <script> is for JavaScript, <css> is invalid HTML.

      3. Final Answer:

        <link rel="stylesheet" href="styles.css"> -> Option A

      4. Quick Check:

        Use <link rel="stylesheet"> to link CSS [OK]
      Hint: Link CSS with <link rel="stylesheet" href="file.css"> [OK]
      Common Mistakes:
      • Using <style> tag with src attribute
      • Using <script> tag for CSS
      • Writing invalid tags like <css>
      3. Given the CSS below, what color will the paragraph text be?
      p { color: blue; }
      p.special { color: red; }

      And the HTML:
      <p class="special">Hello!</p>
      medium
      A. Blue
      B. Red
      C. Black (default)
      D. Green

      Solution

      1. Step 1: Understand CSS selector specificity

        The selector p.special targets paragraphs with class "special" and overrides p styles.

      2. Step 2: Apply styles to the HTML element

        The paragraph has class "special", so it uses the color red from p.special.

      3. Final Answer:

        Red -> Option B

      4. Quick Check:

        More specific selector wins = red [OK]
      Hint: Class selectors override element selectors [OK]
      Common Mistakes:
      • Ignoring class selector specificity
      • Assuming first rule always applies
      • Confusing color names
      4. What is wrong with this CSS code?
      body {
        background-color: #fff
        color: black;
      }
      medium
      A. Using body selector is invalid
      B. Incorrect color value for background-color
      C. Missing semicolon after background-color property
      D. Properties should be inside <style> tags

      Solution

      1. Step 1: Check CSS property syntax

        Each property must end with a semicolon except the last one, but here background-color is not last and misses semicolon.

      2. Step 2: Validate other parts

        Color value #fff is valid, body selector is valid, CSS can be inside external or style tags.

      3. Final Answer:

        Missing semicolon after background-color property -> Option C

      4. Quick Check:

        Every CSS property line needs semicolon [OK]
      Hint: Check semicolons after each CSS property line [OK]
      Common Mistakes:
      • Forgetting semicolons between properties
      • Thinking #fff is invalid color
      • Believing body selector is wrong
      5. You want all <h1> headings on your page to be green, but only those inside a <section> should be bold. Which CSS code achieves this?
      hard
      A. h1 { font-weight: bold; }
      section h1 { color: green; }
      B. h1 { color: green; font-weight: bold; }
      section h1 { color: green; }
      C. section h1 { color: green; font-weight: bold; }
      h1 { font-weight: normal; }
      D. h1 { color: green; }
      section h1 { font-weight: bold; }

      Solution

      1. Step 1: Set all h1 color to green

        The rule h1 { color: green; } colors all h1 headings green.

      2. Step 2: Make only h1 inside section bold

        The rule section h1 { font-weight: bold; } targets only h1 inside section and makes them bold.

      3. Final Answer:

        h1 { color: green; } section h1 { font-weight: bold; } -> Option D

      4. Quick Check:

        General style first, then specific override [OK]
      Hint: Style all, then add specific inside selector [OK]
      Common Mistakes:
      • Applying bold to all h1 instead of only inside section
      • Overwriting color unintentionally
      • Using wrong selector order