Courses Frontend Basic Lesson 3

CSS Basics and the Box Model

Frontend Basic Lesson 3 of 5 10 min


Day 3: Making Your Website Look Like Something

From Structure to Beauty

So far, you've built the HTML structure of your portfolio. But let's be honest – it probably looks pretty plain right now. Black text on white background, Times New Roman font, everything crammed together. That's because browsers have default styles, and they're intentionally minimal.

Today, we transform your portfolio from a plain document into a visually appealing website. You'll learn how CSS controls every visual aspect of your page, and master the box model – the most fundamental concept in CSS layout.

Today's Goal: By the end of this lesson, your portfolio will have beautiful colors, professional typography, perfect spacing, and card-style sections that make your content pop off the page.

What is CSS and How Does it Work?

CSS: Cascading Style Sheets

CSS is the language that describes how HTML elements should be displayed. If HTML is the skeleton and organs, CSS is the skin, clothing, hair color, and everything else you can see.

Think of it like this: You have a house (HTML). CSS decides the paint color, wallpaper, flooring, furniture placement, and lighting. The house stands without CSS, but CSS makes it beautiful and livable.

How CSS Works: The Rule Structure

CSS Rule Anatomy:

selector {
    property: value;
    property: value;
}
Selector
Tells CSS which HTML element(s) to style
Property
The aspect you want to change (color, size, spacing, etc.)
Value
How you want to change it (red, 16px, bold, etc.)

Real Example

h1 {
    color: #2c3e50;
    font-size: 36px;
    text-align: center;
}

Visual Result:

This is a Styled Heading

CSS Selectors: Targeting Elements

Selectors are how you tell CSS which elements to style. There are three fundamental types you'll use constantly.

1. Element Selector

Targets all instances of an HTML element. Use this for baseline styling that applies to all elements of that type.

CSS Code:

p {
    color: #555;
    font-size: 18px;
    line-height: 1.6;
}

HTML:

First paragraph


Second paragraph


Third paragraph

Result: All three paragraphs get the same styling.

First paragraph with styling applied

Second paragraph with styling applied

Third paragraph with styling applied

2. Class Selector (.)

Targets elements with a specific class attribute. Classes are reusable – you can apply the same class to multiple elements. Classes start with a period in CSS.

CSS Code:

.special {
    background: #fff3cd;
    padding: 15px;
    border-left: 4px solid #ffc107;
}

HTML:

Regular paragraph


Special paragraph


Regular paragraph


Another special paragraph

Visual Result:

Regular paragraph

Special paragraph with class styling

Regular paragraph

Another special paragraph with class styling

Best Practice: Use classes for styling. They're flexible and reusable. You can apply the same class to different element types (paragraphs, divs, sections, etc.).

3. ID Selector (#)

Targets a single unique element with a specific ID attribute. IDs must be unique – only one element per page can have a given ID. ID selectors start with a hash symbol.

CSS Code:

#hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 60px 20px;
    text-align: center;
}

HTML:


    
Welcome to My Portfolio

    
Building beautiful websites

Visual Result:

Welcome to My Portfolio

Building beautiful websites

When to Use Each:
Element selectors: Base styles for all elements of that type
Classes: Reusable styles you'll use multiple times
IDs: Unique sections or elements (header, main navigation, footer)

Colors and Fonts: Visual Identity

Working with Colors

CSS offers multiple ways to specify colors. Each has its use case.

Color Format Options

1. Named Colors - Easy to remember 
color: red;
background: skyblue;
red
skyblue
coral
2. Hexadecimal (Hex) Colors - Most common, precise 
color: #3498db;
background: #2ecc71;
#3498db
#2ecc71
#e74c3c
3. RGB (Red, Green, Blue) - Values from 0-255 
color: rgb(52, 152, 219);
background: rgb(46, 204, 113);
4. RGBA (RGB with Alpha/Transparency) - Alpha is 0 (invisible) to 1 (solid) 
background: rgba(52, 152, 219, 0.5);  /* 50% transparent */
background: rgba(0, 0, 0, 0.8);        /* 80% opaque black */
30% opacity
60% opacity
100% opacity

Typography: Fonts

Typography is one of the most important aspects of design. Good font choices make your content readable and professional.

Font Properties

font-family - Which font to use 
font-family: Arial, sans-serif;
font-family: 'Georgia', serif;
font-family: 'Courier New', monospace;

This text uses Arial (sans-serif)

This text uses Georgia (serif)

This text uses Courier New (monospace)

font-size - Size of the text 
font-size: 16px;
font-size: 1.5em;
font-size: 24px;

14px - Small text

18px - Medium text

24px - Large text

font-weight - Boldness of text 
font-weight: normal;   /* 400 */
font-weight: bold;     /* 700 */
font-weight: 300;      /* light */

Light text (300)

Normal text (400)

Bold text (700)

text-align - Horizontal alignment 
text-align: left;
text-align: center;
text-align: right;

Left aligned text

Center aligned text

Right aligned text

Pro Tip: Always provide fallback fonts. If your first choice isn't available, the browser will use the next one in the list. Example: font-family: 'Helvetica Neue', Arial, sans-serif;

The CSS Box Model: Understanding Space

The box model is the most fundamental concept in CSS layout. Every HTML element is a rectangular box, and the box model defines how that box behaves. Master this, and you master CSS spacing.

The Four Parts of the Box Model

CONTENT

The actual content (text, images)

PADDING - Space inside the border

BORDER - Line around padding

MARGIN - Space outside the border

Content
The actual content of the element (text, images, videos, etc.)
Padding
Space between the content and the border. Padding is inside the element.
Border
A line that goes around the padding and content
Margin
Space outside the border. Margin creates space between elements.

Padding: Space Inside

Padding creates breathing room inside an element. It pushes the content away from the edges.

.card {
    padding: 20px;
    background: #ecf0f1;
    border: 2px solid #95a5a6;
}

Visual Comparison:

No Padding:

Text cramped against edges

With Padding (20px):

Comfortable breathing room

Individual Sides

You can control padding on each side individually:

padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;

/* Shorthand (top, right, bottom, left - clockwise) */
padding: 10px 20px 10px 20px;

/* Shorthand (vertical, horizontal) */
padding: 10px 20px;

Border: Visible Boundaries

Borders create visible lines around elements. They're perfect for creating card designs and visual separation.

border: 2px solid #3498db;

/* Or specify each property */
border-width: 2px;
border-style: solid;
border-color: #3498db;

Border Styles:

solid border

dashed border

dotted border

double border

Border Radius: Rounded Corners

Make corners rounded instead of sharp:

border-radius: 5px;   /* slightly rounded */
border-radius: 15px;  /* more rounded */
border-radius: 50%;   /* circle (if width = height) */
0px
5px
15px
50%

Margin: Space Outside

Margins create space between elements. They push elements away from each other.

.section {
    margin-bottom: 40px;  /* space below */
}

Visual Comparison:

Element with 5px margin-bottom
Next element - see small gap above
Element with 30px margin-bottom
Next element - see larger gap above

Centering with Margin Auto

The most common use of margin is centering block elements horizontally:

.container {
    width: 600px;
    margin: 0 auto;  /* 0 top/bottom, auto left/right = centered */
}

Visual Result:

Centered Container

Width and Height

Control the size of elements explicitly:

width: 300px;
height: 200px;
max-width: 100%;  /* never exceed container width */
150px × 100px
200px × 150px
Important: By default, width and height only apply to the content box. Padding and border add to the total size. Set box-sizing: border-box; to include padding and border in the width/height calculation.

Day 3 Project: Beautiful Portfolio with Box Model

Now let's apply everything you've learned to transform your portfolio into a professional, polished website with great colors, typography, and spacing.

Complete Stylesheet

/* ===== RESET & BASE ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Georgia', serif;
    color: #333;
    background: #f5f5f5;
    line-height: 1.6;
}

/* ===== TYPOGRAPHY ===== */
h1 {
    font-family: 'Arial', sans-serif;
    font-size: 36px;
    color: #2c3e50;
}

h2 {
    font-family: 'Arial', sans-serif;
    font-size: 28px;
    color: #34495e;
    margin-bottom: 20px;
    border-bottom: 3px solid #3498db;
    padding-bottom: 10px;
}

h3 {
    font-size: 22px;
    color: #2c3e50;
    margin-bottom: 15px;
}

p {
    margin-bottom: 15px;
    font-size: 18px;
    line-height: 1.8;
}

/* ===== HEADER ===== */
header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 60px 20px;
    text-align: center;
}

header h1 {
    color: white;
    margin-bottom: 10px;
}

header p {
    font-size: 20px;
    margin-bottom: 30px;
}

/* ===== NAVIGATION ===== */
nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

nav a {
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 5px;
}

nav a:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ===== MAIN CONTENT ===== */
main {
    max-width: 900px;
    margin: 40px auto;
    padding: 0 20px;
}

/* ===== SECTIONS ===== */
section {
    background: white;
    padding: 40px;
    margin-bottom: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* ===== ABOUT SECTION ===== */
#about img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin-bottom: 20px;
    border: 5px solid #3498db;
}

/* ===== SKILLS LIST ===== */
#skills ul {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

#skills li {
    background: #ecf0f1;
    padding: 15px;
    border-left: 4px solid #3498db;
    border-radius: 5px;
}

/* ===== PROJECT CARDS ===== */
.project-card {
    background: white;
    padding: 30px;
    margin-bottom: 25px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
}

.project-card:hover {
    border-color: #3498db;
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.2);
}

.project-card h3 {
    color: #3498db;
}

.project-card a {
    color: #3498db;
    text-decoration: none;
    font-weight: bold;
}

.project-card a:hover {
    text-decoration: underline;
}

/* ===== FOOTER ===== */
footer {
    background: #2c3e50;
    color: white;
    text-align: center;
    padding: 40px 20px;
    margin-top: 50px;
}

footer h2 {
    color: white;
    border: none;
}

footer a {
    color: #3498db;
}

footer a:hover {
    color: #5dade2;
}

Updated HTML




    
    
    John Doe - Web Developer
    



    

        
John Doe

        
Full Stack Web Developer

        
        
    


    

    
        

            
About Me

            
            John Doe professional headshot
            
            
I am a passionate web developer with expertise in modern 
            frontend technologies. My journey in web development began 
            with a fascination for creating user-friendly interfaces.

            
            
I specialize in building responsive websites that work 
            beautifully on all devices and provide excellent user experiences.

        


        

            
Technical Skills

            
            
    
                
  • HTML5 & CSS3
    • 
                
  • JavaScript (ES6+)
    • 
                
  • React.js
    • 
                
  • Node.js
    • 
                
  • Responsive Design
    • 
                
  • Git & GitHub
    • 
            

        


        

            
Featured Projects

            
            

                
E-Commerce Platform

                
Full-stack application built with React and Node.js 
                featuring user authentication, product catalog, shopping cart, 
                and payment processing integration.

                View Project →
            

            
            

                
Task Management App

                
Productivity application with real-time updates using 
                WebSockets. Features include task creation, assignment, 
                progress tracking, and team collaboration.

                View Project →
            

            
            

                
Weather Dashboard

                
Data visualization project using weather APIs to display 
                current conditions, forecasts, and historical data with 
                interactive charts and graphs.

                View Project →

What We Accomplished

Beautiful Colors
Gradient header, blue accents, professional color scheme
Professional Typography
Readable fonts, proper sizing, good line height
Perfect Spacing
Generous padding in sections, consistent margins between elements
Card-Style Sections
White background, rounded corners, subtle shadows, borders
Centered Layout
Max-width container centered with margin auto
Hover Effects
Interactive states on navigation and project cards

Box Model Breakdown

Project Card Analysis:

Sample Project Card

This card demonstrates the box model in action

.project-card {
    /* CONTENT: The text and heading */
    
    /* PADDING: 30px space inside border */
    padding: 30px;
    
    /* BORDER: 2px line around content */
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    
    /* MARGIN: 25px space below card */
    margin-bottom: 25px;
    
    /* BACKGROUND: White background */
    background: white;
}

Testing Checklist

  • Header has gradient background and centered white text
  • Navigation links have hover effects
  • Main content is centered on the page
  • Each section has white background with padding and rounded corners
  • Sections have consistent spacing between them
  • Project cards have borders and hover effects
  • Skills are displayed in a grid layout
  • Typography is readable and professional
  • Footer has dark background and centered content

Complete this lesson

Mark as complete to track your progress

Previous Lesson
Mastering CSS Selectors & The Cascade
Next Lesson
CSS Positioning and Simple Layout