Styling HTML Pages with CSS

Introduction to CSS Styling

Welcome to this comprehensive guide on styling HTML pages with CSS! Yesterday, you created a multi-page website with various HTML elements. Today, we'll transform those plain HTML pages into visually appealing, professional-looking web pages by applying Cascading Style Sheets (CSS).

CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation of a document written in HTML. CSS describes how elements should be rendered on screen, on paper, in speech, or on other media. It's the language that brings your HTML structure to life with colors, layouts, fonts, and animations.

Real-World Application

Every professionally designed website you visit uses CSS to control its visual presentation. Without CSS, websites would be plain black and white pages with basic text and images. CSS transforms these basic elements into the colorful, organized, and interactive web experiences we're used to seeing. For example:

News Websites: Use CSS for multi-column layouts, distinctive heading styles, and responsive design that works on all devices
E-commerce Sites: Apply CSS for product card layouts, hover effects, navigation menus, and shopping cart interfaces
Social Media Platforms: Utilize CSS for feed layouts, user interfaces, interactive buttons, and notification displays

By learning to effectively style your HTML with CSS, you're mastering a fundamental skill that's essential for all web development projects.

Understanding the Problem

Before we start writing CSS, let's make sure we understand what we're trying to accomplish with this assignment.

Assignment Requirements

The assignment asks us to style the HTML pages from Monday with CSS. Let's break this down:

Style HTML Pages: We need to apply CSS to the multi-page website we created yesterday, which includes:
- Home Page (index.html)
- About Page (about.html)
- Projects Page (projects.html)
- Contact Page (contact.html)
Apply CSS: We need to use CSS to enhance the visual appearance and layout of these pages, including:
- Colors and typography
- Layout and spacing
- Navigation styling
- Form styling
- Responsive design considerations

Questions to Consider

What visual style or theme should we apply to our portfolio website?
How should we organize our CSS code for maintainability?
What CSS selectors should we use to target different elements?
How can we ensure consistency across all pages?
How will our design look on different screen sizes?

Defining Our Approach

For this tutorial, we'll create a clean, professional portfolio design with the following characteristics:

Color Scheme: A professional, minimalist color palette
Typography: Clean, readable fonts with clear hierarchy
Layout: Responsive design that works on all devices
Visual Elements: Subtle shadows, hover effects, and transitions
Organization: Well-structured CSS with comments

This approach will transform our basic HTML structure into a polished, professional portfolio website while demonstrating key CSS concepts and techniques.

Devising a Plan

Now that we understand what we need to accomplish, let's create a systematic plan for styling our multi-page website.

CSS Styling Whiteboard Plan

Set up the CSS file structure
- Create a styles folder in the project root
- Create styles.css within the styles folder
- Link the CSS file to all HTML pages
Define global styles and CSS reset
- Reset browser default styles
- Set base typography (font-family, size, line-height)
- Define color variables using CSS custom properties
- Set default styles for common elements
Create the layout structure
- Style the header and navigation
- Create a responsive container for main content
- Style the footer
Style specific page components
- Home page: Hero section, featured projects
- About page: Bio, skills table, timeline
- Projects page: Project cards, image styling
- Contact page: Form styling, contact info
Add interactive elements and effects
- Hover effects for links and buttons
- Form input focus states
- Simple transitions and animations
Implement responsive design
- Add media queries for different screen sizes
- Adjust layouts for mobile, tablet, and desktop
- Test responsive behavior
Review and refine
- Check for consistency across pages
- Optimize and organize CSS
- Test in different browsers

CSS Organization

We'll organize our CSS file into the following sections:

/* 
 * TABLE OF CONTENTS
 * 
 * 1. CSS Reset & Base Styles
 * 2. Typography
 * 3. Layout & Containers
 * 4. Header & Navigation
 * 5. Footer
 * 6. Home Page Styles
 * 7. About Page Styles
 * 8. Projects Page Styles
 * 9. Contact Page Styles
 * 10. Utility Classes
 * 11. Media Queries
 */

CSS Selectors Strategy

We'll use a combination of selector types:

Element Selectors: For base styling (e.g., body, h1, p)
Class Selectors: For component styling (e.g., .hero, .project-card)
ID Selectors: Used sparingly for unique elements
Descendant Selectors: For targeting elements within specific contexts
Pseudo-classes: For interactive states (e.g., :hover, :focus)

Executing the Plan

Now we'll implement our plan step by step, styling our multi-page website.

Setting Up the CSS File

First, let's create our folder structure and CSS file:

portfolio_website/
├── index.html
├── about.html
├── projects.html
├── contact.html
├── images/
│   ├── profile.jpg
│   ├── project1.jpg
│   ├── project2.jpg
│   └── project3.jpg
└── styles/
    └── styles.css

File path: Create a new folder named styles in your portfolio_website directory, then create a file named styles.css inside it.

Linking CSS to HTML Pages

Add the following link tag to the <head> section of each HTML page:

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

Code explanation: This line creates a connection between your HTML page and the CSS file. The href attribute specifies the path to your CSS file relative to the HTML file.

CSS Reset & Base Styles

Now, let's start writing our CSS file with a reset and base styles:

/* 
 * 1. CSS Reset & Base Styles
 */

/* Reset browser default styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Define custom properties (CSS variables) for colors */
:root {
    /* Main colors */
    --primary-color: #0066cc;        /* Primary brand color - bright blue */
    --primary-dark: #0050a0;         /* Darker version for hover states */
    --secondary-color: #6c757d;      /* Secondary/accent color - medium gray */
    --text-color: #333333;           /* Main text color - dark gray */
    --text-light: #777777;           /* Lighter text for secondary content */
    --background-color: #ffffff;     /* Main background - white */
    --background-alt: #f8f9fa;       /* Alternative background - light gray */
    --border-color: #dee2e6;         /* Border color - light gray */
    
    /* Feedback colors */
    --success-color: #28a745;        /* Success messages - green */
    --error-color: #dc3545;          /* Error messages - red */
    --warning-color: #ffc107;        /* Warning messages - yellow */
    --info-color: #17a2b8;           /* Info messages - teal */
}

/* Base styles for the body */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--background-color);
}

/* Make images responsive */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Remove list styles */
ul, ol {
    list-style: none;
}

/* Basic link styling */
a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

/* Button styles */
.button {
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.button:hover {
    background-color: var(--primary-dark);
    text-decoration: none;
}

/* Secondary button variant */
.button-secondary {
    background-color: var(--secondary-color);
}

.button-secondary:hover {
    background-color: #5a6268; /* Darker gray for hover */
}

Code explanation:

The * selector applies styles to all elements. We use it to reset margins and padding and set box-sizing: border-box so that padding and borders are included in element widths.
The :root selector defines CSS custom properties (variables) that we can reuse throughout our stylesheet. This makes it easy to maintain a consistent color scheme.
We set base styles for common elements like body, img, lists, and links.
The .button class defines a reusable button style that we can apply to both <a> and <button> elements.
We use transition properties to create smooth hover effects.

Typography Styles

/* 
 * 2. Typography
 */

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
    position: relative;
    padding-bottom: 0.5rem;
}

/* Add a decorative underline to h2 elements */
h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 3px;
    background-color: var(--primary-color);
}

h3 {
    font-size: 1.5rem;
}

h4 {
    font-size: 1.25rem;
}

p {
    margin-bottom: 1rem;
}

/* Make the first paragraph after headings larger */
h1 + p, h2 + p, h3 + p {
    font-size: 1.1rem;
}

/* Style for highlighted/emphasized text */
.highlight {
    color: var(--primary-color);
}

/* Blockquote styling */
blockquote {
    font-style: italic;
    border-left: 4px solid var(--primary-color);
    padding-left: 1rem;
    margin: 1.5rem 0;
    color: var(--text-light);
}

Code explanation:

We define consistent heading styles with a clear hierarchy (h1 through h6).
The h2::after pseudo-element creates a decorative underline under h2 headings.
We use the adjacent sibling combinator (h1 + p) to style paragraphs that immediately follow headings.
The .highlight class can be applied to emphasize important text.
Blockquotes are styled with a left border and italic text for a distinctive appearance.

Layout & Containers

/* 
 * 3. Layout & Containers
 */

/* Main content container */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Section styling */
section {
    padding: 3rem 0;
}

/* Create a two-column layout with flexbox */
.two-column {
    display: flex;
    gap: 2rem;
}

.two-column > * {
    flex: 1; /* Each column takes equal width */
}

/* Responsive fix for mobile */
@media (max-width: 768px) {
    .two-column {
        flex-direction: column;
    }
}

/* Grid layout for cards */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
}

Code explanation:

The .container class creates a centered, responsive container with a maximum width.
We give all sections consistent vertical padding.
The .two-column class uses flexbox to create a simple two-column layout.
We include a media query to make the two-column layout stack vertically on smaller screens.
The .grid class uses CSS Grid to create a responsive grid of cards that automatically adjusts based on screen size.

Header & Navigation

/* 
 * 4. Header & Navigation
 */

header {
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 1rem 0;
}

/* Flex layout for header */
header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Logo styling */
header h1 {
    font-size: 1.8rem;
    margin-bottom: 0;
}

/* Navigation styling */
nav ul {
    display: flex;
    gap: 1.5rem;
}

nav a {
    color: var(--text-color);
    font-weight: 500;
    padding: 0.5rem 0;
    position: relative;
}

/* Underline effect for navigation links */
nav a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: width 0.3s ease;
}

nav a:hover::after,
nav a.active::after {
    width: 100%;
}

nav a:hover {
    text-decoration: none;
    color: var(--primary-color);
}

/* Active navigation link */
nav a.active {
    color: var(--primary-color);
}

/* Mobile navigation toggle */
.mobile-nav-toggle {
    display: none;
    font-size: 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
}

/* Responsive navigation */
@media (max-width: 768px) {
    .mobile-nav-toggle {
        display: block;
    }
    
    nav ul {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: white;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        padding: 1rem;
    }
    
    nav.active ul {
        display: flex;
    }
}

Code explanation:

We use position: sticky to make the header stay at the top of the screen when scrolling.
Flexbox (display: flex) is used to align the logo and navigation.
We create an animated underline effect for navigation links using the ::after pseudo-element and transitions.
The .active class is used to highlight the current page in the navigation.
We include responsive styles for a mobile menu toggle on smaller screens.

Footer Styles

/* 
 * 5. Footer
 */

footer {
    background-color: var(--text-color);
    color: white;
    padding: 2rem 0;
    margin-top: 3rem;
}

footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

footer p {
    margin-bottom: 0;
}

/* Social media links in footer */
.social-links {
    display: flex;
    gap: 1rem;
}

.social-links a {
    color: white;
    font-size: 1.2rem;
}

/* Responsive footer */
@media (max-width: 768px) {
    footer .container {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
}

Code explanation:

The footer has a dark background with white text for contrast.
We use flexbox to align footer content and include responsive adjustments for smaller screens.

Home Page Styles

/* 
 * 6. Home Page Styles
 */

/* Hero section */
.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 4rem 0;
    background-color: var(--background-alt);
}

.hero img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
}

.hero h2 {
    margin-bottom: 0.5rem;
}

.hero h3 {
    color: var(--text-light);
    font-weight: 400;
    margin-bottom: 1.5rem;
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

/* Featured projects section */
.featured-projects {
    padding: 4rem 0;
}

.featured-projects h2 {
    text-align: center;
    margin-bottom: 2rem;
}

.project-card {
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

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

.project-card h3 {
    margin: 1.5rem 0 0.5rem 0;
    padding: 0 1.5rem;
}

.project-card p {
    padding: 0 1.5rem;
    color: var(--text-light);
}

.project-card a {
    display: inline-block;
    padding: 0 1.5rem 1.5rem;
}

/* About preview section */
.about-preview {
    background-color: var(--background-alt);
    padding: 4rem 0;
    text-align: center;
}

.about-preview p {
    max-width: 800px;
    margin: 0 auto 1.5rem;
}

Code explanation:

The hero section is centered with a circular profile image and prominent text.
Project cards have hover effects that lift them slightly and increase their shadow for a subtle 3D effect.
We use object-fit: cover to ensure images maintain their aspect ratio while filling their container.
The about preview section has a different background color to create visual separation.

About Page Styles

/* 
 * 7. About Page Styles
 */

/* About me section */
.about-me {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 3rem;
}

.about-me img {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
}

/* Skills section */
.skills {
    margin-bottom: 3rem;
}

/* Style the skills table */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
}

th, td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

th {
    background-color: var(--background-alt);
    font-weight: 600;
}

/* Style for alternating table rows */
tbody tr:nth-child(even) {
    background-color: var(--background-alt);
}

/* Education and experience section */
.education ol, 
.education dl {
    margin-left: 1.5rem;
    margin-bottom: 1.5rem;
}

.education li, 
.education dt {
    margin-bottom: 1rem;
}

.education h4 {
    margin-bottom: 0.25rem;
}

.education p {
    color: var(--text-light);
    margin-bottom: 0.5rem;
}

dt {
    font-weight: 700;
    margin-top: 1rem;
}

dd {
    margin-left: 1rem;
    margin-bottom: 0.5rem;
}

/* Video section */
.video-intro {
    text-align: center;
}

.video-intro video {
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

Code explanation:

The about page maintains the circular profile image style from the home page.
Tables have alternating row colors for better readability.
Lists are styled with proper spacing and indentation.
The video element is styled with rounded corners and a subtle shadow.

Projects Page Styles

/* 
 * 8. Projects Page Styles
 */

/* Projects introduction */
.projects-intro {
    text-align: center;
    margin-bottom: 2rem;
}

/* Individual project sections */
.project {
    margin-bottom: 4rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid var(--border-color);
}

.project:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* Project images with captions */
figure {
    margin-bottom: 1.5rem;
}

figure img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

figcaption {
    text-align: center;
    margin-top: 0.5rem;
    color: var(--text-light);
    font-style: italic;
}

/* Project details */
.project-details {
    margin-top: 2rem;
}

.project-details h4 {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.project-details ul,
.project-details ol {
    margin-left: 1.5rem;
    margin-bottom: 1.5rem;
}

.project-details li {
    margin-bottom: 0.5rem;
}

/* Add bullets back to project lists */
.project-details ul li {
    list-style-type: disc;
}

.project-details ol li {
    list-style-type: decimal;
}

/* Style for technology tags */
.tech {
    display: inline-block;
    background-color: var(--primary-color);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.9rem;
    margin-right: 0.5rem;
}

/* Project links */
.project-links {
    margin-top: 2rem;
}

.project-links a {
    display: inline-block;
    margin-right: 1rem;
    padding: 0.5rem 1rem;
    background-color: var(--primary-color);
    color: white;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.project-links a:hover {
    background-color: var(--primary-dark);
}

Code explanation:

Project sections are separated with bottom borders.
Figure and figcaption elements are styled for project images with captions.
We restore bullet points and numbers for lists within project details using list-style-type.
Technology tags have a distinctive appearance with background color and rounded corners.
Project links are styled as buttons for better visibility and interaction.

Contact Page Styles

/* 
 * 9. Contact Page Styles
 */

/* Contact introduction */
.contact-intro {
    text-align: center;
    margin-bottom: 2rem;
}

/* Form styling */
.contact-form {
    background-color: var(--background-alt);
    padding: 2rem;
    border-radius: 8px;
    margin-bottom: 3rem;
}

.contact-form h3 {
    margin-bottom: 1.5rem;
}

/* Style fieldsets and legends */
fieldset {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

legend {
    padding: 0 0.5rem;
    font-weight: 600;
}

/* Form groups for label-input pairs */
.form-group {
    margin-bottom: 1rem;
}

/* Label styling */
label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

/* Style for inline labels (radio buttons, checkboxes) */
input[type="radio"],
input[type="checkbox"] {
    margin-right: 0.5rem;
}

input[type="radio"] + label,
input[type="checkbox"] + label {
    display: inline-block;
    margin-right: 1rem;
    margin-bottom: 0;
}

/* Base styles for form controls */
input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Focus state for form controls */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.2);
}

/* Form buttons */
.form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

button {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button[type="submit"] {
    background-color: var(--primary-color);
    color: white;
}

button[type="submit"]:hover {
    background-color: var(--primary-dark);
}

button[type="reset"] {
    background-color: var(--secondary-color);
    color: white;
}

button[type="reset"]:hover {
    background-color: #5a6268; /* Darker gray */
}

/* Contact information */
.contact-info {
    margin-bottom: 3rem;
}

.contact-info h3 {
    margin-top: 2rem;
}

/* Style the address */
address {
    font-style: normal;
    margin-bottom: 1.5rem;
}

address p {
    margin-bottom: 0.5rem;
}

/* Social links */
.social-links {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

/* Map styling */
.location {
    margin-bottom: 3rem;
}

.location iframe {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

Code explanation:

Forms are styled in fieldsets with legends for logical grouping.
Form controls have consistent styling with special focus states.
We handle different form element types (text inputs, checkboxes, radio buttons) with appropriate styling.
The contact information is styled with proper spacing and formatting.
The embedded map is given rounded corners and a shadow for visual consistency.

Utility Classes

/* 
 * 10. Utility Classes
 */

/* Text alignment utilities */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Margin utilities */
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.my-0 { margin-top: 0; margin-bottom: 0; }
.mt-1 { margin-top: 1rem; }
.mb-1 { margin-bottom: 1rem; }
.my-1 { margin-top: 1rem; margin-bottom: 1rem; }
.mt-2 { margin-top: 2rem; }
.mb-2 { margin-bottom: 2rem; }
.my-2 { margin-top: 2rem; margin-bottom: 2rem; }

/* Display utilities */
.d-flex { display: flex; }
.d-block { display: block; }
.d-none { display: none; }

/* Flexbox utilities */
.flex-column { flex-direction: column; }
.justify-center { justify-content: center; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 1rem; }
.gap-2 { gap: 2rem; }

Code explanation:

Utility classes provide quick, reusable styling options that can be applied directly in HTML.
These classes follow a systematic naming pattern for consistency and predictability.
They help reduce redundant CSS by extracting common patterns into reusable classes.

Media Queries for Responsive Design

/* 
 * 11. Media Queries
 */

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    body {
        font-size: 18px;
    }
    
    h1 {
        font-size: 3rem;
    }
    
    h2 {
        font-size: 2.5rem;
    }
    
    h3 {
        font-size: 1.75rem;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991px) {
    /* Adjust spacing */
    section {
        padding: 2.5rem 0;
    }
    
    /* Two columns for project cards on tablets */
    .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Small devices (phones, less than 768px) */
@media (max-width: 767px) {
    /* Adjust typography for mobile */
    body {
        font-size: 16px;
    }
    
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.75rem;
    }
    
    h3 {
        font-size: 1.5rem;
    }
    
    /* Adjust spacing */
    section {
        padding: 2rem 0;
    }
    
    /* Single column for project cards on mobile */
    .grid {
        grid-template-columns: 1fr;
    }
    
    /* Stack form buttons on mobile */
    .form-actions {
        flex-direction: column;
    }
    
    /* Make tables responsive */
    table, th, td {
        display: block;
    }
    
    th {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    
    td {
        position: relative;
        padding-left: 50%;
        text-align: left;
    }
    
    td:before {
        position: absolute;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        font-weight: bold;
    }
    
    /* Add labels for table cells */
    /* You would customize these for your specific table */
    td:nth-of-type(1):before { content: "Category"; }
    td:nth-of-type(2):before { content: "Skills"; }
    td:nth-of-type(3):before { content: "Proficiency"; }
}

Code explanation:

Media queries allow us to apply different styles based on screen size.
We adjust typography, spacing, and layouts for different device sizes.
For mobile devices, we transform tables into a more readable format where each row becomes a card-like element.
We use a mobile-first approach where appropriate, with some desktop-first elements depending on the context.

JavaScript for Toggle Menu

Finally, let's add a small JavaScript snippet to make the mobile menu work. Create a file named script.js in your portfolio folder and add the following code:

// Mobile menu toggle
document.addEventListener('DOMContentLoaded', function() {
    const mobileToggle = document.querySelector('.mobile-nav-toggle');
    const nav = document.querySelector('nav');
    
    if (mobileToggle) {
        mobileToggle.addEventListener('click', function() {
            nav.classList.toggle('active');
        });
    }
});

Then add this script to each HTML page just before the closing </body> tag:

<script src="script.js"></script>

Review and Reflect

Now that we've implemented our CSS styling, let's review what we've accomplished and consider possible improvements.

What We've Accomplished

Created a comprehensive CSS file that styles all pages of our portfolio website
Implemented a professional, clean design with consistent visual elements
Used modern CSS techniques including custom properties, flexbox, and grid
Added subtle animations and hover effects for better user experience
Made the site responsive across different screen sizes
Organized our CSS in a logical, maintainable structure

Key CSS Concepts Applied

Selectors: Element, class, ID, descendant, and pseudo-class selectors
Box Model: Margin, padding, border, and box-sizing
Typography: Font families, sizes, weights, and line heights
Colors: Background, text, and border colors using custom properties
Layout: Flexbox and Grid for responsive layouts
Positioning: Relative, absolute, and sticky positioning
Responsive Design: Media queries for different screen sizes
Transitions and Animations: Hover effects and smooth transitions
Custom Properties: CSS variables for consistent colors and values

Testing and Validation

To ensure our CSS works as expected, we should:

Test the site in different browsers (Chrome, Firefox, Safari, Edge)
Check the responsiveness using browser developer tools
Validate the CSS using the W3C Validator at https://jigsaw.w3.org/css-validator/
Test keyboard navigation and focus states for accessibility
Check color contrast for readability

Possible Improvements

While our CSS implementation is solid, there are several ways it could be improved:

CSS Preprocessing: Use Sass or LESS for more powerful organization and features
CSS Methodology: Implement BEM, SMACSS, or another CSS naming methodology
Animation Enhancements: Add more sophisticated animations for page transitions
Improved Accessibility: Enhance focus styles and screen reader support
Dark Mode: Implement a dark mode theme using CSS custom properties and media queries
Performance Optimization: Minify CSS and consider critical CSS techniques
Print Styles: Add media queries for print styling

Learning Outcomes

Through this exercise, we've learned:

How to transform plain HTML into a visually appealing website using CSS
How to organize CSS in a maintainable, logical structure
How to create responsive designs that work across different devices
How to use modern CSS features like custom properties, flexbox, and grid
How to style different types of content including navigation, forms, and media
How to add interactive elements and effects using CSS transitions

These skills are essential for front-end development and will serve as a foundation for more advanced CSS techniques and frameworks.

Going Beyond the Basics

Now that you've styled your multi-page website with CSS, here are some advanced topics to explore as you continue your web development journey:

Advanced CSS Techniques

CSS Animations and Keyframes: Create more complex animations
CSS Grid Advanced Layouts: Explore grid template areas and auto-fill/auto-fit
CSS Custom Properties for Theming: Create theme switching functionality
Advanced Selectors: Attribute selectors, :not(), :nth-child(), etc.
CSS Functions: calc(), clamp(), min(), max()
CSS Logical Properties: For handling different writing modes and internationalization

CSS Architecture and Organization

As your projects grow, consider these approaches to CSS organization:

BEM (Block Element Modifier): A naming convention for maintainable CSS
SMACSS (Scalable and Modular Architecture for CSS): A style guide for organizing CSS
ITCSS (Inverted Triangle CSS): A CSS architecture for organizing CSS files by specificity
CSS Modules: A CSS file in which all class names and animation names are scoped locally by default
Utility-First CSS: Approaches like Tailwind CSS that use small, single-purpose utility classes

CSS Preprocessors

Preprocessors extend CSS with features like variables, nesting, and mixins:

Sass/SCSS: The most mature and feature-rich preprocessor
Less: A CSS preprocessor that extends CSS with dynamic behavior
Stylus: A flexible preprocessor with a more minimal syntax

CSS Frameworks and Libraries

Explore these popular CSS frameworks to speed up development:

Bootstrap: A comprehensive UI framework with pre-built components
Tailwind CSS: A utility-first CSS framework
Bulma: A modern CSS framework based on Flexbox
Foundation: An advanced responsive front-end framework

Modern CSS Features

Stay up to date with the latest CSS features:

CSS Subgrid: For creating nested grid layouts
Container Queries: For responsive design based on container size rather than viewport
Cascade Layers: For better control over specificity and cascade
:has() Selector: For parent element selection
Color Functions: Modern color manipulation with color-mix() and color-contrast()

Additional Resources

To continue learning about CSS, check out these resources:

Conclusion

Congratulations! You've successfully styled your multi-page HTML website with CSS, transforming it from a plain structure into a visually appealing, professional portfolio. This process has demonstrated the power of CSS to control the presentation and layout of web content.

By following George Polya's problem-solving method—understanding the problem, devising a plan, executing the plan, and reviewing the results—you've taken a systematic approach to CSS styling. This methodical process helps ensure that your code is organized, maintainable, and effective.

Remember that CSS, like all aspects of web development, is both an art and a science. The technical aspects of selectors, properties, and values form the science, while the creative decisions about colors, typography, spacing, and visual effects constitute the art. As you continue to develop your CSS skills, you'll find your own balance between these two sides.

The styling techniques you've learned in this assignment are foundational for all web development work. As you progress in your journey, you'll build upon these basics, exploring more advanced CSS features, preprocessors, frameworks, and methodologies. Each project will present new challenges and opportunities to refine your CSS skills.

Keep practicing, experimenting, and building, and your CSS proficiency will continue to grow!