Activity 19: Research CSS
Document Structure:
<!DOCTYPE html>: Declares the document type as HTML5.<html lang="en">: The root element of the HTML document, indicating the language is English.<head>: Contains metadata about the document:<meta charset="UTF-8">: Sets the character encoding for proper display of characters.<meta name="viewport" content="width=device-width, initial-scale=1.0">: Configures the viewport for responsive design.<title>My Portfolio</title>: Sets the title that appears in the browser tab.<link rel="stylesheet" href="styles.css">: Links the HTML to an external CSS file (styles.css) for styling.
<body>: Contains the visible content of the webpage.
2. Navigation Bar:
<nav>: The navigation section.<ul>: An unordered list for navigation links.<li>: Each list item represents a link.<a href="#home">Home</a>: A link to the "home" section (using an ID anchor).<a href="#portfolio">Portfolio</a>: A link to the "portfolio" section.<a href="#contact">Contact</a>: A link to the "contact" section.
3. Hero Section:
<div class="hero" id="home">: A container for the hero section, with a class "hero" and an ID "home" for styling and linking.<h1>Welcome to My Portfolio</h1>: The main heading of the hero section.<p>Showcasing my web development projects</p>: A paragraph describing the purpose of the portfolio.
4. Card Section:
<div class="card-container" id="portfolio">: A container for the project cards, with a class "card-container" and an ID "portfolio".<div class="card">: Each card represents a project.<img src="https://via.placeholder.com/400x300" alt="Project Image">: An image placeholder for the project.<h2>Project One</h2>: The project title.<p>This is a brief description of project one. It's a responsive web design using HTML and CSS.</p>: A brief description of the project.
<div class="card">: Repeat for Project Two and Project Three, with similar structure.
Important Points:
External CSS: The styles for this portfolio website are defined in a separate CSS file (
styles.css), which is linked in the<head>.IDs and Classes: The
idattributes (like "home," "portfolio") are used for linking from the navigation bar. Theclassattributes (like "hero," "card-container," "card") are used for applying styles to multiple elements.Placeholder Images: The
srcattribute of theimgtag uses a placeholder image URL fromvia.placeholder.com. You should replace this with the actual URLs of your project images.
General Styles (body):
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;: Sets the default font for the entire webpage to "Segoe UI". If "Segoe UI" is not available, it will fall back to Tahoma, Geneva, Verdana, or a generic sans-serif font.margin: 0; padding: 0;: Removes default margins and padding from the body element, ensuring the content starts right at the edge of the browser window.background-color: #f4f4f4;: Sets the background color of the webpage to a light gray (#f4f4f4).
2. Navigation Bar (nav):
background-color: #333;: Sets the background color of the navigation bar to dark gray (#333).padding: 1rem;: Adds padding around the content inside the navigation bar (1rem is a relative unit, roughly equivalent to 16 pixels).text-align: center;: Centers the text content within the navigation bar.
3. Navigation List (nav ul):
list-style: none;: Removes the default bullet points from the unordered list (<ul>).padding: 0; margin: 0;: Removes default padding and margin from the list items, allowing for more control over spacing.
4. Navigation List Items (nav ul li):
display: inline;: Makes the list items display inline, so they appear horizontally next to each other.margin-right: 20px;: Adds horizontal margin to the right of each list item, creating space between them.
5. Navigation Links (nav ul li a):
color: white;: Sets the text color of the links to white for contrast against the dark gray background.text-decoration: none;: Removes the default underline from the links.font-size: 1.2rem;: Sets the font size of the links to 1.2rem (again, a relative unit).
6. Hero Section (hero):
background-image: url('https://via.placeholder.com/1500x400');: Sets the background image of the hero section to a placeholder image fromvia.placeholder.com.background-size: cover;: Makes the background image cover the entire hero section, scaling it proportionally to fit.color: white;: Sets the text color within the hero section to white for contrast against the background image.text-align: center;: Centers the text content within the hero section.padding: 100px 20px;: Adds padding to the hero section, creating space between the content and the edges.
Important Points:
Placeholder Image: The background image URL in the
herosection is a placeholder. You'll need to replace it with the actual URL of your hero image.Relative Units: The code uses
rem(root em) units for font size and padding. This makes the styling more responsive, scaling with the user's font size settings.Specificity: This code demonstrates the concept of specificity in CSS. Styles defined for more specific elements (like
nav ul li a) override styles defined for less specific elements (likebody).
output:
