html & css cheat sheet แกฃ๐ญฉ


โœฆ html

html basics

<!DOCTYPE html> โ€” html5 doctype  
<html> โ€” root element  
<head> โ€” metadata container  
<title> โ€” browser tab title  
<body> โ€” visible content

structure & layout

<div> โ€” generic block  
<span> โ€” inline container  
<header> โ€” top of page  
<main> โ€” main content  
<section> โ€” content section  
<article> โ€” standalone block  
<footer> โ€” bottom of page  
<nav> โ€” navigation bar

text & formatting

<h1> to <h6> โ€” headings  
<p> โ€” paragraph  
<br> โ€” line break  
<strong> โ€” bold (semantic)  
<em> โ€” italic (semantic)  
<b> โ€” bold  
<i> โ€” italic

media & links

<a href="..."> โ€” link  
target="_blank" โ€” new tab  
<img src="..."> โ€” image  
alt โ€” image description  
width / height โ€” image size

forms & inputs

<form> โ€” form container  
<input type="text"> โ€” text field  
<input type="email"> โ€” email field  
<input type="password"> โ€” password  
<textarea> โ€” multi-line input  
<label> โ€” input label  
<button> โ€” submit button  
required โ€” must fill  
placeholder โ€” hint text

lists & tables

<ul> โ€” unordered list  
<ol> โ€” ordered list  
<li> โ€” list item  
<table> โ€” table  
<thead> โ€” table head  
<tbody> โ€” table body  
<tr> โ€” row  
<th> โ€” header cell  
<td> โ€” data cell  
colspan / rowspan โ€” merge cells

meta & scripts

<meta charset="UTF-8"> โ€” encoding  
<meta name="viewport"> โ€” scaling  
<meta name="description"> โ€” summary  
<link rel="stylesheet"> โ€” link css  
<script> โ€” javascript  
<base href="..."> โ€” base url

โœฆ css

selectors & basics

selector { property: value; }  
.class โ€” targets class  
#id โ€” targets id  
* โ€” universal selector  
/* comment */ โ€” note

text & font

color โ€” text color  
font-family โ€” typeface  
font-size โ€” size  
font-weight โ€” thickness  
text-align โ€” alignment  
line-height โ€” line spacing  
text-transform โ€” uppercase/lowercase

box model

margin โ€” space outside  
padding โ€” space inside  
border โ€” border  
width / height โ€” size  
box-sizing: border-box โ€” includes padding/border

layout: flexbox

display: flex โ€” start flexbox  
flex-direction โ€” row / column  
justify-content โ€” x-axis alignment  
align-items โ€” y-axis alignment  
flex-wrap โ€” wrap items  
gap โ€” space between items

layout: grid

display: grid โ€” start grid  
grid-template-columns โ€” columns  
grid-template-rows โ€” rows  
grid-column โ€” span columns  
grid-row โ€” span rows  
gap โ€” spacing

colors & backgrounds

color / background-color โ€” text / fill  
#hex โ€” hex value  
rgb(255, 0, 0) โ€” red  
rgba(0, 0, 0, 0.5) โ€” transparent black  
background-image โ€” image fill  
background-size โ€” cover / contain  
opacity โ€” transparency

effects & animation

border-radius โ€” rounded corners  
box-shadow โ€” shadow  
transition โ€” smooth change  
:hover โ€” hover effect  
transform: scale() โ€” grow/shrink  
z-index โ€” stack order

units & values

px โ€” fixed size  
% โ€” relative to parent  
em โ€” relative to parent font  
rem โ€” relative to root font  
vh / vw โ€” viewport height/width  
auto โ€” automatic size  
calc() โ€” calculated value

media queries

@media (max-width: 768px) โ€” small screens  
@media (min-width: 1024px) โ€” large screens