The Complete HTML & CSS Guide
HTML5 Overview and Doctype
HTML5 is the standard markup language for building modern websites and web apps.
<!DOCTYPE html> is used to enable standards mode and must appear at the top.
<html> is the root element of a web document. Use lang="en" to specify language.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Website</title>
</head>
<body>
<h1>Welcome</h1>
</body>
</html>
HTML Structure and Semantic Elements
Semantic HTML tags help structure content and improve accessibility and SEO.
- <header>: Top section, often includes nav or logo
- <main>: Core content of the page
- <section>: Logical groups of related content
- <article>: Standalone self-contained content
- <aside>: Side notes, ads, etc.
- <footer>: Bottom section
Using semantic tags makes code easier to read and maintain.
<main>
<article>
<h2>Post Title</h2>
<p>This is a post</p>
</article>
</main>
HTML Text Elements and Inline Tags
Text formatting in HTML uses inline tags:
- <strong>: Bold emphasis
- <em>: Italics emphasis
- <mark>: Highlight text
- <abbr>: Abbreviations
- <code>: Code snippets
- <pre>: Preformatted text
- <br>: Line break (self-closing)
<p>This is <strong>important</strong> and <em>emphasized</em>.</p>
<p><mark>Warning:</mark> Be careful!</p>
<pre><code>let x = 5;</code></pre>
HTML Forms & Input Types
Forms allow user input and data collection.
- <form>: Wraps the input controls
The Complete HTML & CSS Guide
- input types: text, password, email, number, checkbox, radio, file, date
- <label>: Descriptive tag for input
- <textarea>: Multi-line input
- <select> and <option>: Dropdowns
<form action="/submit" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<select name="role">
<option>Admin</option>
<option>User</option>
</select>
<input type="submit" value="Submit">
</form>
CSS Basics: Syntax, Selectors, and Rules
CSS uses selectors to apply styles to HTML elements.
Syntax: selector { property: value; }
Selector types:
- Element: p {}
- Class: .class {}
- ID: #id {}
- Attribute: input[type='text']
- Combinators: div > p, div p, h1 + p
- Pseudo-classes: :hover, :focus, :nth-child()
- Pseudo-elements: ::before, ::after
p {
font-size: 16px;
color: #333;
}
.highlight {
background-color: yellow;
}
Box Model & Layout
All HTML elements are rectangular boxes.
Box model parts:
- content -> padding -> border -> margin
Use 'box-sizing: border-box' to include padding and border in size.
Block vs Inline:
- Block (div, p) takes full width
- Inline (span, a) flows with text
div {
width: 200px;
padding: 20px;
border: 1px solid #000;
margin: 10px;
box-sizing: border-box;
}
The Complete HTML & CSS Guide
Flexbox
Flexbox is a layout model for 1D alignment (horizontal or vertical).
- display: flex enables flexbox
- justify-content: align items on main axis (start, center, space-between)
- align-items: align on cross axis (start, center, stretch)
- flex-direction: row, column
- flex-wrap: wrap, nowrap
.container {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
CSS Grid
Grid layout allows 2D placement of elements in rows and columns.
- display: grid
- grid-template-columns/rows
- gap, place-items, grid-column, grid-row
Great for complex layouts without float or flex hacks.
.grid {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 10px;
}
Transitions & Animations
Transitions let you animate changes in CSS properties.
Animations create full motion using @keyframes.
- transition: all 0.3s ease;
- transform: scale(), rotate(), translate()
- animation: name duration timing-function
.box {
transition: transform 0.3s ease;
}
.box:hover {
transform: scale(1.1);
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
Media Queries & Responsive Design
Media queries let you apply styles based on screen size/device type.
Use for mobile-first or responsive layout:
The Complete HTML & CSS Guide
- @media (max-width: 600px) { ... }
Common breakpoints:
- 480px (mobile)
- 768px (tablet)
- 1024px (desktop)
@media (max-width: 600px) {
body {
font-size: 14px;
}
}