Scribd
Upload
6 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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 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
We take content rights seriously. If you suspect this is your content, claim it here.
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