Bird
Raised Fist0
CSSmarkup~20 mins

ID selectors in CSS - Mini Project: Build & Apply

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
Styling a Profile Card Using ID Selectors
📖 Scenario: You are creating a simple profile card for a website. The card has a title and a description. You want to style these elements individually using CSS ID selectors.
🎯 Goal: Build a small HTML page with a profile card. Use CSS ID selectors to style the card's title and description with different colors and font sizes.
📋 What You'll Learn
Create an HTML structure with a container div having id="profile-card".
Inside the container, add a heading h2 with id="card-title" and a paragraph p with id="card-description".
Write CSS rules using ID selectors to style #card-title with a blue color and larger font size.
Write CSS rules using ID selectors to style #card-description with a gray color and smaller font size.
💡 Why This Matters
🌍 Real World
ID selectors are used to style unique elements on a webpage, such as headers, buttons, or cards, making them stand out with specific styles.
💼 Career
Understanding ID selectors is essential for front-end developers to apply precise styles and create visually appealing web pages.
Progress0 / 4 steps
1
Create the HTML structure with IDs
Write the HTML code to create a div with id="profile-card". Inside it, add an h2 with id="card-title" containing the text "John Doe" and a p with id="card-description" containing the text "Web Developer".
CSS
Hint

Use the id attribute exactly as profile-card, card-title, and card-description.

2
Add a CSS block for the card title
Write a CSS rule using the ID selector #card-title to set the text color to blue and the font size to 2rem.
CSS
Hint

Use #card-title as the selector and set color and font-size properties.

3
Add a CSS block for the card description
Write a CSS rule using the ID selector #card-description to set the text color to gray and the font size to 1rem.
CSS
Hint

Use #card-description as the selector and set color and font-size properties.

4
Add the <style> tag inside the <head> for proper HTML structure
Wrap the CSS code inside a <style> tag placed inside a <head> section. Also, add the basic HTML5 structure with <html lang="en">, <head>, and <body> tags. Place the profile card inside the <body>.
CSS
Hint

Make sure the CSS is inside the <style> tag within the <head>. The content goes inside the <body>.

Practice

(1/5)
1. What does an ID selector in CSS target?
#header { color: blue; }
easy
A. All elements of a specific type
B. A single unique element with the specified ID
C. All elements with the specified class
D. All elements inside a container

Solution

  1. Step 1: Understand the meaning of # in CSS

    The # symbol in CSS is used to select an element by its unique ID attribute.

  2. Step 2: Identify what an ID selector targets

    An ID selector targets exactly one element that has the matching ID value.

  3. Final Answer:

    A single unique element with the specified ID -> Option B

  4. Quick Check:

    ID selector = unique element [OK]
Hint: ID selectors start with # and target one unique element [OK]
Common Mistakes:
  • Confusing ID selector with class selector (which uses .)
  • Thinking ID selects multiple elements
  • Using ID selector without # symbol
2. Which of the following is the correct syntax to select an element with ID main-content in CSS?
easy
A. #main-content { }
B. .main-content { }
C. main-content { }
D. *main-content { }

Solution

  1. Step 1: Recall the syntax for ID selectors

    ID selectors use the # symbol followed by the ID name without spaces.

  2. Step 2: Match the correct syntax

    The correct syntax is #main-content { } to select the element with ID "main-content".

  3. Final Answer:

    #main-content { } -> Option A

  4. Quick Check:

    ID selector syntax = #idname [OK]
Hint: Use # before ID name, no spaces [OK]
Common Mistakes:
  • Using . instead of # for ID
  • Omitting # symbol
  • Adding extra characters like * before ID
3. Given the HTML:
<div id="box">Hello</div>

And CSS:
#box { color: red; } .box { color: blue; }

What color will the text inside the div appear?
medium
A. Blue
B. Black (default)
C. Red
D. Both red and blue

Solution

  1. Step 1: Identify the selectors applied

    The div has an ID "box" but no class "box". The CSS has an ID selector #box and a class selector .box.

  2. Step 2: Determine which selector applies

    Since the div has ID "box", the #box selector applies, setting color to red. The class selector does not apply.

  3. Final Answer:

    Red -> Option C

  4. Quick Check:

    ID selector overrides class selector = red [OK]
Hint: ID selectors override class selectors in CSS [OK]
Common Mistakes:
  • Confusing class and ID selectors
  • Assuming both styles apply simultaneously
  • Ignoring CSS specificity rules
4. What is wrong with this CSS code if the element with ID nav is not styled?
#nav { background-color: yellow color: white }
medium
A. CSS property name is incorrect
B. ID selector should use a dot (.) instead of #
C. ID selector must be written as nav#
D. Missing semicolon after property value

Solution

  1. Step 1: Check CSS syntax for property declarations

    Each CSS property declaration must end with a semicolon ;. Omitting semicolons between properties causes errors.

  2. Step 2: Identify the missing semicolon

    The code #nav { background-color: yellow color: white } is missing a semicolon after yellow. This can cause some browsers to ignore the rule.

  3. Final Answer:

    Missing semicolon after property value -> Option D

  4. Quick Check:

    CSS properties end with ; [OK]
Hint: Always end CSS declarations with a semicolon [OK]
Common Mistakes:
  • Using . instead of # for ID selectors
  • Writing selector as nav# instead of #nav
  • Misspelling CSS property names
5. You want to style only the element with ID footer to have a green background and white text. Which CSS code correctly does this and ensures no other elements are affected?
hard
A. #footer { background-color: green; color: white; }
B. .footer { background-color: green; color: white; }
C. footer { background-color: green; color: white; }
D. *#footer { background-color: green; color: white; }

Solution

  1. Step 1: Identify the correct selector for an ID

    To select an element by ID, use #idname. Here, #footer targets the element with ID "footer".

  2. Step 2: Confirm the CSS properties and uniqueness

    The properties background-color: green; and color: white; style the background and text color. Using #footer ensures only that element is styled.

  3. Final Answer:

    #footer { background-color: green; color: white; } -> Option A

  4. Quick Check:

    ID selector with # targets one element [OK]
Hint: Use #footer to style only the footer element [OK]
Common Mistakes:
  • Using .footer which targets class, not ID
  • Using element selector footer which targets all footer tags
  • Adding unnecessary * before #footer