CSS Worksheet: Exercises
Task 1 (Easy): Change Text Color
Objective:
Change the text color of a paragraph element to an unusual color.
Instructions:
● Create an HTML paragraph element with some default text.
● Search the internet for the HEX or RGB value for an unusual color (for example, "Zaffre").
● Apply the discovered value to change the text color of the paragraph using the color property.
Hint:
The color property accepts named colors, HEX codes, and RGB/RGBA values. Try to use a unique color like
"Zaffre" to make your text stand out.
Task 2 (Easy): Create a Colored Container
Objective:
Style a container element with a background color and internal padding.
Instructions:
● Create an HTML <div> element to serve as a container.
● Apply a background color of your choice to the container.
● Add padding so that the content inside does not touch the edges of the container.
Hint:
Use the background-color property to set the container’s color and the padding property for internal
spacing.
Task 3 (Medium): Center Items with Flexbox
Objective:
Center multiple items both horizontally and vertically using Flexbox.
Instructions:
● Create an HTML container (e.g., a <div>) with at least three child elements.
● Use CSS to convert the container into a flex container.
● Center the child elements using properties such as justify-content: center and
align-items: center.
Hint:
Flexbox makes aligning items straightforward. Experiment with additional properties like flex-direction
and gap if desired.
CSS Worksheet: Exercises
Task 4 (Medium): Experiment with Margin, Padding, and Border
Objective:
Understand and visualize the differences between margin and padding by applying both to an element.
Instructions:
● Create an HTML element (such as a <div>) with some text content.
● Apply different values for margin and padding to see how they affect the spacing around and within
the element.
● Add a border to the element to clearly visualize its boundaries.
Hint:
Try using individual side properties (e.g., margin-top, padding-left) to observe the effects on specific
sides of the element.
Task 5 (Hard): Build a Responsive Layout with CSS Grid and
Media Queries
Objective:
Create a responsive webpage layout using CSS Grid for the overall structure and Flexbox for aligning
elements within components.
Instructions:
1. Structure the Page:
○ Develop a webpage with at least three sections (for example, a header, navigation, and main
content) using semantic HTML elements like <header>, <nav>, and <main>.
2. Apply CSS Grid:
○ Use CSS Grid to define a layout that organizes these sections into designated areas (e.g.,
header at the top, navigation on the side or below, and main content next to or below the
navigation).
3. Implement Flexbox in Navigation:
○ Within the <nav> element, use Flexbox to arrange menu items horizontally.
4. Add a Media Query:
○ Include a media query (e.g., @media (max-width: 600px)) to adjust the layout for narrower
viewports, such as stacking the navigation and main content vertically on smaller screens.
Hint:
Experiment with grid-template-areas for the CSS Grid layout and adjust Flexbox properties within your
navigation to see how they affect alignment. Use media queries to create a design that responds gracefully to
different screen sizes.
