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**
