Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
18 views

HTML and CSS - Comprehensive Guide

H

Uploaded by

sheraghahewadmal2
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
18 views

HTML and CSS - Comprehensive Guide

H

Uploaded by

sheraghahewadmal2
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

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>&copy; 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

You might also like