CSSmarkup~30 mins

Element selectors in CSS - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Styling a Simple Webpage Using Element Selectors

📖 Scenario: You are creating a simple webpage for a small bakery. The page has a header, a main section with some paragraphs, and a footer. You want to style these elements using CSS element selectors to make the page look neat and welcoming.

🎯 Goal: Build a CSS stylesheet that uses element selectors to style the header, p paragraphs, and footer elements with different background colors, text colors, and padding.

📋 What You'll Learn

Use element selectors to style the header, p, and footer elements.

Set the header background color to lightpink and text color to darkred.

Set the p paragraphs text color to darkgreen and add padding of 1rem.

Set the footer background color to lightgray and center the text.

💡 Why This Matters

🌍 Real World

Web designers often use element selectors to quickly style common HTML tags across a website for consistent look and feel.

💼 Career

Knowing how to use element selectors is a fundamental skill for front-end developers and web designers to create visually appealing and accessible websites.

Progress0 / 4 steps

Create the HTML structure

CSS

Need a hint?

Use semantic HTML tags: header, p, and footer. Put your text inside these tags.

Add a CSS file link

Add a <link> tag inside the <head> section to link an external CSS file named styles.css.

CSS




  
  
  



  Welcome to Sweet Treats

We bake fresh bread every morning.
Try our delicious cupcakes and cookies.

  © 2024 Sweet Treats Bakery

Need a hint?

Use the <link> tag with rel="stylesheet" and href="styles.css" inside the <head>.

Style the header and paragraphs using element selectors

In the styles.css file, write CSS rules using element selectors to set the header background color to lightpink and text color to darkred. Also, set all p paragraphs text color to darkgreen and add padding of 1rem.

CSS

/* Style the header element */

/* Style the p elements */

/* Your code here */

Need a hint?

Use the element names header and p as selectors. Set the properties inside curly braces.

Style the footer element

In the styles.css file, add a CSS rule using the element selector to set the footer background color to lightgray and center the text horizontally.

CSS

header {
  background-color: lightpink;
  color: darkred;
}

p {
  color: darkgreen;
  padding: 1rem;
}

/* Style the footer element */

/* Your code here */

Need a hint?

Use the footer element selector and set background-color and text-align properties.