# HTML and CSS3 Cheat Sheet ## Table of Contents 1. [HTML Basics](#html-basics) 1.1 [Document Structure](#document-structure) 1.2 [HTML Elements](#html-elements) 1.3 [Headings](#headings) 1.4 [Paragraphs](#paragraphs) 1.5 [Lists](#lists) 1.6 [Links](#links) 1.7 [Images](#images) 2. [HTML Advanced](#html-advanced) 2.1 [Forms](#forms) 2.2 [Tables](#tables) 2.3 [Semantics](#semantics) 2.4 [Media Elements](#media-elements) 2.5 [IFrames](#iframes) 3. [CSS3 Basics](#css3-basics) 3.1 [Selectors](#selectors) 3.2 [Box Model](#box-model) 3.3 [Colors and Backgrounds](#colors-and-backgrounds) 3.4 [Text Styling](#text-styling) 3.5 [Fonts](#fonts) 4. [CSS3 Advanced](#css3-advanced) 4.1 [Flexbox](#flexbox) 4.2 [Grid](#grid) 4.3 [Transitions](#transitions) 4.4 [Transforms](#transforms) 4.5 [Animations](#animations) 5. [Responsive Web Design](#responsive-web-design) 5.1 [Media Queries](#media-queries) 5.2 [Viewport](#viewport) 6. [CSS Layout](#css-layout) 6.1 [Floats](#floats) 6.2 [Positioning](#positioning) 6.3 [Display Property](#display-property) 6.4 [Box Sizing](#box-sizing) 7. [Advanced HTML Techniques](#advanced-html-techniques) 7.1 [Canvas](#canvas) 7.2 [SVG](#svg) 7.3 [Web Components](#web-components) 7.4 [Drag and Drop](#drag-and-drop) 8. [Advanced CSS Techniques](#advanced-css-techniques) 8.1 [Custom Properties (CSS Variables)](#custom-properties-css-variables) 8.2 [CSS Grid Layout](#css-grid-layout) 8.3 [Filter Effects](#filter-effects) 8.4 [Clipping and Masking](#clipping-and-masking) ## HTML Basics ```html My Website

Welcome to My Website

Article Title

Article content goes here.

Section 1

This is a paragraph.

Visit Example Description of the image ``` ## HTML Advanced ```html
Name Age
John Doe 25
``` ## CSS3 Basics ```css /* Selectors */ h1 { color: #3498db; } /* Box Model */ div { width: 200px; height: 100px; padding: 10px; margin: 20px; border: 2px solid #2ecc71; } /* Colors and Backgrounds */ body { background-color: #ecf0f1; } /* Text Styling */ p { font-size: 16px; font-weight: bold; } /* Fonts */ body { font-family: 'Arial', sans-serif; } ``` ## CSS3 Advanced ```css /* Flexbox */ .container { display: flex; justify-content: space-between; } /* Grid */ .grid-container { display: grid; grid-template-columns: auto auto auto; } /* Transitions */ button { transition: background-color 0.3s ease; } button:hover { background-color: #e74c3c; } /* Transforms */ .box { transform: rotate(45deg); } /* Animations */ @keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(0); } } .slider { animation: slide 1s ease-in-out; } ``` ## Responsive Web Design ```css /* Media Queries */ @media only screen and (max-width: 600px) { body { font-size: 14px; } } /* Viewport */ meta { width: device-width; initial-scale: 1.0; } ``` ## CSS Layout ```css /* Floats */ .float-left { float: left; } /* Positioning */ .absolute-position { position: absolute; top: 10px; left: 20px; } /* Display Property */ .inline-block { display: inline-block; } /* Box Sizing */ box-sizing: border-box; ``` ## Advanced HTML Techniques ```html
Drag me!
``` ## Advanced CSS Techniques ```css /* Custom Properties (CSS Variables) */ :root { --main-color: #3498db; --secondary-color: #e74c3c; } body { background-color: var(--main-color); } button { background-color: var(--secondary-color); } /* CSS Grid Layout */ .grid-container { display: grid; grid-template-columns: auto auto auto; } .grid-item { padding: 20px; text-align: center; border: 1px solid #ccc; } /* Filter Effects */ .image-container { filter: grayscale(50%); } /* Clipping and Masking */ .clipped-element { clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%); } ```