# 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>&copy; 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.
    
    ![No description available.](https://scontent.fmnl7-1.fna.fbcdn.net/v/t1.15752-9/461022624_1700693170755252_8746970986049162511_n.png?_nc_cat=109&ccb=1-7&_nc_sid=9f807c&_nc_eui2=AeET_EoVWzJNfrKvzph6IVdr5y3ZQcWdFlnnLdlBxZ0WWY1kWMYGh1mLtiEgwQmoVxQhN-7TvP6YPuZt2vaTgTs2&_nc_ohc=WMdKk952EXwQ7kNvgHEBSW-&_nc_ht=scontent.fmnl7-1.fna&_nc_gid=AHZdmybP6eBl1BixY9MUpoe&oh=03_Q7cD1QGSRv_om9MzaLbxdVOQL7P66R3lTkeZCTGHAbo1RU6VMw&oe=67236B2E align="left")
    
    **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`:
    
    * `padding: 20px;`: Adds space around the content within each section.
        
    * `text-align: center;`: Centers the text within each 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.
        
    * ![No description available.](https://scontent.fmnl7-1.fna.fbcdn.net/v/t1.15752-9/461626604_1875799116247441_6344482297399419961_n.png?_nc_cat=107&ccb=1-7&_nc_sid=9f807c&_nc_eui2=AeHHcHHUnSOJm04Bq_I50bikn5MWPVIXMQOfkxY9UhcxA4RvIb2ZA4IsJXu22R9oI3L2NEVIiMvXIrQVgPbGunmb&_nc_ohc=4T9_I_tTU7cQ7kNvgFlISHO&_nc_ht=scontent.fmnl7-1.fna&_nc_gid=AHZdmybP6eBl1BixY9MUpoe&oh=03_Q7cD1QE92UWjH0my8cqjGFKGZIJ5tdskCvxtLgHt77zxH0zCOQ&oe=67237900 align="left")
        
        MY OUTPUT:
        
        ![No description available.](https://scontent.fmnl7-1.fna.fbcdn.net/v/t1.15752-9/461208920_549187700963927_3780291490740934431_n.png?_nc_cat=103&ccb=1-7&_nc_sid=9f807c&_nc_eui2=AeHwc0wcsJ43p8dMmAleVlgn2OqaZ0m7UBTY6ppnSbtQFKgB5CrwPJ0cbl_44Y4snuA5XCyh6SZPbG_t_qOEdUkc&_nc_ohc=ZG_wVyYv46oQ7kNvgHMrBBh&_nc_ht=scontent.fmnl7-1.fna&_nc_gid=AHZdmybP6eBl1BixY9MUpoe&oh=03_Q7cD1QFtsdjU7VVy8ZWYAJI1bJqtk6BAF33oqUaXs9HyW9AbfQ&oe=672351B1 align="left")