Project 2: Styling Your Website

Instructions:

Set Up Your CSS File:

Create a new folder named "Project2"
Copy your three HTML files from Project 1 into this folder
Create a new file named "styles.css" in the same folder
Link the CSS file to all three HTML pages

Add CSS Link:

Add this line in the <head> section of each HTML file:


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

Add Basic Styles:

Add these basic styles to your CSS file:


body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
}

h1 {
    color: #333;
    text-align: center;
    padding: 20px;
    background-color: #f0f0f0;
    border-radius: 5px;
}

nav {
    text-align: center;
    margin: 20px 0;
}

nav a {
    display: inline-block;
    padding: 10px 20px;
    margin: 0 5px;
    background-color: #333;
    color: white;
    text-decoration: none;
    border-radius: 3px;
}

nav a:hover {
    background-color: #555;
}

section {
    margin: 30px 0;
    padding: 20px;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 5px;
}

Add Your Own Styles:

Choose 3-5 colors that work well together and use them consistently:
- Use one color for backgrounds
- Use another for text
- Use others for accents and borders

Style your lists and links:


ul, ol {
    margin-left: 20px;
}

a {
    color: #0066cc;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

Viewing Your Website:

Run Your Project with Live Server:
- Right-click on your "index.html" file
- Select "Open with Live Server"
- This will open your web page in your browser
Check that all three pages look consistent
Make sure all styles are working correctly

Submission:

Make sure your Project2 folder contains:
- index.html file
- page2.html file
- page3.html file
- styles.css file
Compress your "Project2" folder into a zip file
Submit your zip file here: Submit Project 2

Project 2: Styling Your Website

Project 2:

Styling Your Website: Example Site

Goal:

Instructions:

Set Up Your CSS File:

Add CSS Link:

Add Basic Styles:

Add Your Own Styles:

Viewing Your Website:

Submission: