CSS Exam 1: Fundamentals - 20 Exercises

Exercise 1 CSS Inclusion Methods

Apply the following styles using three different methods:

Make the paragraph text red using inline style.
Set the page background to gray using an internal <style> tag in the head.
Link an external stylesheet named "style.css".

Solution

<!-- 1. Inline Style -->
<p style="color: red;">Red text</p>

<!-- 2. Internal Style -->
<head>
    <style>
        body { background-color: gray; }
    </style>

    <!-- 3. External Style -->
    <link rel="stylesheet" href="style.css">
</head>

Exercise 2 Basic Selectors

Write CSS rules for the following:

Center-align all paragraphs (p).
Make the element with id="header" blue.
Give elements with class="btn" a green background.

Solution

/* Element Selector */
p {
    text-align: center;
}

/* ID Selector */
#header {
    color: blue;
}

/* Class Selector */
.btn {
    background-color: green;
}

Exercise 3 Colors & Backgrounds

Style a div with the following:

White text color.
Black background using hex code (#000000).
A background image "bg.jpg" that does not repeat and covers the element.

Solution

div {
    color: white;
    background-color: #000000;
    background-image: url('bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

Exercise 4 Text Formatting

Style an h1 with the following:

Uppercase text.
Underline the text.
Set letter spacing to 2px.
Set line height to 1.5.

Solution

h1 {
    text-transform: uppercase;
    text-decoration: underline;
    letter-spacing: 2px;
    line-height: 1.5;
}

Exercise 5 Fonts

Set font properties for a paragraph (p):

Use "Arial" and fall back to "sans-serif".
Set font size to 18px.
Make the font bold.
Make the font italic.

Solution

p {
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    font-style: italic;
}

Exercise 6 Combinators

Write the correct selectors for each case:

Select all paragraphs inside a div (descendant selector).
Select only paragraphs that are direct children of a div (child selector).
Select the paragraph immediately after an h1 (adjacent sibling).

Solution

/* Descendant (space) */
div p { color: red; }

/* Child (>) */
div > p { color: blue; }

/* Adjacent Sibling (+) */
h1 + p { color: green; }

Exercise 7 Pseudo-classes

Style links (a) for the following states:

On hover, make the color red.
On visited, make the color gray.
On active, make the color green.

Solution

a:hover {
    color: red;
}

a:visited {
    color: gray;
}

a:active {
    color: green;
}

Exercise 8 Lists

Style an unordered list (ul) as follows:

Remove the default bullets (list-style-type: none).
Display list items next to each other (inline-block or flex).
Add 10px margin to each item.

Solution

ul {
    list-style-type: none;
    padding: 0;
}

ul li {
    display: inline-block;
    margin: 10px;
}

Exercise 9 Borders

Add borders to a div with the following requirements:

Border thickness 2px, solid, black.
Rounded corners with border-radius 10px.
Make only the top border red.

Solution

div {
    border: 2px solid black;
    border-radius: 10px;
    border-top-color: red;
}

Exercise 10 Opacity & Shadows

Add visual effects to a button:

Make the element semi-transparent (opacity: 0.5).
Add a text shadow of 1px 1px in black.
Add a box shadow of 5px 5px 10px in gray.

Solution

button {
    opacity: 0.5;
    text-shadow: 1px 1px black;
    box-shadow: 5px 5px 10px gray;
}

Exercise 11 CSS Variables Intermediate

Use CSS variables to create a reusable color system:

Define :root variables for --primary-color (blue), --secondary-color (gray), --text-color (black).
Use variables to style a button so its background is var(--primary-color).
Create a --spacing variable with value 20px and use it for padding and margin.
Use a fallback value when a variable is undefined: var(--undefined-color, red).

Solution

/* Define variables in :root */
:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --text-color: #000000;
    --spacing: 20px;
}

/* Use variables */
button {
    background-color: var(--primary-color);
    color: white;
    padding: var(--spacing);
    margin: var(--spacing);
    border: none;
}

/* Use a fallback */
.custom-element {
    color: var(--undefined-color, red);
}

/* Variables can be overridden in different contexts */
.dark-theme {
    --primary-color: #0056b3;
    --text-color: #ffffff;
}

Exercise 12 Advanced Flexbox Intermediate

Create an advanced Flexbox layout:

Create a flex container with 5 items in a single row (flex-direction: row).
Distribute items evenly with space-between.
Align items vertically to the center (align-items: center).
Make the third item grow to take remaining space (flex-grow: 1).
Allow wrapping when needed (flex-wrap: wrap).

Solution

/* Parent container */
.flex-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px; /* space between items */
    padding: 20px;
    background-color: #f0f0f0;
}

/* Child items */
.flex-item {
    background-color: #007bff;
    color: white;
    padding: 20px;
    min-width: 100px;
    text-align: center;
}

/* Third item grows */
.flex-item:nth-child(3) {
    flex-grow: 1;
}

/* Example HTML usage */
/*

    1
    2
    3
    4
    5

*/

Exercise 13 CSS Grid Layout Intermediate

Create an advanced Grid layout:

Create a 3-column grid (grid-template-columns: repeat(3, 1fr)).
Set the gap between cells to 20px.
Make the first item span two columns (grid-column: span 2).
Make the fourth item span two rows (grid-row: span 2).
Use grid-template-areas to define a named layout.

Solution

/* Grid container */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 20px;
    background-color: #f5f5f5;
}

/* Items */
.grid-item {
    background-color: #28a745;
    color: white;
    padding: 30px;
    text-align: center;
    border-radius: 5px;
}

/* First item spans two columns */
.grid-item:nth-child(1) {
    grid-column: span 2;
}

/* Fourth item spans two rows */
.grid-item:nth-child(4) {
    grid-row: span 2;
}

/* Advanced example using grid-template-areas */
.grid-layout {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header header header"
        "sidebar content aside"
        "footer footer footer";
    gap: 15px;
    min-height: 100vh;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }

Exercise 14 Pseudo-elements (::before & ::after) Intermediate

Use pseudo-elements:

Add content before every paragraph using ::before.
Add content after every link using ::after.

Solution

p::before {
    content: "Note: ";
}

a::after {
    content: " →";
}

Exercise 15 calc() Function Intermediate

Use calc() for sizing:

Set width to 100% - 50px.
Set height to 100vh - 80px.

Solution

.container {
    width: calc(100% - 50px);
    height: calc(100vh - 80px);
}

Exercise 16 Advanced Custom Properties Advanced

Create a full color system:

Define variables for primary colors.
Use calc() with variables.

Solution

:root {
    --primary: #007bff;
    --spacing: 1rem;
    --double-spacing: calc(var(--spacing) * 2);
}

.button {
    background: var(--primary);
    padding: var(--double-spacing);
}

Exercise 17 Gradient Backgrounds Advanced

Create gradient backgrounds:

Linear gradient from blue to red.
Radial gradient from the center.

Solution

.linear {
    background: linear-gradient(to right, blue, red);
}

.radial {
    background: radial-gradient(circle, blue, red);
}

Exercise 18 Object-fit & Object-position Advanced

Control image rendering:

Use object-fit: cover.
Position the image at the top using object-position.

Solution

img {
    width: 300px;
    height: 200px;
    object-fit: cover;
    object-position: top;
}

Exercise 19 Writing Modes Advanced

Change writing direction:

Make text vertical from right to left.
Use writing-mode and direction.

Solution

.vertical-text {
    writing-mode: vertical-rl;
    direction: rtl;
}

Exercise 20 Project: Full Product Card Advanced

Create a product card that includes:

An image with object-fit.
A gradient background.
CSS variables for colors.
Flexbox for layout.
Hover effects.

Solution

:root {
    --primary: #007bff;
    --shadow: rgba(0,0,0,0.1);
}

.product-card {
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px var(--shadow);
}

.product-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.product-info {
    padding: 1.5rem;
    color: white;
}

.product-price {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary);
}

DevArabi

CSS Course

CSS Exam 1: Fundamentals and Intermediate (20 Exercises)

CSS Exam: Fundamentals and Intermediate

DevArabi

CSS Course

CSS Exam 1: Fundamentals and Intermediate (20 Exercises)

CSS Exam: Fundamentals and Intermediate

Smart Editor