First CSS stylesheet - Mini Project: Build & Apply

First CSS Stylesheet

📖 Scenario: You are creating a simple webpage for a small bakery. The page needs to look friendly and inviting with some basic colors and fonts.

🎯 Goal: Create a CSS stylesheet that styles the bakery webpage with a background color, font style, and colors for headings and paragraphs.

📋 What You'll Learn

Use a CSS file to style the webpage

Set the background color of the page

Change the font family for the whole page

Set a color for all h1 headings

Set a color for all p paragraphs

💡 Why This Matters

🌍 Real World

Styling webpages with CSS is essential for making websites look attractive and easy to read.

💼 Career

Web developers and designers use CSS daily to control the appearance of websites and apps.

1

Create the CSS file and set the background color

Create a CSS file and write a rule for the body element that sets the background color to #fff8e1.

CSS

/* Your code here */

Hint

Remember to write the selector body and use background-color property.

2

Set the font family for the whole page

Add a CSS rule for the body element that sets the font family to Arial, sans-serif.

CSS

body {
  background-color: #fff8e1;
  /* Set font family here */
}

Hint

Use the font-family property inside the body selector.

3

Set the color for all h1 headings

Write a CSS rule for the h1 element that sets the text color to #d2691e.

CSS

body {
  background-color: #fff8e1;
  font-family: Arial, sans-serif;
}

/* Add h1 color rule here */

Hint

Use the selector h1 and the color property.

4

Set the color for all p paragraphs

Write a CSS rule for the p element that sets the text color to #555555.

CSS

body {
  background-color: #fff8e1;
  font-family: Arial, sans-serif;
}

h1 {
  color: #d2691e;
}

/* Add p color rule here */

Hint

Use the selector p and the color property.

Practice

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