Scribd
Upload
3 views

HTML_CSS_Revision_Guide

This guide provides an overview of HTML and CSS, emphasizing their roles in web development. It includes syntax rules, common tags and properties, and examples to illustrate their usage. The document also highlights the importance of semantic HTML and effective CSS for better website structure and design.

Uploaded by

manas75731
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

HTML_CSS_Revision_Guide

This guide provides an overview of HTML and CSS, emphasizing their roles in web development. It includes syntax rules, common tags and properties, and examples to illustrate their usage. The document also highlights the importance of semantic HTML and effective CSS for better website structure and design.

Uploaded by

manas75731
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

A REVISION GUIDE TO HTML AND CSS

**A REVISION GUIDE TO HTML AND CSS**

Introduction
HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) are foundational
technologies in web development. HTML structures the content of a webpage, while CSS
controls the visual presentation. Understanding their syntax and key properties is essential
for designing effective, accessible, and visually appealing websites.

SECTION 1: HTML SYNTAX RULES

Basic Structure of an HTML Document

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

<h1>This is a Heading</h1>

<p>This is a paragraph.</p>

</body>

</html>
Flowchart: HTML Document Structure

<!DOCTYPE html>

<html>

<head> → <title>

<body>

↓ ↓

<h1> <p>

Common HTML Tags


| Tag | Description |

|------------|--------------------------------------|

| `<div>` | Defines a division or section |

| `<p>` | Paragraph |

| `<a>` | Anchor tag for hyperlinks |

| `<img>` | Embeds images (requires `src`) |

| `<h1>` | Main heading (levels h1-h6) |

| `<ul>` | Unordered list |

| `<li>` | List item |

| `<span>` | Inline container for text styling |


SECTION 2: CSS SYNTAX RULES

Basic CSS Syntax

selector {

property: value;

Flowchart: CSS Selector Types

selector

{ property: value; }

┌────────────┬────────────┬────────────┐

| Element | .Class | #ID |

| selector | selector | selector |

└────────────┴────────────┴────────────┘

Types of Selectors
| Selector | Description | Example |

|----------------|------------------------------------------------|------------------------|

| Element | Selects all elements of a type | `p {}` |

| Class | Selects elements with a specific class | `.note {}` |

| ID | Selects a specific element by ID | `#header {}` |

| Attribute | Selects elements with a given attribute | `input[type='text']` |


SECTION 3: IMPORTANT CSS PROPERTIES

Table of Common Properties


| Property | Values | Description | Example |

|--------------|---------------|--------------------------------------|---------------------------|

| color | Named, HEX | Text color | `color: red;` |

| background | color, image | Background color or image | `background: #fff;` |

| font-size | px, em, rem | Text size | `font-size: 16px;` |

| margin | px, % | Outer spacing | `margin: 10px;` |

| padding | px, % | Inner spacing | `padding: 10px;` |

| border | style, width | Border styling | `border: 1px solid black;`|

| display | block, flex | Display type | `display: flex;` |

SECTION 4: HTML + CSS EXAMPLE

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-color: #f0f0f0;

font-family: Arial;

.container {
width: 80%;

margin: auto;

padding: 20px;

h1 {

color: navy;

p{

font-size: 14px;

</style>

</head>

<body>

<div class="container">

<h1>Welcome!</h1>

<p>This is a simple HTML and CSS demo.</p>

</div>

</body>

</html>

Summary
- Use semantic HTML tags for better structure and accessibility.

- Apply CSS to control layout, design, and responsiveness.

- Use flowcharts and tables to visually grasp the relationships and rules.
**End of Guide**

You might also like