HTML & CSS Fundamentals
Introduction
HTML and CSS are the fundamental building blocks of web development. HTML provides the structure and content of a webpage, while CSS controls its visual presentation and layout.
What you'll learn
- Basic HTML structure and elements
- Semantic HTML for better accessibility
- CSS styling and selectors
- Layout techniques with CSS
- Best practices for modern web development
HTML Basics
HTML documents are made up of elements, which are defined by tags. Here's a basic HTML structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Webpage</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first webpage.</p>
</body>
</html>Note: Always include the DOCTYPE declaration and specify the language attribute for better accessibility.
Semantic HTML
Semantic HTML uses meaningful tags that describe their content's purpose. This improves accessibility and SEO:
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>Article Title</h1>
<section>
<h2>Section Heading</h2>
<p>Content here...</p>
</section>
</article>
</main>
<footer>
<p>© 2023 My Website</p>
</footer>CSS Basics
CSS can be added to HTML in three ways:
- External stylesheet (recommended)
- Internal stylesheet
- Inline styles
/* External CSS file (styles.css) */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
}
h1 {
color: #007bff;
margin-bottom: 1rem;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}CSS Selectors
CSS selectors determine which elements to style:
/* Element selector */
p {
margin-bottom: 1rem;
}
/* Class selector */
.highlight {
background-color: yellow;
}
/* ID selector */
#header {
position: fixed;
top: 0;
}
/* Descendant selector */
article p {
font-size: 1.1rem;
}
/* Pseudo-class */
a:hover {
text-decoration: underline;
}The Box Model
Every HTML element is a box with content, padding, border, and margin:
.box {
width: 300px;
padding: 20px;
border: 2px solid #333;
margin: 10px;
/* Modern box-sizing */
box-sizing: border-box;
}Pro Tip: Use box-sizing: border-box to include padding and border in the element's total width and height.
Layout Fundamentals
Modern CSS offers several ways to create layouts:
Flexbox
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
.item {
flex: 1;
margin: 0 10px;
}CSS Grid
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.grid-item {
padding: 20px;
background: #f5f5f5;
}Practice Project
Let's put everything together by creating a simple profile card:
<div class="profile-card">
<img src="avatar.jpg" alt="Profile Picture" class="profile-image">
<h2 class="profile-name">John Doe</h2>
<p class="profile-bio">Web Developer</p>
<div class="profile-social">
<a href="#" class="social-link">Twitter</a>
<a href="#" class="social-link">GitHub</a>
</div>
</div>.profile-card {
max-width: 300px;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
text-align: center;
}
.profile-image {
width: 100px;
height: 100px;
border-radius: 50%;
margin-bottom: 15px;
}
.profile-name {
margin: 0;
color: #333;
}
.profile-bio {
color: #666;
margin: 10px 0;
}
.profile-social {
display: flex;
justify-content: center;
gap: 10px;
}
.social-link {
padding: 8px 16px;
background: #007bff;
color: white;
text-decoration: none;
border-radius: 4px;
transition: background 0.3s;
}
.social-link:hover {
background: #0056b3;
}