First CSS stylesheet - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the background color of the body to lightblue.

CSS

body {
  background-color: [1];
}

Drag options to blanks, or click blank then click option'

Ablue

Bgreen

Cred

Dlightblue

Attempts:

3 left

💡 Hint

Common Mistakes

Using a color name that is not valid in CSS.

Forgetting the semicolon after the property value.

The background-color property sets the background color of an element. Here, lightblue is the correct color value.

2fill in blank

medium

Complete the code to make all paragraph text red.

CSS

p {
  color: [1];
}

Drag options to blanks, or click blank then click option'

Ared

Bgreen

Cblue

Dyellow

Attempts:

3 left

💡 Hint

Common Mistakes

Using background-color instead of color.

Misspelling the color name.

The color property changes the text color. To make text red, use red.

3fill in blank

hard

Fix the error in the CSS rule to set font size to 16 pixels.

CSS

h1 {
  font-size: [1];
}

Drag options to blanks, or click blank then click option'

A16px

B16

Cpx16

Dsize16

Attempts:

3 left

💡 Hint

Common Mistakes

Writing only the number without units.

Putting units before the number.

In CSS, font size must include units like px for pixels. So 16px is correct.

4fill in blank

hard

Fill both blanks to set the margin to 10 pixels and padding to 5 pixels for div elements.

CSS

div {
  margin: [1];
  padding: [2];
}

Drag options to blanks, or click blank then click option'

A10px

B5px

C15px

D20px

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up margin and padding values.

Forgetting to add units like px.

The margin property sets space outside the element, and padding sets space inside. Here, margin is 10 pixels and padding is 5 pixels.

5fill in blank

hard

Fill all three blanks to create a CSS rule that sets the font family to Arial, font weight to bold, and text alignment to center for all h2 elements.

CSS

h2 {
  font-family: [1];
  font-weight: [2];
  text-align: [3];
}

Drag options to blanks, or click blank then click option'

AArial

Bbold

Ccenter

Dnormal

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect values for font-weight or text-align.

Forgetting semicolons after each property.

font-family sets the text font, font-weight controls thickness, and text-align sets horizontal alignment. Here, Arial font, bold weight, and centered text are correct.

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