Scribd
Upload
2 views

Module 1 CSS3

The document outlines a series of CSS3 exercises aimed at styling a 'Local Community Event Portal'. It covers various topics including CSS inclusion methods, syntax, selectors, color and background styling, typography, link and list styling, table formatting, box model control, multi-column layouts, responsive design with media queries, and debugging techniques using DevTools. Each exercise has specific tasks to enhance understanding and application of CSS principles.

Uploaded by

akbaralimay7
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
2 views

Module 1 CSS3

The document outlines a series of CSS3 exercises aimed at styling a 'Local Community Event Portal'. It covers various topics including CSS inclusion methods, syntax, selectors, color and background styling, typography, link and list styling, table formatting, box model control, multi-column layouts, responsive design with media queries, and debugging techniques using DevTools. Each exercise has specific tasks to enhance understanding and application of CSS principles.

Uploaded by

akbaralimay7
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/ 4

CSS3 Exercises

Theme: Styling the "Local Community Event Portal"

1. Why CSS? Inline vs. Internal vs. External


Scenario: The designer wants you to experiment with different ways to apply styles.
Objective: Understand various CSS inclusion methods and their impact.
Task:
• Apply an inline style to make one heading red.
• Use an embedded <style> tag in the <head> to define body background.
• Link an external stylesheet styles.css and move all reusable styles there.
• Add comments in your CSS to label each section (/* Header styles */)

2. CSS Syntax and Comments


Scenario: You’ve joined a team and need to understand and maintain a large stylesheet.
Objective: Write clean, readable CSS with proper structure and comments.
Task:
• Create a section in styles.css with formatted rules and consistent indentation.
• Add descriptive comments above selectors.
• Example:
/* Style for main CTA button */
.cta-button {
background-color: #007BFF;
color: white;
}

3. Selectors Playground
Scenario: You need to style various elements based on IDs, classes, and element types.
Objective: Master different selector types.
Task:
• Use:
o Universal selector * to reset margin/padding
o Element selector to style all <h2>
o ID selector #mainHeader for the banner
o Class selector .eventCard for event containers
o Grouping selector for h3, p to style together

4. Color & Background Styling


Scenario: You’re theming the portal based on a city council’s branding.
Objective: Apply consistent colors and background visuals.
Task:
• Use HEX and RGBA for setting text and background colors
• Add a background image to the body with fallback color
• Apply gradients to section headers using background: linear-gradient(...)

5. Typography: Fonts and Text


Scenario: The marketing team wants more appealing fonts and better readability.
Objective: Enhance textual appearance using CSS properties.
Task:
• Use @import or <link> to include a Google Font
• Set font-family, font-size, font-style, font-weight in different sections
• Use text-align, text-transform, letter-spacing, line-height on descriptions

6. Link and List Styling


Scenario: The default blue links and bullet lists don’t match the design.
Objective: Customize links and lists.
Task:
• Style links with :link, :hover, :active, and :visited pseudo-classes
• Use list-style-type, list-style-position, and remove bullets from nav menus
• Add padding and margin to list items for spacing

7. Table Styling
Scenario: The events admin table needs a cleaner look.
Objective: Format tables using CSS.
Task:
• Style table, th, and td with borders, padding, and background color
• Add zebra striping to rows using nth-child(even)
• Use border-collapse: collapse and text-align: center

8. Box Model & Layout Control


Scenario: Sections are cramped and need spacing.
Objective: Control element spacing with margin, padding, border, and outline.
Task:
• Use developer tools to inspect and tweak box model properties
• Add border, padding, and margin to .eventCard
• Add outline to highlight selected fields in a form
• Compare visibility: hidden vs. display: none

9. Multiple Columns in Text


Scenario: The community bulletin needs to be displayed like a newspaper.
Objective: Use CSS3 multi-column layout.
Task:
• Create a news article section and apply:
column-count: 2;
column-gap: 30px;
column-rule: 1px solid gray;

10. Responsive Web Design with Media Queries


Scenario: Users will access the portal on phones, tablets, and desktops.
Objective: Apply media queries for responsiveness.
Task:
• Add a media query for screens smaller than 768px
• Stack navigation links vertically instead of horizontally
• Reduce image sizes and font sizes
• Use %, vw, vh for flexible layouts
• Bonus: Try Flexbox or Grid for responsive layouts

11. Debug and Test with Dev Tools and VS Code


Scenario: Some users report layout breaking on smaller screens.
Objective: Use DevTools to test styles and debug.
Task:
• Use Chrome’s device toolbar to simulate different screen sizes
• Inspect applied styles and test different values live
• Use the Network tab to check if the external CSS is loaded

You might also like