HTML & CSS Guide
Chapter 1: Introduction to HTML and CSS
HTML (HyperText Markup Language) is the standard language for creating web pages. It describes
the structure of a web page using markup. CSS (Cascading Style Sheets) is used to style and layout
web pages. Together, HTML and CSS form the foundation of web development.
Chapter 2: Basic HTML Structure
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
</html>
Chapter 3: HTML Elements and Attributes
HTML elements are the building blocks of HTML pages. They are represented by tags. Attributes
provide additional information about elements. Common HTML elements include headings (<h1> to
<h6>), paragraphs (<p>), links (<a href='URL'>), images (<img src='URL'>), lists (<ul>, <ol>, <li>),
and tables (<table>, <tr>, <td>, <th>).
Chapter 4: HTML Forms and Input
HTML & CSS Guide
Forms are used to collect user input. The <form> element wraps input elements like text fields,
checkboxes, radio buttons, and submit buttons. Example:
<form>
<label for='name'>Name:</label>
<input type='text' id='name' name='name'>
<input type='submit' value='Submit'>
</form>
Chapter 5: Introduction to CSS
CSS is used to control the style of a web document in a simple and easy way. CSS defines how
HTML elements are to be displayed. You can add CSS in three ways: inline (using the style attribute
in HTML elements), internal (using a <style> element in the head section), and external (linking to
an external CSS file).
Chapter 6: CSS Selectors and Properties
CSS selectors are used to select the HTML elements you want to style. Types of selectors include
element selectors, class selectors, and ID selectors. Properties are used to define the styles for the
selected elements. Examples include color, font-size, margin, padding, and border.
Chapter 7: Styling Text with CSS
CSS allows you to style text by setting properties like font-family, font-size, font-weight, color,
text-align, text-decoration, line-height, and letter-spacing. Example:
h1 {
font-family: Arial, sans-serif;
HTML & CSS Guide
color: #333;
text-align: center;
Chapter 8: Box Model and Layout
The CSS box model describes the rectangular boxes generated for elements in the document tree.
It includes content, padding, border, and margin. CSS layout techniques include using display,
position, float, flexbox, and grid to control the layout of elements on the page.
Chapter 9: Responsive Design
Responsive design ensures that web pages look good on all devices. CSS media queries are used
to apply different styles for different screen sizes. Example:
@media (max-width: 600px) {
body {
background-color: lightblue;
Chapter 10: Practical Examples
Example 1: Basic HTML and CSS Page
<!DOCTYPE html>
<html>
<head>
<style>
HTML & CSS Guide
body { font-family: Arial, sans-serif; }
h1 { color: #333; }
p { font-size: 14px; }
</style>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph styled with CSS.</p>
</body>
</html>
Example 2: Responsive Web Design
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Arial, sans-serif; }
.container { width: 100%; max-width: 1200px; margin: 0 auto; }
.header, .content, .footer { padding: 20px; }
.header { background: #f4f4f4; }
.content { background: #fff; }
.footer { background: #f4f4f4; }
@media (max-width: 768px) {
.header, .content, .footer { padding: 10px; }
}
HTML & CSS Guide
</style>
</head>
<body>
<div class='container'>
<div class='header'>
<h1>My Website</h1>
</div>
<div class='content'>
<p>Welcome to my website. This is a responsive design example.</p>
</div>
<div class='footer'>
<p>Footer content here.</p>
</div>
</div>
</body>
</html>
