CSS Tasks

Ade Code

5 min readOct 19, 2026

Task 1:
The Setup: Provide a simple HTML page with three headings: a main title, a section title, and a footer note.

The Task:

Style the main title using an inline style (make it blue directly on the tag).
Style the section title using an internal stylesheet inside the <head> (make it green).
Link an external stylesheet (style.css) and use it to style the footer note (make it gray and italicized).

Task 2:
The Setup: Provide an HTML page with multiple paragraphs, a few buttons, and a unique banner area.

The Task:

Use an element selector to change the font family and text color for all paragraph (<p>) tags.
Create a class called .btn-warning and apply it to one specific button to turn its background yellow.
Create an ID called #site-banner and give it a distinct background color and padding. Remember the rule about IDs being unique!

Task 3:
Provide an HTML page with multiple headings (<h1>, <h2>, <h3>) and paragraph elements that currently have different default browser colors.

The Task: Write a single CSS rule (group selectors) to group all headings (h1, h2, h3) together and set them to share the same dark navy color and custom font. Then, group all buttons (button, input[type="submit"]) to share the same border-radius and padding.

Task 4

Typography Styling Hierarchy (`font`, `font-size`, `font-style`)

Objective: Master text styling properties by building a cleanly structured, readable typographic hierarchy.

Create an HTML file (typography.html) with an <h1> (Main Title), an <h2> (Subtitle), a <p> (Paragraph of text), and a <blockquote> (Featured Quote).
Create a linked CSS file (style.css) and apply the following:

font-size & font shorthand: Style the <h1> using a relative unit like rem (e.g., 2.5rem) and use the font shorthand property on the paragraph to define weight, size, and family in one line (e.g., font: italic 1rem/1.5 Arial, sans-serif;).
font-style: Use font-style: italic or oblique specifically on the <blockquote> and the subtitle to make them stand out.

Task 5: Box Model Dissection (`padding` and `margin`)

Objective: Understand how padding (internal space) and margin (external space) interact to structure layout components.

Create a <div> with the class .card containing a heading and a short description.
Add a visible border (border: 2px solid #333;) and a background color so you can clearly see the edges of the box.
Experiment with Padding: Apply generous padding (e.g., 20px or 2rem) to the card. Notice how the text moves away from the border.
Experiment with Margin:

Add margin: 0 auto; to center the card horizontally on the page.
Add top and bottom margins (e.g., margin-top: 50px;) to push it away from other elements.

5. Challenge: Try using shorthand vs. longhand properties (e.g., padding: 10px 20px 15px 5px; vs padding-top: 10px;).

Task 6: Layout Constraints (`min-width`, `max-width`, `min-height`, `max-height`)

Objective: Control element boundaries to make components responsive and prevent layout breaking.

Create a .banner <div> containing a call-to-action message.
Apply a max-width of 600px and a min-height of 150px to the banner.
Set margin: 0 auto; so it centers nicely.
Resize Test: Open your browser’s Developer Tools (F12), shrink the window width below 600px, and observe how the max-width forces the banner to scale down cleanly with the viewport without overflowing the screen.

Final Capstone Project: The “Article Preview Card”

Objective: Combine typography, the box model, padding/margins, and sizing constraints into a polished, real-world UI component.

Get Ade Code’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Build a responsive article preview card containing:

Container (.article-card): Give it a max-width of 400px, a light background color, a subtle border or box-shadow, and a pleasant internal padding of 24px.
Image/Header: Add an image placeholder or an <h2> styled with a clean font-size and bold weight.
Body Text (<p>): Style the text using custom font-size and a distinct font-style for the author's name or metadata.
Spacing: Use margin to give the card breathing room from the top and sides of the browser window, and fine-tune the margin between the heading and the paragraph so they don't look cramped.

List, Table and Display tasks

Task 1: Custom Navigation & Resource Lists (`lists` & `display`)

Create an HTML file (lists_display.html) containing:

A navigation menu using a <ul> and <li> elements.
A “Resources” list with custom list styles.

2. In your CSS file, apply the following:

List Customization: Remove default bullet points (list-style-type: none) from the navigation list.
Display Transformation: Change the list items (<li>) from block elements to display: inline-block (or display: inline) so they sit side-by-side horizontally. Add padding and a background color to make them look like buttons.
Custom Markers: On the resource list, explore list-style-position: inside vs outside, or use custom styling. Use display: none to temporarily hide a specific "deprecated" resource item.

📊 Task 2: Academic Grade Ledger (`table styles` & `alignment`)

Objective: Transform a plain HTML table into a clean, professional academic grade report using custom styles, borders, and alignment.

Create a table (<table>) with a header (<thead>), body (<tbody>), and columns for Course, Assignment, Score, and Status.
Style the table using the following rules:

Borders & Collapse: Apply border-collapse: collapse; to remove double borders, and add a subtle border to cells (<td> and <th>).
Zebra Striping: Use structural pseudo-classes like nth-child(even) to give alternating rows a soft background color for readability.

Alignment:

Align text headers and descriptions to the left (text-align: left).
Align numerical scores and statuses to the center or right (text-align: right).
Use vertical-align: middle to ensure all cell contents line up nicely vertically.
Spacing: Add generous padding inside table cells so the text isn’t cramped against the borders.

📱 Task 3: Mobile-Ready Semester Timetable (`table responsiveness`)

Objective: Handle the common web design challenge where wide tables break layout boundaries on small mobile screens.

Create a large timetable containing 6 columns (Days of the week + Times + Course info).
Wrap the <table> element inside a <div> with a class like .table-container.
Apply CSS responsiveness rules:

Set a fixed or minimum width on the table itself (e.g., min-width: 650px) so it forces its layout structure.
Apply overflow-x: auto; to the parent container wrapper.

Test it: Open your browser’s Developer Tools (F12), shrink the screen down to smartphone size, and verify that a clean horizontal scrollbar appears on the container instead of breaking the entire page layout or clipping text.