CSS Cheat Sheet — Complete CSS3 Syntax, Selectors & Layout Examples

Cascading Style Sheets (CSS) is the language used to style HTML — controlling layout, colors, typography, and overall design. This CSS Cheat Sheet provides all essential CSS properties, examples, and modern layout techniques like Flexbox and Grid for quick reference and learning.

What is CSS?

CSS (Cascading Style Sheets) defines how HTML elements are displayed on screen, paper, or other media. It separates content (HTML) from presentation (CSS), improving flexibility and maintainability.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: blue;
  text-align: center;
}
p {
  font-size: 18px;
}
</style>
</head>
<body>
<h1>Hello CSS!</h1>
<p>This paragraph is styled using CSS.</p>
</body>
</html>

CSS Syntax

CSS consists of a selector and a declaration block.

selector {
  property: value;
}

Example:

p {
  color: red;
  font-size: 16px;
}

CSS Selectors

Selectors target HTML elements for styling.

Selector Type	Example	Description
Element Selector	`p`	Selects all `<p>` tags
Class Selector	`.box`	Selects elements with class “box”
ID Selector	`#header`	Selects element with id “header”
Universal Selector	`*`	Selects all elements
Group Selector	`h1, h2, h3`	Groups multiple selectors
Descendant Selector	`div p`	Selects `<p>` inside `<div>`
Child Selector	`div > p`	Selects direct child elements
Attribute Selector	`input[type="text"]`	Selects elements with specific attribute
Pseudo-Class	`a:hover`	Styles on hover
Pseudo-Element	`p::first-line`	Styles first line of paragraph

CSS Colors and Backgrounds

Property	Example	Description
`color`	`color: blue;`	Text color
`background-color`	`background-color: #f0f0f0;`	Background color
`background-image`	`background-image: url("bg.jpg");`	Sets background image
`background-size`	`background-size: cover;`	Adjusts image size
`opacity`	`opacity: 0.8;`	Sets transparency

Example:

body {
  background: linear-gradient(to right, #00c6ff, #0072ff);
  color: white;
}

CSS Box Model

Every element in CSS is a box made up of content, padding, border, and margin.

Property	Example	Description
`width`, `height`	`width: 100px;`	Element dimensions
`padding`	`padding: 10px;`	Inner spacing
`border`	`border: 1px solid #000;`	Border around element
`margin`	`margin: 15px;`	Outer spacing
`box-sizing`	`box-sizing: border-box;`	Includes padding and border in total width

Example:

div {
  width: 200px;
  padding: 10px;
  border: 2px solid gray;
  margin: 15px;
  box-sizing: border-box;
}

CSS Typography

Property	Example	Description
`font-family`	`font-family: Arial, sans-serif;`	Sets font
`font-size`	`font-size: 18px;`	Sets size
`font-weight`	`font-weight: bold;`	Bold text
`text-align`	`text-align: center;`	Aligns text
`line-height`	`line-height: 1.5;`	Sets line spacing
`text-transform`	`text-transform: uppercase;`	Changes text case
`letter-spacing`	`letter-spacing: 2px;`	Space between letters

css cheat sheet, css syntax reference, css selectors list, css flexbox guide, css grid layout, css colors and typography, css positioning examples, css border and background, css animation and transition, css box model

CSS Borders, Margin, and Padding

Property	Example	Description
`border`	`border: 1px solid black;`	Adds border
`border-radius`	`border-radius: 10px;`	Rounds corners
`margin`	`margin: 20px;`	Outer spacing
`padding`	`padding: 15px;`	Inner spacing

CSS Display and Positioning

Property	Example	Description
`display`	`display: block;`	Defines element display
`position`	`position: absolute;`	Positions element
`top`, `left`, `right`, `bottom`	`top: 10px;`	Set position offsets
`z-index`	`z-index: 10;`	Layer order
`float`	`float: right;`	Floating element
`clear`	`clear: both;`	Control float behavior

Example:

.box {
  position: relative;
  top: 20px;
  left: 30px;
}

CSS Flexbox Layout

Flexbox simplifies alignment, spacing, and layout control.

Example:

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Property	Description
`display: flex`	Enables flexbox
`flex-direction`	Defines row or column layout
`justify-content`	Horizontal alignment
`align-items`	Vertical alignment
`flex-wrap`	Wrap items
`align-content`	Align multiple lines

CSS Grid Layout

CSS Grid allows two-dimensional layouts.

Example:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

Property	Description
`display: grid`	Enables grid
`grid-template-columns`	Defines columns
`grid-template-rows`	Defines rows
`gap`	Space between grid items
`justify-items`	Horizontal alignment
`align-items`	Vertical alignment

CSS Animation and Transition

Property	Example	Description
`transition`	`transition: 0.3s ease;`	Smooth change
`animation-name`	`animation-name: fade;`	Animation name
`animation-duration`	`animation-duration: 2s;`	Animation time

Example:

@keyframes fade {
  from {opacity: 0;}
  to {opacity: 1;}
}
.box {
  animation: fade 2s ease-in-out;
}

CSS Units and Measurements

Unit	Description	Example
`px`	Pixels	`width: 200px;`
`%`	Percentage	`width: 50%;`
`em`	Relative to parent font size	`margin: 2em;`
`rem`	Relative to root font size	`font-size: 1.5rem;`
`vh`, `vw`	Viewport height/width	`height: 100vh;`

Internal Resources

FAQ – CSS Cheat Sheet

Q1: What is CSS used for?
CSS styles HTML elements, controlling layout, colors, and typography for beautiful web design.

Q2: What is the difference between inline, internal, and external CSS?

Inline CSS: inside HTML tags
Internal CSS: inside <style> in <head>
External CSS: linked .css file

Q3: What are Flexbox and Grid used for?
Flexbox handles one-dimensional layouts, while Grid is for complex two-dimensional layouts.

Q4: How can I center an element in CSS?
Using Flexbox:

display: flex;
justify-content: center;
align-items: center;

Q5: How to make a responsive layout?
Use media queries:

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