Skip to content

Instantly share code, notes, and snippets.

@dipaish

dipaish/exercise4css.md

Last active December 18, 2023 11:43
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dipaish/38189bec1ab8482b7eaf0b9cce1243b4 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dipaish/38189bec1ab8482b7eaf0b9cce1243b4 to your computer and use it in GitHub Desktop.
Download ZIP
Exercise 4: CSS[object Object]
Raw
exercise4css.md

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

  1. CSS File Creation: Create a CSS file named style.css within the 'styles' folder.
  2. Link CSS File : Link the CSS file to all HTML files in your individual tasks directory.
  3. Styling for body Element: Apply background color, font, and margin to the body element in your CSS file.
  4. Styling for h1 Headings: Style the h1 headings with a specific font, color, and margin.
  5. Styling for Links: Customize the appearance of links by changing color to red on hover and visited links color to red.
  6. Styling for Images: Set a maximum width for images and add a border around images.
  7. 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.
  8. 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:

  1. 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>
  1. 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.

  1. 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.
  2. CSS Validation: Validate your CSS code and fix if there are any issues https://jigsaw.w3.org/css-validator/
  3. Update your index.html that is Exercise 4 in index.html should link to this file (exercise4.html) Guide:Creating hyperlinks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment