Web Development Guide: HTML & CSS
Introduction
This guide covers the basics of HTML and CSS with examples. HTML (HyperText Markup
Language) is the standard language for creating webpages, while CSS (Cascading Style Sheets) is
used to style them.
HTML Basics
HTML uses tags to structure content. Example: <!DOCTYPE html>
<html>
<head><title>My Page</title></head>
<body>
<h1>Hello World</h1>
</body>
</html>
Common HTML Tags
<h1> to <h6> : Headings
<p> : Paragraph
<a href='url'> : Link
<img src='[Link]'> : Image
<ul>/<ol>/<li> : Lists
<table>, <tr>, <td> : Tables
<form> : Forms
HTML Forms Example
<form>
Name: <input type='text'><br>
Password: <input type='password'><br>
<input type='submit'>
</form>
CSS Basics
CSS controls style. Example:
p { color: blue; font-size: 16px; }
body { background-color: #f0f0f0; }
Selectors
Element selector: p { }
Class selector: .classname { }
ID selector: #idname { }
Attribute selector: input[type='text'] { }
Pseudo-classes
a:hover { color: red; }
input:focus { border: 2px solid green; }
Pseudo-elements
p::first-letter { font-size: 30px; }
p::before { content: '■ '; }
Box Model
Each element has: content, padding, border, margin.
Example:
div { margin:10px; padding:20px; border:2px solid black; }
Flexbox
Flexbox is used for layout.
Example:
[Link] { display:flex; justify-content:space-between; }
[Link] { flex:1; }
Grid Layout
CSS Grid provides 2D layouts.
Example:
[Link] { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }