Activity 19: Research CSS

Document Structure:

<!DOCTYPE html>: This line declares the document type as HTML5, the latest version of HTML. It tells the browser how to interpret the code.
<html lang="en">: This tag marks the beginning of the HTML document. The lang attribute is set to "en" for English, indicating the language of the content.
- <head>: This section houses metadata about the HTML document, such as the character set, viewport settings, and the link to the external stylesheet.
  - <meta charset="UTF-8">: Specifies the character encoding for the document, ensuring correct display of characters.
  - <meta name="viewport" content="width=device-width, initial-scale=1.0">: Configures the viewport for responsive design, making the website look good on different devices.
  - <title>Simple HTML with External CSS</title>: Sets the title of the HTML document, which appears in the browser tab.
  - <link rel="stylesheet" href="style.css">: Links the HTML document to an external CSS file named "style.css". This allows you to separate your styles from your HTML code.
- <body>: This section contains the visible content of the webpage, everything the user sees.

2. Header:

<header>: This semantic tag represents the introductory part of the page, often containing the website's logo, navigation, or a heading.
- <h1>Welcome to My Webpage</h1>: This is the main heading of the page, using the <h1> tag for the most important heading level.

3. Navigation:

<nav>: This semantic tag defines the navigation section of the page, typically containing links to other pages or sections.
- <a href="#">Home</a>: This is a hyperlink, linking to the "#" (current page) for now. You'd replace "#" with the actual URL of the "Home" page.
- <a href="#">About</a>: Another hyperlink, linking to the "#" (current page) for now. You'd replace "#" with the actual URL of the "About" page.
- <a href="#">Contact</a>: Another hyperlink, linking to the "#" (current page) for now. You'd replace "#" with the actual URL of the "Contact" page.

4. Main Content Section:

<section>: This semantic tag represents a thematic section of the page, grouping related content together.
- <h2>About This Page</h2>: A secondary heading for the section.
- <p>This is a simple webpage created using HTML and styled with external CSS.</p>: A paragraph of text providing information about the webpage.

5. Footer:

<footer>: This semantic tag represents the footer of the page, typically containing copyright information, contact details, or navigation links.
- <p>© 2024 My Website</p>: A paragraph containing copyright information.

Important Points:

External Stylesheet: The use of an external CSS file (style.css) allows for better organization and separation of concerns in web development. You can define your styles in a separate file and easily reuse them across multiple HTML pages.
Semantic HTML: This code uses semantic HTML5 tags like <header>, <nav>, <section>, and <footer> to provide meaning and structure to the content. This helps with accessibility and search engine optimization (SEO).
Navigation Links: The href attributes of the anchor tags (<a>) are placeholders. You need to replace them with the actual URLs of the corresponding pages or sections.

1. body:
- font-family: Arial, sans-serif;: Sets the default font for the entire webpage to Arial. If Arial is not available, a generic sans-serif font will be used.
- background-color: #f0f0f0;: Sets the background color of the webpage to a light gray.
- margin: 0; padding: 0;: Removes default margins and padding from the body, ensuring the content starts right at the edge of the browser window.

2. header:

background-color: #4CAF50;: Sets the background color of the header to a green color.
color: white;: Sets the text color in the header to white for good contrast against the green background.
text-align: center;: Centers the text within the header.
padding: 20px;: Adds space around the text inside the header for better visual separation.

3. nav:

text-align: center;: Centers the navigation links within the navigation bar.
margin: 20px 0;: Adds vertical margin to the navigation bar to separate it from the header and the main content.

4. nav a:

margin: 0 15px;: Adds horizontal margin to the left and right of each navigation link, spacing them apart.
text-decoration: none;: Removes the default underline from the links.
color: #4CAF50;: Sets the color of the links to the same green color as the header background.

5. section:

6. footer:

background-color: #333;: Sets the background color of the footer to a dark gray.
color: white;: Sets the text color in the footer to white for contrast.
text-align: center;: Centers the text within the footer.
padding: 10px;: Adds space around the text in the footer.
position: fixed; bottom: 0; width: 100%;: These properties make the footer stay fixed at the bottom of the viewport, even when the content is longer than the screen height.
MY OUTPUT: