Scribd
Upload
4 views

CSS Worksheet

The document outlines a CSS worksheet with five tasks aimed at enhancing CSS skills. Tasks include changing text color, creating a colored container, centering items with Flexbox, experimenting with margin and padding, and building a responsive layout using CSS Grid and media queries. Each task includes specific objectives, instructions, and hints to guide learners through the exercises.

Uploaded by

osmanovr196
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

CSS Worksheet

The document outlines a CSS worksheet with five tasks aimed at enhancing CSS skills. Tasks include changing text color, creating a colored container, centering items with Flexbox, experimenting with margin and padding, and building a responsive layout using CSS Grid and media queries. Each task includes specific objectives, instructions, and hints to guide learners through the exercises.

Uploaded by

osmanovr196
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

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.

You might also like