Writing reusable CSS - Mini Project: Build & Apply

Writing Reusable CSS for a Button

📖 Scenario: You are creating a website with multiple buttons. Instead of writing the same styles for each button, you want to write reusable CSS classes to keep your code clean and easy to maintain.

🎯 Goal: Build a reusable CSS class called .btn that styles buttons with a blue background, white text, some padding, and rounded corners. Then create a secondary class called .btn-large that increases the padding and font size for bigger buttons.

📋 What You'll Learn

Create a CSS class named .btn with background color #007BFF, white text color, padding of 0.5rem 1rem, border radius of 0.25rem, and no border.

Create a CSS class named .btn-large that increases padding to 1rem 2rem and font size to 1.25rem.

Use semantic CSS properties and units like rem for scalability.

Ensure the CSS is reusable for multiple buttons by using classes.

💡 Why This Matters

🌍 Real World

Reusable CSS classes help keep website styles consistent and easy to update, especially when many buttons or components share the same look.

💼 Career

Writing reusable CSS is a key skill for front-end developers to create maintainable and scalable websites.

1

Create the base button class

Write a CSS class called .btn that sets background-color to #007BFF, color to #FFFFFF, padding to 0.5rem 1rem, border-radius to 0.25rem, and border to none.

CSS

/* Your code here */

Hint

Use the .btn selector and set the properties exactly as described.

2

Add a large button modifier class

Add a CSS class called .btn-large that sets padding to 1rem 2rem and font-size to 1.25rem.

CSS

.btn {
  background-color: #007BFF;
  color: #FFFFFF;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  border: none;
}

/* Your code here */

Hint

Define the .btn-large class below the .btn class with the specified properties.

3

Use the reusable classes in HTML

Write an HTML snippet with two <button> elements. The first button uses the class btn. The second button uses both classes btn and btn-large.

CSS

.btn {
  background-color: #007BFF;
  color: #FFFFFF;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  border: none;
}

.btn-large {
  padding: 1rem 2rem;
  font-size: 1.25rem;
}

Hint

Use the class attribute on <button> tags to apply the CSS classes.

4

Add hover effect to the button

Add a CSS rule for .btn:hover that changes the background-color to #0056b3 to create a hover effect.

CSS

.btn {
  background-color: #007BFF;
  color: #FFFFFF;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  border: none;
}

.btn-large {
  padding: 1rem 2rem;
  font-size: 1.25rem;
}

/* Your code here */

Normal Button
Large Button

Hint

Add a hover state by using the :hover pseudo-class on the .btn class.

Practice

1. What is the main benefit of using reusable CSS classes in web development?

easy

A. You can write styles once and use them many times.

B. It makes the website load slower.

C. It requires writing more code for each element.

D. It only works with inline styles.

Solution

1. Step 1: Understand the purpose of reusable CSS classes

   Reusable CSS classes allow you to write a style rule once and apply it to multiple elements, saving time and effort.

2. Step 2: Compare options to the main benefit

   Options B, C, and D describe drawbacks or incorrect uses, while You can write styles once and use them many times. correctly states the main benefit.

3. Final Answer:

   You can write styles once and use them many times. -> Option A

4. Quick Check:

   Reusable CSS = Write once, use many times [OK]

Hint: Reusable classes save time by reusing styles [OK]

Common Mistakes:

• Thinking reusable CSS slows down the site
• Confusing reusable classes with inline styles
• Believing reusable CSS requires more code

2. Which of the following is the correct syntax to define a reusable CSS class named button?

easy

A. button { color: blue; }

B. #button { color: blue; }

C. .button { color: blue; }

D. *button { color: blue; }

Solution

1. Step 1: Identify CSS selector for classes

   In CSS, classes are selected using a dot (.) before the class name.

2. Step 2: Match syntax to class selector

   .button { color: blue; } uses .button which is correct. #button { color: blue; } uses an ID selector (#), C uses an element selector, and D uses an invalid selector.

3. Final Answer:

   .button { color: blue; } -> Option C

4. Quick Check:

   Class selector starts with dot (.) [OK]

Hint: Class selectors start with a dot (.) in CSS [OK]

Common Mistakes:

• Using # instead of . for classes
• Omitting the dot before class name
• Confusing element selectors with class selectors

3. Given the CSS below, what color will the text inside the <p> tag have?

.red { color: red; } .bold { font-weight: bold; }

Hello World

medium

A. Default browser color

B. Bold only

C. Red only

D. Red and bold

Solution

1. Step 1: Analyze the applied classes

   The paragraph has two classes: red and bold. The red class sets text color to red, and bold sets font weight to bold.

2. Step 2: Combine effects of both classes

   Both styles apply together, so the text will be red and bold.

3. Final Answer:

   Red and bold -> Option D

4. Quick Check:

   Multiple classes combine styles [OK]

Hint: Multiple classes combine their styles on one element [OK]

Common Mistakes:

• Thinking only one class style applies
• Confusing color and font-weight properties
• Ignoring combined class effects

4. What is wrong with this CSS if the goal is to reuse the style for multiple buttons?

button { background-color: blue; } .button { background-color: red; }

Click me

medium

A. The class name should start with a #.

B. The element selector button and class .button conflict causing confusion.

C. Class selectors cannot be reused.

D. The CSS syntax is invalid.

Solution

1. Step 1: Understand selector types

   The selector button targets all <button> elements, while .button targets elements with class "button".

2. Step 2: Identify conflict in styles

   The paragraph has class "button" but is not a <button> element, so only .button applies. The similar names can confuse developers.

3. Final Answer:

   The element selector button and class .button conflict causing confusion. -> Option B

4. Quick Check:

   Element and class selectors with same name cause confusion [OK]

Hint: Avoid naming classes same as HTML elements [OK]

Common Mistakes:

• Using # instead of . for classes
• Assuming class selectors can't be reused
• Ignoring selector specificity and conflicts

5. You want to create a reusable CSS class for a card component that has a shadow, padding, and rounded corners. Which CSS snippet correctly combines these styles for reuse?

hard

A. .card { box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 1rem; border-radius: 0.5rem; }

B. #card { box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 1rem; border-radius: 0.5rem; }

C. card { box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 1rem; border-radius: 0.5rem; }

D. .card { shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 1rem; rounded: 0.5rem; }

Solution

1. Step 1: Use correct class selector syntax

   Classes use a dot (.) before the name, so .card is correct. #card { box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 1rem; border-radius: 0.5rem; } uses an ID selector (#), C uses an invalid element selector, and D uses incorrect CSS properties.

2. Step 2: Verify CSS properties for shadow, padding, and rounded corners

   box-shadow, padding, and border-radius are correct CSS properties. .card { shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 1rem; rounded: 0.5rem; } uses invalid properties shadow and rounded.

3. Final Answer:

   .card { box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 1rem; border-radius: 0.5rem; } -> Option A

4. Quick Check:

   Correct class selector and CSS properties [OK]

Hint: Use dot for class and correct CSS property names [OK]

Common Mistakes:

• Using # instead of . for classes
• Using invalid CSS properties like shadow or rounded
• Omitting units or using wrong selectors