Scribd
Upload
22 views5 pages

HTML Css Guide

Uploaded by

ham2323ham
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
22 views5 pages

HTML Css Guide

Uploaded by

ham2323ham
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
Download as pdf or txt
You are on page 1/ 5

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>

You might also like