Scribd
Upload
8 views3 pages

HTML CSS Cheatsheet

The document is a comprehensive cheatsheet for HTML and CSS, detailing basic HTML tags, media tags, form tags, advanced HTML tags, and semantic tags. It also covers CSS syntax, common selectors, text and font styles, box model, layout and position, flexbox, grid, media queries, and animation. This resource serves as a quick reference guide for web development using HTML and CSS.

Uploaded by

RishiKesh Das
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views3 pages

HTML CSS Cheatsheet

The document is a comprehensive cheatsheet for HTML and CSS, detailing basic HTML tags, media tags, form tags, advanced HTML tags, and semantic tags. It also covers CSS syntax, common selectors, text and font styles, box model, layout and position, flexbox, grid, media queries, and animation. This resource serves as a quick reference guide for web development using HTML and CSS.

Uploaded by

RishiKesh Das
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

HTML & CSS Cheatsheet

Part 1: HTML Cheatsheet

BASIC HTML TAGS:


<html> - Root element of an HTML document.
<head> - Contains metadata and links to styles/scripts.
<title> - Sets the title of the webpage (shown in tab).
<body> - Contains the content of the HTML document.
<h1> to <h6> - Headings, from largest to smallest.
<p> - Paragraph tag.
<a href="url"> - Anchor tag to create hyperlinks.
<img src="img.jpg" alt="text"> - Displays image.
<br> - Line break.
<hr> - Horizontal line.
<strong> - Bold text.
<em> - Italic text.
<ol> - Ordered list.
<ul> - Unordered list.
<li> - List item.
<table> - Creates a table.
<tr> - Table row.
<th> - Table header cell.
<td> - Table data cell.
<div> - Generic container for layout.
<span> - Inline container.

MEDIA TAGS:
<video src="video.mp4" controls> - Embeds a video.
<audio src="audio.mp3" controls> - Embeds audio.

FORM TAGS:
<form> - Creates an HTML form.
<input type="text"> - Single-line text input.
<textarea> - Multi-line text input.
<button> - Clickable button.
<select> - Dropdown menu.
HTML & CSS Cheatsheet

<option> - Options within a select.

ADVANCED HTML TAGS:


<iframe src="url"> - Embeds another page.
<canvas> - Used for drawing graphics.
<meta> - Defines metadata like charset.
<link> - Links external resources (like CSS).
<script> - Embeds JavaScript code.

SEMANTIC TAGS:
<header>, <footer>, <nav>, <section>, <article>, <aside>, <main> - Improve page structure and SEO.

Part 2: CSS Cheatsheet

BASIC CSS SYNTAX:


selector { property: value; }

COMMON SELECTORS:
* - Selects all elements.
#id - Selects element by id.
.class - Selects elements by class.
element - Selects by tag name.

TEXT & FONT STYLES:


color - Text color.
font-size - Size of the font.
font-family - Font type.
text-align - Alignment of text.
text-decoration - Underline, none, etc.

BOX MODEL:
margin - Space outside element.
padding - Space inside element.
border - Border around element.
width / height - Element dimensions.
HTML & CSS Cheatsheet

BACKGROUND & COLORS:


background-color - Background color.
background-image - Set image as background.

LAYOUT & POSITION:


display: block / inline / flex / grid - Layout models.
position: static / relative / absolute / fixed / sticky.
top, right, bottom, left - Offsets.
z-index - Stack order.

FLEXBOX:
display: flex;
flex-direction: row / column;
justify-content: center / space-between;
align-items: center;

GRID:
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;

MEDIA QUERIES:
@media (max-width: 600px) {
body { font-size: 14px; }
}

ANIMATION & TRANSITION:


transition: all 0.3s ease;
@keyframes name { 0% {} 100% {} }

You might also like