CSSmarkup~20 mins

ID selectors in CSS - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

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

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

Need a hint?

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

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


  John Doe
  Web Developer


/* Add CSS for #card-title here */

Need a hint?

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

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


  John Doe
  Web Developer



#card-title {
  color: blue;
  font-size: 2rem;
}

/* Add CSS for #card-description here */

Need a hint?

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

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

 and  here -->

Need a hint?

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