HTML & CSS Cheat Sheet

HTML Cheat Sheet

Basic Structure

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <h1>Hello World!</h1>
    </body>
</html>

Common Tags

<h1> to <h6>: Headings
<p>: Paragraph
<a href="URL">: Anchor/Link
<img src="URL" alt="description">: Image
<ul>, <ol>, <li>: Lists (unordered, ordered)
<div> and <span>: Containers
<form>, <input>, <button>: Forms and Inputs

HTML5 Semantic Elements

<header>, <footer>, <nav>: Layout
<section>, <article>, <aside>: Content Structure
<main>, <figure>, <figcaption>: Main Content and Media

CSS Cheat Sheet

Basic Syntax

selector {
    property: value;
}

Common Properties

color: Sets the color of text
background-color: Sets the background color
font-size: Sets the font size
margin: Sets the margin space
padding: Sets the padding space
border: Sets the border of an element

Box Model

margin: Space outside the element
border: Surrounds the padding and content
padding: Space inside the element, between content and border
width, height: Controls the dimensions of the element

Responsive Design

@media (max-width: 768px) {
    /* CSS rules for mobile screens */
}