🎨 CSS Cheatsheet

Selectors

Element Selector

Targets all <p> elements

p { color: blue; }

Selectors

Class Selector

Targets elements with class

.highlight { background: yellow; }

Selectors

ID Selector

Targets element with ID

#header { height: 100px; }

Selectors

Attribute Selector

Targets elements by attribute

input[type="text"] { width: 200px; }

Selectors

Pseudo-class

Element state selectors

a:hover { color: red; }

Display

Display Flex

Flexbox layout

.container { display: flex; gap: 10px; }

Display

Display Grid

CSS Grid layout

.grid { display: grid; grid-template-columns: 1fr 1fr; }

Box Model

Margin

Outer spacing

.box { margin: 20px auto; }

Box Model

Padding

Inner spacing

.box { padding: 15px 20px; }

Box Model

Border

Border styling

.box { border: 2px solid #333; border-radius: 8px; }

Text

Font Size

Text size (px, em, rem)

p { font-size: 14px; }

Text

Font Weight

400, 600, 700, bold, normal

strong { font-weight: 700; }

Text

Text Align

left, center, right, justify

.heading { text-align: center; }

Text

Line Height

Line spacing (number, px, em)

body { line-height: 1.6; }

Colors

Color

Text color (hex, rgb, name)

p { color: #333; }

Colors

Background Color

Background (hex, rgb, name)

.box { background-color: #f0f0f0; }

Effects

Box Shadow

Shadow effects

.card { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }

Effects

Transform

rotate, scale, translate, skew

.button:hover { transform: scale(1.05); }

Effects

Transition

Smooth animations

.button { transition: background 0.3s ease; }

Positioning

Position

static, relative, absolute, fixed, sticky

.modal { position: fixed; top: 0; left: 0; }