HTML and CSS: Comprehensive Guide
HTML and CSS: Comprehensive Guide 1
1. Introduction to HTML 2
Example: Basic HTML Structure 2
Common HTML Tags: 2
Example: Image and Link 3
2. Introduction to CSS 3
Example: Adding CSS to HTML 3
3. Box Model 4
Example: 4
4. CSS Selectors 4
Common Selectors: 4
Example: 5
5. Responsive Design 5
Example: Media Queries 5
Detailed Examples 5
Example 1: Creating a Simple Webpage 5
Example 2: Creating a Navigation Menu 7
Exercises 7
Exercise 1: Build a Portfolio Page 7
Exercise 2: Style a Table 7
Exercise 3: Responsive Design 8
Multiple-Choice Questions 8
Question 1: 8
Question 2: 8
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
1
Question 3: 8
Best Practices 8
HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) are the foundation of
web development. HTML provides the structure of a webpage, while CSS styles and layouts the
content. This guide will teach you the basics of HTML and CSS, with examples, exercises, and
quizzes to reinforce learning.
1. Introduction to HTML
HTML is the backbone of any webpage, defining its structure with elements (tags).
Example: Basic HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph with some content.</p>
</body>
</html>
Common HTML Tags:
Tag Description
<h1> to Headings (h1 is the largest, h6 is the
<h6> smallest).
<p> Paragraph text.
<a> Hyperlink.
<img> Image.
<ul>, <ol> Unordered and ordered lists.
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
2
<table> Table.
<div> Block-level container.
<span> Inline container.
Example: Image and Link
<img src="image.jpg" alt="Description of image" width="300">
<a href="https://example.com" target="_blank">Visit Example</a>
2. Introduction to CSS
CSS styles the structure provided by HTML. It defines colors, layouts, fonts, and much more.
Example: Adding CSS to HTML
Inline CSS:
<p style="color: blue; font-size: 20px;">This is a blue paragraph.</p>
Internal CSS:
<head>
<style>
body {
background-color: #f0f0f0;
}
h1 {
color: green;
}
</style>
</head>
External CSS:
<head>
<link rel="stylesheet" href="styles.css">
</head>
styles.css:
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
3
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
h1 {
color: navy;
}
3. Box Model
The CSS Box Model describes the layout of elements, including:
1. Content: The content inside the element.
2. Padding: Space between content and border.
3. Border: Surrounds the padding.
4. Margin: Space outside the border.
Example:
<div style="width: 200px; padding: 10px; border: 2px solid black;
margin: 20px;">
Box Model Example
</div>
4. CSS Selectors
Selectors specify which HTML elements a CSS rule applies to.
Common Selectors:
Selector Example Description
Universal * Selects all elements.
Type p Selects all <p> elements.
Class .classNa Selects elements with a class.
me
ID #idName Selects an element with an
ID.
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
4
Descendan div p Selects <p> inside <div>.
t
Example:
<div class="container" id="main">
<p class="text">This is a paragraph.</p>
</div>
CSS:
#main {
background-color: lightgray;
}
.text {
color: blue;
font-size: 18px;
}
5. Responsive Design
Responsive design ensures that a website looks good on all devices.
Example: Media Queries
body {
font-size: 16px;
}
@media (max-width: 600px) {
body {
font-size: 14px;
}
}
Detailed Examples
Example 1: Creating a Simple Webpage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
5
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Simple Webpage</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f9f9f9;
}
header {
background-color: #333;
color: white;
padding: 10px 0;
text-align: center;
}
main {
padding: 20px;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px 0;
}
</style>
</head>
<body>
<header>
<h1>Welcome to My Webpage</h1>
</header>
<main>
<h2>About Me</h2>
<p>This is a simple webpage created using HTML and CSS.</p>
</main>
<footer>
<p>© 2024 My Website</p>
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
6
</footer>
</body>
</html>
Example 2: Creating a Navigation Menu
<nav>
<ul style="list-style: none; padding: 0; display: flex; background:
#333;">
<li style="margin-right: 20px;"><a href="#" style="color: white;
text-decoration: none;">Home</a></li>
<li style="margin-right: 20px;"><a href="#" style="color: white;
text-decoration: none;">About</a></li>
<li><a href="#" style="color: white; text-decoration:
none;">Contact</a></li>
</ul>
</nav>
Exercises
Exercise 1: Build a Portfolio Page
● Create sections for "Home," "Portfolio," and "Contact."
● Style them with internal CSS.
Exercise 2: Style a Table
● Create a table and style it using CSS.
Solution:
<table style="width: 100%; border-collapse: collapse;">
<tr style="background: #f4f4f4;">
<th style="border: 1px solid #ddd; padding: 8px;">Name</th>
<th style="border: 1px solid #ddd; padding: 8px;">Age</th>
</tr>
<tr>
<td style="border: 1px solid #ddd; padding: 8px;">Alice</td>
<td style="border: 1px solid #ddd; padding: 8px;">25</td>
</tr>
</table>
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
7
Exercise 3: Responsive Design
● Add a media query to change the background color for screens smaller than 600px.
Multiple-Choice Questions
Question 1:
What does the <p> tag represent in HTML?
1. Paragraph
2. Picture
3. Page
4. Placeholder
Answer: 1. Paragraph
Question 2:
Which CSS property changes the background color of an element?
1. color
2. background-color
3. font-color
4. text-background
Answer: 2. background-color
Question 3:
What is the purpose of @media in CSS?
1. To add animations.
2. To create media queries for responsive design.
3. To import external CSS files.
4. To style media elements like videos.
Answer: 2. To create media queries for responsive design.
Best Practices
1. Use Semantic HTML: Use tags like <header>, <main>, <footer> for better
accessibility and SEO.
2. Keep CSS Organized: Use external stylesheets for maintainable code.
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
8
3. Responsive Design: Test on multiple devices and use media queries.
4. Consistent Styling: Use CSS variables to maintain consistent colors and spacing.
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
