Scribd
Upload
3 views34 pages

SDC Day 2 Workbook Css

The document provides a comprehensive guide on using CSS to enhance the visual appeal of a basic HTML portfolio website. It covers essential concepts such as CSS syntax, selectors, the box model, and layout techniques like Flexbox and CSS Grid. Additionally, it includes hands-on exercises for practical application of the learned concepts.

Uploaded by

THEGAMER
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
3 views34 pages

SDC Day 2 Workbook Css

The document provides a comprehensive guide on using CSS to enhance the visual appeal of a basic HTML portfolio website. It covers essential concepts such as CSS syntax, selectors, the box model, and layout techniques like Flexbox and CSS Grid. Additionally, it includes hands-on exercises for practical application of the learned concepts.

Uploaded by

THEGAMER
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/ 34

CSS Fundamentals: Styling Your Web

Pages

Table of Contents

. Real-Time Scenario: Revamping Alex's Portfolio Website

. Conversational Learning Journey

. Core Concepts Deep Dive

. Hands-On Exercises

. Step-by-Step Solutions

. Summary and Next Steps

Real-Time Scenario - Revamping Alex's Portfolio Website

Meet Your Learning Partners

User: Alex, a computer science undergraduate student who has successfully built the
basic structure of their personal portfolio website using HTML.

Expert: Expert, a web development instructor with years of experience in teaching


HTML and web technologies.

The Challenge

Alex has a functional HTML portfolio website, but it looks quite plain. All the text is black,
the background is white, and everything is aligned to the left. It lacks visual appeal and
doesn't stand out. Alex wants to make the website look professional and engaging for
potential internship employers.
Alex approaches Expert again, eager to learn how to add style and flair to their website.
The goal is to transform the basic HTML structure into a visually appealing and well-
designed online portfolio.

The Learning Conversation Begins

Alex: Expert, my HTML portfolio is working, but it looks... well, very basic. It's just plain
text on a white background. How can I make it look good? I want to add colors, change
fonts, and arrange things nicely.

Expert: That's a fantastic next step, Alex! This is where CSS comes into play. CSS stands for
Cascading Style Sheets. If HTML is the skeleton of your website, CSS is the skin, clothes,
and makeup. It controls the presentation, layout, and appearance of your web pages.

Alex: So, CSS is all about making things pretty?

Expert: Exactly! With CSS, you can control colors, fonts, spacing, positioning, and even
create animations. It allows you to separate the content (HTML) from its presentation
(CSS), which makes your code cleaner, easier to maintain, and more flexible.

Alex: That sounds powerful! But how do I actually use CSS? Where do I write it, and how
does it connect to my HTML?

Expert: Great question! There are three main ways to include CSS in your HTML
document:

. Inline CSS: Applying styles directly to an HTML element using the style attribute.
This is generally discouraged for larger projects because it mixes content and
presentation.

. Internal CSS: Placing CSS rules within a <style> tag in the <head> section of your
HTML document. This is useful for single-page styles.

. External CSS: Linking an external .css file to your HTML document. This is the
most common and recommended method for larger websites, as it allows you to
style multiple HTML pages from a single CSS file.

Alex: So, external CSS sounds like the best practice?

Expert: For sure! It promotes reusability and makes your website easier to manage.
Imagine if you had pages on your portfolio and wanted to change the main heading
color. With external CSS, you'd change it in one file, and it would update across all
pages. With inline or internal CSS, you'd have to change it times!

Alex: Wow, that's a huge time-saver. So, how do I link an external CSS file?

Expert: You use the <link> tag inside the <head> section of your HTML. It looks like this:

<head>
<link rel="stylesheet" href="styles.css">
</head>

Expert: The rel="stylesheet" attribute tells the browser that this is a stylesheet, and
href="styles.css" points to the location of your CSS file. You'd typically name your
main CSS file styles.css or main.css .

Alex: Okay, I think I understand how to connect them. But once I have my styles.css
file, what do I write inside it? What does CSS code look like?

Expert: Excellent question! Let's dive into the basic syntax of CSS rules. This is where you
tell the browser what to style and how to style it.

Core Concepts Deep Dive

CSS Syntax: Rules, Selectors, Properties, and Values

Expert: A CSS rule consists of a selector and a declaration block. The selector points to the
HTML element you want to style, and the declaration block contains one or more
declarations separated by semicolons. Each declaration includes a CSS property name
and a value, separated by a colon.

Here's a visual breakdown:

h1 {
color: blue; /* This is a declaration */
font-size: 24px; /* This is another declaration */
}

p {
text-align: center;
color: black;
}

Expert: In the example above:


h1 and p are selectors.

color and font-size are properties.

blue , 24px , center , and black are values.

The entire block within the curly braces {} is the declaration block.

Take a look at this diagram for a clearer picture of the syntax:

Alex: So, I pick an HTML element, and then I tell CSS what properties of that element I
want to change and what values I want them to have?

Expert: Exactly! You've got the core idea. Now, let's talk more about selectors, because
they are incredibly powerful for targeting specific elements.

CSS Selectors: Targeting Elements with Precision

Expert: Selectors are how you tell CSS which HTML elements to apply styles to. There are
many types of selectors, but let's focus on the most common ones:

. Element Selector: Selects HTML elements based on their name (e.g., p , h1 , body ).
css p { color: green; }

. ID Selector: Selects an element with a specific id attribute. An ID must be unique


within an HTML document. It's preceded by a # symbol. html <h1 id="main-
title">My Portfolio</h1> css #main-title { font-family: Arial, sans-
serif; }
. Class Selector: Selects elements with a specific class attribute. A class can be used
by multiple HTML elements. It's preceded by a . symbol. html <p
class="highlight">Important text</p> <div class="highlight">Another
highlighted section</div> css .highlight { background-color: yellow; }

. Universal Selector: Selects all HTML elements on the page. It's represented by an
asterisk ( * ). ```css
{ margin: ; padding: ; } ``` (This is often used to reset default browser styles.)

Expert: Here's a visual guide that summarizes various selectors:


Alex: So, if I want to style all paragraphs, I use p . If I want to style a unique title, I use
#main-title . And if I want to style multiple elements that share a common
characteristic, I use a class like .highlight ?

Expert: You've perfectly grasped the concept, Alex! Understanding selectors is


fundamental to effective CSS. Now, let's move on to a crucial concept for layout and
spacing: the CSS Box Model.

The CSS Box Model: Understanding Element Dimensions

Expert: Every HTML element on a web page can be thought of as a rectangular box. This

box is governed by the CSS Box Model, which describes how element dimensions are
calculated, including content, padding, borders, and margins.

Alex: So, every heading, paragraph, or image is a box?

Expert: Exactly! And understanding how these boxes interact is key to controlling your
page layout. The box model consists of four layers, from the innermost to the outermost:

. Content: The actual content of the element, like text or images. Its dimensions are
determined by width and height properties.

. Padding: The space between the content and the border. It pushes the border away
from the content. You can control padding with padding-top , padding-right ,
padding-bottom , padding-left , or the shorthand padding .

. Border: A line that goes around the padding and content. You can style its width ,
style , and color .

. Margin: The space outside the border, separating the element from other elements.
It pushes other elements away from the border. You can control margins with
margin-top , margin-right , margin-bottom , margin-left , or the shorthand
margin .

Expert: Here's a visual representation of the CSS Box Model:


Alex: So, if I set a width and height , that's just for the content area, and then padding,
border, and margin add to the total space the element takes up?

Expert: Precisely! That's a common point of confusion for beginners, but you've got it.
The default box-sizing property is content-box , meaning padding and border are
added outside the specified width and height . However, many developers prefer
border-box , where width and height include padding and border, making layout
calculations more intuitive.

/* Example of box-sizing */
.my-box {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid black;
margin: 10px;
box-sizing: border-box; /* This makes width/height include padding and border */
}

Alex: That box-sizing: border-box; sounds really useful. What about arranging these
boxes on the page? Like, if I want things side-by-side or in a grid?

Expert: Excellent question, Alex! That brings us to modern CSS layout techniques: Flexbox
and CSS Grid. These are incredibly powerful tools for creating complex and responsive
layouts.
CSS Flexbox: One-Dimensional Layout

Expert: Flexbox, or the Flexible Box Module, is designed for one-dimensional layout. This
means you can arrange items in a single row or a single column. It's perfect for
distributing space among items in an interface and aligning them.

Alex: So, if I have a navigation bar and I want the links to be evenly spaced horizontally,
Flexbox would be good for that?

Expert: Exactly! You apply display: flex; to a container element (the

parent) and its direct children become flex items. Then you can use properties like
justify-content (for alignment along the main axis) and align-items (for alignment
along the cross axis).

Here's a simple Flexbox example:

<div class="flex-container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>

.flex-container {
display: flex;
justify-content: space-around; /* Distributes items evenly with space around
them */
align-items: center; /* Aligns items vertically in the center */
height: 100px;
border: 1px solid black;
}

.flex-container div {
padding: 10px;
background-color: lightblue;
border: 1px solid blue;
}

Expert: Flexbox is incredibly versatile for component-level layouts. Take a look at this
visual guide to Flexbox properties:
CSS Grid: Two-Dimensional Layout

Expert: While Flexbox is for one-dimensional layouts (rows or columns), CSS Grid Layout
is for two-dimensional layouts. It allows you to design complex, responsive web page
layouts with rows and columns simultaneously.

Alex: So, if I want to create a full page layout with a header, sidebar, main content area,
and footer, Grid would be better?

Expert: Absolutely! Grid is perfect for overall page layouts. You define rows and columns
on a container element using properties like grid-template-columns and grid-
template-rows , and then you place items into those grid cells.

Here's a basic CSS Grid example:

<div class="grid-container">
<header>Header</header>
<nav>Sidebar</nav>
<main>Main Content</main>
<footer>Footer</footer>
</div>
.grid-container {
display: grid;
grid-template-columns: 1fr 3fr; /* One column takes 1 fraction, the other 3
fractions */
grid-template-rows: auto 1fr auto; /* Header and footer auto-size, main content
takes remaining space */
gap: 10px; /* Space between grid items */
height: 300px;
}

.grid-container header,
.grid-container nav,
.grid-container main,
.grid-container footer {
background-color: lightgray;
padding: 10px;
border: 1px solid gray;
}

.grid-container header,
.grid-container footer {
grid-column: 1 / -1; /* Spans across all columns */
}

Expert: CSS Grid gives you precise control over where elements are placed on your page.
Here's a visual guide to CSS Grid:
Alex: This is amazing! It feels like I can finally build any layout I can imagine. So, Flexbox
for components and Grid for overall page structure?

Expert: That's a great rule of thumb, Alex! They often work together beautifully. Now that
you have a solid understanding of CSS syntax, selectors, the box model, Flexbox, and Grid,
are you ready to apply these concepts to your portfolio?

Alex: Definitely! I can't wait to make my website look professional.


Hands-On Exercises

Exercise : Basic Styling and Box Model (Easy)

Your goal is to create a styles.css file and link it to your index.html (from the HTML
workbook). Then, apply some basic styling:

. Set the background-color of the <body> to a light gray (e.g., #f4f4f4 ).

. Style the <h1> element:


Set its color to a dark blue (e.g., #333366 ).

Center the text using text-align: center; .

Add a padding of 20px and a margin-bottom of 30px .

. Style the <p> element:


Set its font-family to Arial, sans-serif; .

Set its font-size to 16px .

Add a margin of 0 auto to center it horizontally (requires a width to work).

Set a width of 80% .

Add a border of 1px solid #cccccc and padding of 15px .

Exercise : Implementing Flexbox for Navigation (Medium)

Now, let's enhance Alex's index.html by adding a simple navigation bar and styling it
with Flexbox. Modify your index.html and styles.css :

In index.html :

. Inside the <nav> section, add an unordered list ( <ul> ) with three list items ( <li> ).

. Each list item should contain an anchor tag ( <a> ) with placeholder links (e.g.,
href="#" ). The text for the links should be "Home", "Projects", and "Contact".

In styles.css :

. Remove default list styling for the <ul> in the <nav> :


list-style-type: none;

padding: 0;
margin: 0;

. Apply Flexbox to the <ul> element within the <nav> :


display: flex;

justify-content: space-around; (to distribute links evenly)

align-items: center;

Add a background-color to the <nav> (e.g., #007bff ).

Add padding: 10px 0; to the <nav> .

. Style the <a> tags within the navigation:


color: white;

text-decoration: none;

padding: 5px 15px;

display: block; (to make the padding clickable)

Step-by-Step Solutions

Solution for Exercise : Basic Styling and Box Model

Expert: Alright, Alex, let's start with Exercise . First, you need to create your styles.css
file and link it to your index.html . You remember how to link it, right?

Alex: Yes, in the <head> of index.html , I'll add <link rel="stylesheet"


href="styles.css"> .

Expert: Perfect! Now, open your styles.css file. The first task is to set the background
color of the <body> . How would you write that CSS rule?

Alex: body { background-color: #f4f4f4; }

Expert: Excellent. Next, let's style the <h1> . We need to set its color, center it, and add
padding and margin. What do you think comes next?

Alex: h1 { color: #333366; text-align: center; padding: 20px; margin-bottom:


30px; }
Expert: Spot on! You're picking this up quickly. Finally, for the <p> element, we need to
set font, size, center it, and add a border and padding. How would you write that?

Alex: This one is a bit longer: p { font-family: Arial, sans-serif; font-size:


16px; width: 80%; margin: 0 auto; border: 1px solid #cccccc; padding: 15px;
}

Expert: Fantastic, Alex! You've correctly applied all the properties. The margin: 0 auto;
is a classic trick to center block-level elements horizontally when they have a defined
width . Here's what your styles.css should look like:

/* styles.css */
body {
background-color: #f4f4f4;
}

h1 {
color: #333366;
text-align: center;
padding: 20px;
margin-bottom: 30px;
}

p {
font-family: Arial, sans-serif;
font-size: 16px;
width: 80%;
margin: 0 auto;
border: 1px solid #cccccc;
padding: 15px;
}

Expert: And remember to ensure your index.html has the <link> tag in the <head>
and a basic <h1> and <p> in the <body> .

<!-- index.html (for Exercise 1) -->


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alex's Portfolio</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to My Portfolio</h1>
<p>This is a simple page to showcase my projects and skills.</p>
</body>
</html>

Alex: It looks so much better already! The centering and the border make a huge
difference.
Solution for Exercise : Implementing Flexbox for Navigation

Expert: Great! Now for Exercise , we're going to add a navigation bar and style it with
Flexbox. First, let's update your index.html to include the navigation links. What would
you put inside the <nav> tags?

Alex: I'd add an unordered list with three list items, each containing an anchor tag:

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

Expert: Perfect! Now, let's jump into styles.css to make that navigation bar look good
with Flexbox. What's the first thing you'd do to the <ul> to remove its default styling?

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

Expert: Excellent. Now, to make the list items behave like flex items and distribute
themselves, what property do you apply to the <ul> within the <nav> ?

Alex: nav ul { display: flex; justify-content: space-around; align-items:


center; }

Expert: Spot on! And what about the background color and padding for the <nav> itself?

Alex: nav { background-color: #007bff; padding: 10px 0; }

Expert: You're doing great, Alex! Finally, how would you style the individual links ( <a>
tags) to make them white, remove underlines, and add some padding?

Alex: nav ul li a { color: white; text-decoration: none; padding: 5px 15px;


display: block; }

Expert: Absolutely correct! The display: block; is a subtle but important touch,
making the entire padded area of the link clickable. Here's the complete styles.css for
Exercise :
/* styles.css (for Exercise 2) */
body {
background-color: #f4f4f4;
}

h1 {
color: #333366;
text-align: center;
padding: 20px;
margin-bottom: 30px;
}

p {
font-family: Arial, sans-serif;
font-size: 16px;
width: 80%;
margin: 0 auto;
border: 1px solid #cccccc;
padding: 15px;
}

nav ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
justify-content: space-around;
align-items: center;
}

nav {
background-color: #007bff;
padding: 10px 0;
}

nav ul li a {
color: white;
text-decoration: none;
padding: 5px 15px;
display: block;
}

Expert: And here's the updated index.html :


<!-- index.html (for Exercise 2) -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alex's Portfolio</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Welcome to My Portfolio</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<main>
<p>This is a simple page to showcase my projects and skills.</p>
</main>
<footer>
<p>&copy; 2025 Alex. All rights reserved.</p>
</footer>
</body>
</html>

Expert: How does that look and feel?

Alex: It's incredible! The navigation bar looks so professional, and it was much easier than
I thought with Flexbox. I'm really starting to see how CSS makes websites come alive.

More CSS Properties: Enhancing Visuals

Expert: Beyond the basics, CSS offers a vast array of properties to fine-tune the
appearance of your elements. Let's explore a few that can significantly enhance your
design:

font-weight : Controlling Text Boldness

Expert: The font-weight property sets how thick or thin characters in text should be
displayed. You can use keywords like normal , bold , lighter , bolder , or numerical
values from 100 to 900 (where 400 is normal and 700 is bold ).
Alex: So, font-weight: bold; makes text bold, but I can also use numbers?

Expert: Exactly! Numbers give you more granular control, especially with fonts that offer
many weight variations. For example:

.my-heading {
font-weight: 700; /* Equivalent to bold */
}

.light-text {
font-weight: 300; /* Lighter than normal */
}

text-shadow : Adding Depth to Text

Expert: The text-shadow property adds shadow to text. It takes values for horizontal
offset, vertical offset, blur radius, and color. You can even apply multiple shadows for cool
effects.
Alex: Like a drop shadow in a design program?

Expert: Precisely! It adds depth and visual interest. For instance:

h1 {
text-shadow: 2px 2px 4px #000000; /* Horizontal, Vertical, Blur, Color */
}

.neon-text {
color: #fff;
text-shadow:
0 0 7px #fff,
0 0 10px #fff,
0 0 21px #fff,
0 0 42px #0fa,
0 0 82px #0fa,
0 0 92px #0fa,
0 0 102px #0fa,
0 0 151px #0fa;
}

border-radius : Rounding Corners

Expert: The border-radius property allows you to round the corners of an element's
border. You can apply a single value for all corners, or separate values for each corner
(top-left, top-right, bottom-right, bottom-left).
Alex: So I can make a square box into a circle?

Expert: You absolutely can! If you have a square element, setting border-radius: 50%;
will turn it into a perfect circle. For rectangles, it creates rounded rectangles.

.rounded-box {
border-radius: 10px; /* Applies to all corners */
border: 2px solid blue;
padding: 10px;
}

.pill-button {
border-radius: 25px; /* Creates a pill shape for a rectangular button */
background-color: #007bff;
color: white;
padding: 10px 20px;
}

.circle {
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%; /* Makes it a circle */
}
Expert: These properties, while seemingly small, can dramatically change the aesthetic of
your website. Ready to dive into making your website adapt to different screen sizes?

Alex: Yes! I've heard about responsive design, and it sounds really important for mobile
phones.

Responsive Design and Media Queries: Adapting to Any Screen

Expert: You\'re right, Alex. With so many different devices accessing the internet today ‒
from tiny smartwatches to large desktop monitors ‒ responsive web design is no longer
optional; it\'s essential. Responsive design is an approach to web design that makes web
pages render well on a variety of devices and window or screen sizes.

Alex: How does a website know what size screen it's on?

Expert: That's where Media Queries come in! Media queries are a CSS module that
allows you to apply CSS styles depending on a device's characteristics, such as screen
width, height, orientation, and resolution. They let you write different CSS rules for
different screen sizes.

Expert: The most common use of media queries is to create breakpoints. A breakpoint is
a point at which a website's content and design will adapt to provide the best possible
user experience. For example, you might have one layout for desktops, another for
tablets, and a third for mobile phones.
Here's the basic syntax:

/* Styles for screens wider than 768px (e.g., tablets and desktops) */
body {
font-size: 18px;
}

/* Media query for screens up to 768px wide (e.g., mobile phones) */


@media screen and (max-width: 768px) {
body {
font-size: 16px;
}
.my-container {
width: 100%;
padding: 10px;
}
}

/* Media query for screens between 480px and 768px */


@media screen and (min-width: 480px) and (max-width: 768px) {
/* Tablet-specific styles */
}

Expert: The @media rule specifies the type of media (e.g., screen for computer screens)
and conditions (e.g., max-width: 768px ). When these conditions are met, the CSS rules
inside the media query block are applied.

Alex: So, I can change layouts, font sizes, and even hide elements based on screen size?

Expert: Exactly! You can adjust almost any CSS property. This allows you to create a single
website that looks great on any device, rather than building separate versions for mobile
and desktop. It's a cornerstone of modern web development.

Expert: Now, let's talk about making things move and grab attention: CSS Animations!

CSS Animations: Bringing Elements to Life

Expert: CSS animations allow you to create smooth, interactive, and engaging visual
effects without relying on JavaScript. They involve two main components: keyframes and
the animation properties.
Alex: What are keyframes?

Expert: Think of keyframes like the critical poses in a traditional animation. You define
what an element should look like at specific points during the animation (e.g., at %, %,
and % of the animation duration). The browser then smoothly transitions between
these keyframes.

Here's how you define keyframes:

@keyframes slideIn {
0% {
transform: translateX(-100%);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}

Expert: Once you define your keyframes, you apply the animation to an element using
various animation properties:

animation-name : The name of the @keyframes rule to bind to the selector.

animation-duration : The length of time an animation takes to complete one cycle.

animation-timing-function : How an animation progresses over the duration of


each cycle (e.g., ease , linear , ease-in-out ).
animation-delay : The amount of time to wait before starting the animation.

animation-iteration-count : The number of times an animation should be played


(e.g., 1 , infinite ).

animation-direction : Whether the animation should play forwards, backwards, or


alternate cycles.

animation-fill-mode : What styles are applied to the element before and after the
animation.

animation-play-state : Whether the animation is running or paused.

Expert: You can combine these into a shorthand animation property. For example, to
make a text element slide in:

h1 {
animation: slideIn 1s ease-out forwards;
}

Alex: So, I can make text appear with a cool effect, or even make images move?

Expert: Absolutely! You can animate almost any CSS property. For images, you might
make them fade in, slide across the screen, or even rotate. For example, a simple image
hover effect:

.my-image {
transition: transform 0.3s ease-in-out; /* Smooth transition for transform
property */
}

.my-image:hover {
transform: scale(1.1); /* Zooms in the image on hover */
}

Expert: This uses transition , which is simpler for single-state changes, while
animation with @keyframes is for more complex, multi-state sequences. Both are
powerful tools for adding dynamic flair to your portfolio.

Alex: This is incredible! I can't wait to try these out. My portfolio is going to look so much
more professional and engaging.
Hands-On Exercises

Exercise : Styling with New Properties (Easy)

Let's apply some of the new CSS properties to your index.html and styles.css :

. font-weight : Make the <h1> element even bolder by setting its font-weight to
900 .

. text-shadow : Add a subtle text-shadow to your <h1> element: 2px 2px 5px
rgba(0,0,0,0.5) .

. border-radius : Apply a border-radius of 8px to your <p> element to give it


slightly rounded corners.

Exercise : Responsive Navigation and Simple Animation (Medium)

Now, let's make your navigation responsive and add a simple animation:

. Responsive Navigation (Media Query):


Modify your styles.css to make the navigation links stack vertically on
smaller screens.

Inside a media query for screens with a max-width of 600px :


Set nav ul to flex-direction: column; .

Set nav ul li to width: 100%; and text-align: center; .

Add margin-bottom: 5px; to nav ul li .

. Simple Text Animation (Keyframes):


Create a new div in your index.html (e.g., <div class="animated-text">My
Awesome Projects</div> ) right after your <main> section.

In styles.css , define a @keyframes rule named fadeInUp that makes the


text fade in from below: css @keyframes fadeInUp { 0% { opacity: 0;
transform: translateY(20px); } 100% { opacity: 1; transform:
translateY(0); } }

Apply this animation to your .animated-text div:


animation: fadeInUp 1s ease-out 0.5s forwards;

text-align: center;

font-size: 2em;
margin-top: 50px;

Step-by-Step Solutions Dialogue

Solution for Exercise : Styling with New Properties

Expert: Alright, Alex, let's enhance your existing styles.css with these new properties.
First, for the <h1> element, how would you make it even bolder and add a text shadow?

Alex: I'd modify the h1 rule like this:

h1 {
color: #333366;
text-align: center;
padding: 20px;
margin-bottom: 30px;
font-weight: 900; /* New */
text-shadow: 2px 2px 5px rgba(0,0,0,0.5); /* New */
}

Expert: Perfect! Now, for the <p> element, how would you add rounded corners?

Alex: I'd add border-radius: 8px; to the p rule:

p {
font-family: Arial, sans-serif;
font-size: 16px;
width: 80%;
margin: 0 auto;
border: 1px solid #cccccc;
padding: 15px;
border-radius: 8px; /* New */
}

Expert: Excellent, Alex! You've successfully applied these new properties. Here's the
updated styles.css :
/* styles.css (Updated for Exercise 1) */
body {
background-color: #f4f4f4;
}

h1 {
color: #333366;
text-align: center;
padding: 20px;
margin-bottom: 30px;
font-weight: 900;
text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}

p {
font-family: Arial, sans-serif;
font-size: 16px;
width: 80%;
margin: 0 auto;
border: 1px solid #cccccc;
padding: 15px;
border-radius: 8px;
}

nav ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
justify-content: space-around;
align-items: center;
}

nav {
background-color: #007bff;
padding: 10px 0;
}

nav ul li a {
color: white;
text-decoration: none;
padding: 5px 15px;
display: block;
}

Alex: The text shadow looks really cool, and the rounded corners make the paragraph
look softer!

Solution for Exercise : Responsive Navigation and Simple Animation

Expert: Fantastic! Now for the more advanced Exercise . First, let's make your navigation
responsive using a media query. How would you add the media query and the styles for
smaller screens?

Alex: I'd add this to the end of styles.css :


@media screen and (max-width: 600px) {
nav ul {
flex-direction: column;
}
nav ul li {
width: 100%;
text-align: center;
margin-bottom: 5px;
}
}

Expert: Excellent! That will make your navigation stack vertically on smaller screens. Now,
let's add the animated text. First, you need to add the div to your index.html . Where
would you put it?

Alex: Right after the <main> section:

<main>
<p>This is a simple page to showcase my projects and skills.</p>
</main>
<div class="animated-text">My Awesome Projects</div> <!-- New -->
<footer>
<p>&copy; 2025 Alex. All rights reserved.</p>
</footer>
</body>
</html>

Expert: Perfect. Now, in styles.css , how would you define the fadeInUp keyframes
and apply the animation to the .animated-text div?

Alex: Like this:

@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}

.animated-text {
animation: fadeInUp 1s ease-out 0.5s forwards;
text-align: center;
font-size: 2em;
margin-top: 50px;
}

Expert: You've nailed it, Alex! The forwards value for animation-fill-mode is
important here, as it ensures the element retains the styles from the last keyframe ( %)
after the animation finishes. Here's the complete updated styles.css and index.html :
/* styles.css (Final for Exercise 2) */
body {
background-color: #f4f4f4;
}

h1 {
color: #333366;
text-align: center;
padding: 20px;
margin-bottom: 30px;
font-weight: 900;
text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}

p {
font-family: Arial, sans-serif;
font-size: 16px;
width: 80%;
margin: 0 auto;
border: 1px solid #cccccc;
padding: 15px;
border-radius: 8px;
}

nav ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
justify-content: space-around;
align-items: center;
}

nav {
background-color: #007bff;
padding: 10px 0;
}

nav ul li a {
color: white;
text-decoration: none;
padding: 5px 15px;
display: block;
}

@media screen and (max-width: 600px) {


nav ul {
flex-direction: column;
}
nav ul li {
width: 100%;
text-align: center;
margin-bottom: 5px;
}
}

@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}

.animated-text {
animation: fadeInUp 1s ease-out 0.5s forwards;
text-align: center;
font-size: 2em;
margin-top: 50px;
}

<!-- index.html (Final for Exercise 2) -->


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alex's Portfolio</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Welcome to My Portfolio</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<main>
<p>This is a simple page to showcase my projects and skills.</p>
</main>
<div class="animated-text">My Awesome Projects</div>
<footer>
<p>&copy; 2025 Alex. All rights reserved.</p>
</footer>
</body>
</html>

Alex: This is incredible! The responsive navigation is so important, and the animation
adds a really professional touch. I feel like I can build anything now!

Summary and Next Steps

Expert: Today, Alex, you've truly elevated your web development skills. You've learned:

What CSS is and its role in controlling the presentation of web pages.

The three ways to include CSS in HTML (inline, internal, external) and why external is
preferred.

The basic CSS syntax: rules, selectors, properties, and values.


How to use common CSS selectors (element, ID, class, universal) to target specific
HTML elements.

The CSS Box Model and how content, padding, border, and margin affect element
dimensions.

The fundamentals of Flexbox for one-dimensional layouts and its key properties.

The fundamentals of CSS Grid for two-dimensional layouts and its key properties.

How to use advanced CSS properties like font-weight , text-shadow , and border-
radius to refine your designs.

The critical importance of responsive web design and how to implement it using CSS
Media Queries to adapt your site to various screen sizes.

The fundamentals of CSS Animations, including defining @keyframes and applying


animation properties to create dynamic visual effects for text and images.

Alex: I'm so excited to apply all of this to my actual portfolio. Thank you, Expert, for
guiding me through this!

Expert: You're very welcome, Alex. Your progress has been remarkable. For your
continued learning, I recommend:

. Experimenting with more complex CSS animations and transitions, perhaps


exploring libraries like Animate.css.

. Delving deeper into advanced responsive design techniques, such as min-width vs.
max-width strategies and mobile-first design.

. Starting to think about user experience (UX) and user interface (UI) design principles
to make your visually appealing website also highly usable.

We'll meet again soon to discuss JavaScript, which will add interactivity to your portfolio.
Keep practicing!

References

[ ] GeeksforGeeks. (n.d.). CSS Syntax. Retrieved from https://www.geeksforgeeks.org/css-


syntax/ [ ] Reddit. (n.d.). CSS Selectors, visually explained.. Retrieved from
https://www.reddit.com/r/webdev/comments/ e/css_selectors_visually_explained/
[ ] GCF Global. (n.d.). Basic CSS: The CSS Box Model. Retrieved from
https://edu.gcfglobal.org/en/basic-css/the-css-box-model/ / [ ] Medium. (n.d.). CSS
Flexbox Fundamentals Visual Guide. Retrieved from
https://medium.com/@marina.ferreira/css-flexbox-fundamentals-visual-guide-
b fh fd pk [ ] CSS-Tricks. (n.d.). CSS Grid Layout Guide. Retrieved from https://css-
tricks.com/snippets/css/complete-guide-grid/ [ ] Programiz. (n.d.). CSS Font Weight.
Retrieved from https://www.programiz.com/css/font-weight [ ] MakeUseOf. (n.d.). CSS
Text Shadow Examples for You to Try on Your Website. Retrieved from
https://www.makeuseof.com/css-text-shadow-examples/ [ ] Programiz. (n.d.). CSS
border-radius Property. Retrieved from https://www.programiz.com/css/border-radius [ ]
BrowserStack. (n.d.). How to use CSS Breakpoints & Media Query Breakpoints. Retrieved
from https://www.browserstack.com/guide/css-breakpoints-media-queries [ ]
LambdaTest. (n.d.). The Ultimate Guide to CSS Keyframes Animation. Retrieved from
https://www.lambdatest.com/blog/css-keyframes-animation/

You might also like