Exercise 4: CSS

In this exercise, you will learn to create a CSS file, link it to HTML files and apply styles to enhance the visual appearance of different elements. Conduct the tasks below:

Task 1: CSS Basics

CSS File Creation: Create a CSS file named style.css within the 'styles' folder.
Link CSS File : Link the CSS file to all HTML files in your individual tasks directory.
Styling for body Element: Apply background color, font, and margin to the body element in your CSS file.
Styling for h1 Headings: Style the h1 headings with a specific font, color, and margin.
Styling for Links: Customize the appearance of links by changing color to red on hover and visited links color to red.
Styling for Images: Set a maximum width for images and add a border around images.
Styling for footer section of your document: Apply background color (black) and set text color (white) for the footer, padding: 20px and align the text to center.
CSS Validation: Validate your CSS code and fix if there are any issues https://jigsaw.w3.org/css-validator/

Task 2: ID & Class

You will create a new html file and name it as exercise4.html and do the following tasks:

Copy the following html code to the newly create exercise4.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Simple HTML Page</title>
</head>
<body>

    <header id="main-header">
        <h1>Welcome to My Website</h1>
        <p>Your go-to place for interesting content.</p>
    </header>

    <nav id="main-nav">
        <ul>
            <li><a href="#" class="nav-link">Home</a></li>
            <li><a href="#" class="nav-link">About</a></li>
            <li><a href="#" class="nav-link">Services</a></li>
            <li><a href="#" class="nav-link">Contact</a></li>
        </ul>
    </nav>

    <section id="main-content">
        <article class="content-article">
            <h2>Article Title 1</h2>
            <p>This is the content of the first article.</p>
        </article>

        <article class="content-article">
            <h2>Article Title 2</h2>
            <p>This is the content of the second article.</p>
        </article>
    </section>

    <aside id="sidebar">
        <h2>Recent Posts</h2>
        <ul>
            <li><a href="#" class="sidebar-link">Post 1</a></li>
            <li><a href="#" class="sidebar-link">Post 2</a></li>
            <li><a href="#" class="sidebar-link">Post 3</a></li>
        </ul>
    </aside>

    <footer id="main-footer">
        <p>&copy; 2023 My Website. All rights reserved.</p>
    </footer>

</body>
</html>

Check how semantic elements, IDs, and classes are thoughtfully used in the HTML file.

Ensure that semantic elements such as <header>, <nav>, <section>, <article>, <aside>, and <footer> are employed for better structure and meaning. Verify the IDs (main-header, main-nav, main-content, sidebar, main-footer) and classes (nav-link, content-article, sidebar-link) are appropriately assigned for styling and grouping similar elements.

Update your CSS Styles in style.css File:
1. Main Header Styles:
  1. Apply styles for the main-header ID:
    - Set background color.
    - Align text to the center.
    - Add padding of 20px.
  2. Apply styles for h1 inside the main-header:
    - Set margin to 0.
    - Adjust the font size to 32px.
  3. Apply styles for p inside the main-header:
    - Set font size to 16px.
    - Add margin-top of 10px.
2. Content Article Styles:
  1. Apply styles for the content-article class:
    - Set background color.
    - Add a border of 1px solid #ddd.
    - Set padding to 20px.
    - Add a margin-bottom of 20px.
  2. Apply styles for h2 inside the content articles:
    - Set text color to #333.
    - Adjust the font size to 24px.
    - Add a margin-bottom of 10px.
  3. Apply styles for p inside the content articles:
    - Set text color to #666.
    - Adjust the font size to 16px.
    - Set line height to 1.5.
CSS Validation: Validate your CSS code and fix if there are any issues https://jigsaw.w3.org/css-validator/
Update your index.html that is Exercise 4 in index.html should link to this file (exercise4.html) Guide:Creating hyperlinks

dipaish/exercise4css.md

Exercise 4: CSS

Task 1: CSS Basics

Task 2: ID & Class