📄Assignments of Class 13
CSS in React
Assignment 1: Apply Inline Styles to
a Component
Task:
Create a React component called Greeting that displays a welcome message with
inline styles. The text should be blue and have a font size of 24px.
Solution:
function Greeting() {
const style = {
color: 'blue',
fontSize: '24px',
};
return <h1 style={style}>Welcome to React Styling!</h1>;
}
Assignment 2: Create an External CSS
File and Style a Component
Task:
Create a CSS file named Greeting.css and add styles for a class .greeting.
Style the text to be red and bold. Use this class in a Greeting component.
Solution:
Greeting.css
.greeting {
color: red;
font-weight: bold;
font-size: 28px;
}
Greeting.jsx
import './Greeting.css';
return <h1 className="greeting">Hello from External CSS!</h1>;
}
Assignment 3: Use CSS Modules to
Style a Button Component
Task:
Create a CSS Module file called Button.module.css with a .btn class that styles
the button with a green background, white text, and padding. Use this style in
a Button component.
Solution:
Button.module.css
.btn {
background-color: green;
color: white;
padding: 12px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
Button.jsx
import styles from './Button.module.css';
function Button() {
return <button className={styles.btn}>Click Me</button>;
}
Assignment 4: Combine Inline Styles
and External CSS in One Component
Task:
Create a Profile component that uses external CSS for layout and inline styles
for dynamic text color (change based on a prop).
Solution:
Profile.css
.profile {
border: 1px solid gray;
padding: 20px;
width: 300px;
margin: 10px;
}
Profile.jsx
import './Profile.css';
function Profile({ highlight }) {
const textColor = highlight ? 'purple' : 'black';
return (
<div className="profile">
<h2 style={{ color: textColor }}>User Profile</h2>
<p>This component uses external CSS and inline styles.</p>
</div>
);
}
Assignment 5: Create a Responsive
Layout Using External CSS
Task:
Create a component ResponsiveBox and style it with external CSS to have
different background colors on small and large screens using media queries.
Solution:
ResponsiveBox.css
.box {
width: 100%;
height: 150px;
background-color: lightblue;
}
/* Change color on screens wider
than 600px */
@media (min-width: 600px) {
.box {
background-color: coral;
}
}
ResponsiveBox.jsx
import './ResponsiveBox.css';
function ResponsiveBox() {
return <div className="box">Resize the window to see
color change</div>;
}
Assignment 6: Style a List of Items
Using CSS Modules
Task:
Create a list of items and style each item with padding and a border using CSS
Modules.
Solution:
List.module.css
.item {
padding: 10px;
border: 1px solid #ccc;
margin-bottom: 5px;
border-radius: 3px;
}
List.jsx
import styles from './List.module.css';
function List() {
const items = ['Apple', 'Banana', 'Cherry'];
return (
<ul>
{items.map((item, index) => (
<li key={index} className={styles.item}>
{item}
</li>
))}
</ul>
);
}
Assignment 7: Convert Inline Styles
to CSS Modules (Homework Practice)
Task:
Given the inline styles below, convert them to CSS Modules and apply them in
the component.
function Card() {
return (
<div style={{ border: '1px solid black', padding: '20px', borderRadius:
'8px' }}>
This is a card component.
</div>
);
}
Solution:
Card.module.css
.card {
border: 1px solid black;
padding: 20px;
border-radius: 8px;
}
Card.jsx
import styles from './Card.module.css';
function Card() {
return <div className={styles.card}>This is a card component.</div>;
}
Assignment 8: Create a Hover Effect
Using External CSS
Task:
Style a button with external CSS so that it changes background color when
hovered.
Solution:
HoverButton.css
.button {
background-color: #007bff;
color: white;
padding: 10px 16px;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #0056b3;
}
HoverButton.jsx
import './HoverButton.css';
return <button className="button">Hover Me</button>;
}
Assignment 9: Dynamic Styling with
Inline Styles Based on State
Task:
Create a toggle button that changes its background color when clicked using
inline styles and React state.
Solution:
import { useState } from 'react';
function ToggleButton() {
const [active, setActive] = useState(false);
const style = {
backgroundColor: active ? 'green' : 'gray',
color: 'white',
padding: '10px 20px',
border: 'none',
borderRadius: '5px',
cursor: 'pointer',
};
return (
<button style={style} onClick={() => setActive(!active)}>
{active ? 'Active' : 'Inactive'}
</button>
);
}
Assignment 10: Create a Themed
Component Using CSS Modules and Props
Task:
Create a component ThemedBox styled with CSS Modules that changes styles based
on a theme prop (light or dark).
Solution:
ThemedBox.module.css
.box {
padding: 20px;
border-radius: 8px;
color: white;
}
.light {
background-color: #f0f0f0;
color: black;
}
.dark {
background-color: #333;
}
ThemedBox.jsx
import styles from './ThemedBox.module.css';
function ThemedBox({ theme }) {
const themeClass = theme === 'dark' ? styles.dark : styles.light;
return <div className={`${styles.box} ${themeClass}`}>This is a
{theme} themed box.</div>;
}
Summary
- These assignments reinforce
using inline styles for quick and dynamic styling.
- Use external CSS for
traditional global styles, including hover and media queries.
- Use CSS Modules for
scoped, modular CSS with no naming conflicts.
- Practice converting inline
styles into CSS Modules.
- Explore dynamic styling with
React state and props.
