CSS (Cascading Style Sheets) is the language used to style HTML documents. From defining colors and layout to adjusting font styles and positioning, CSS plays an essential role in creating visually appealing web pages. This cheat sheet serves as a quick reference guide to CSS properties, values, and other core concepts.

1. CSS Syntax and Selectors

CSS syntax defines how to apply styles to specific HTML elements using selectors. Selectors target HTML elements, while properties and values define how these elements are styled.

Name	Description	Example
Selector	Targets the HTML element(s) to be styled.	p { color: blue; } – styles all <p> elements with blue text.
Property	The style attribute to be applied (e.g., color, font-size).	color, font-size, margin, etc.
Value	Defines the specific style for the property.	color: red;, font-size: 16px;
Comments	Adds a comment for clarity, not affecting code.	/* This is a comment */

2. CSS Selectors and Combinators

Selectors define which elements a style applies to, and combinators allow more precise targeting.

Selector	Description	Example
* (Universal Selector)	Selects all elements.	* { margin: 0; padding: 0; }
#id	Selects an element by its unique ID.	#main { background-color: yellow; }
.class	Selects all elements with the specified class.	.highlight { color: red; }
element	Selects all elements of a specific type.	h1 { font-size: 24px; }
element, element	Selects multiple elements.	h1, h2, h3 { margin: 0; }
element element	Selects descendants of an element.	div p { color: blue; }
element > element	Selects direct children of an element.	div > p { font-weight: bold; }

3. Text and Font Styling

CSS allows you to control the typography of your website by modifying text and font styles. The following properties are used to style text in different ways.

Property	Description	Values	Example
color	Sets the color of the text.	Color name, hex, RGB, HSL	color: #333; or color: rgb(51, 51, 51);
font-family	Defines the font type for text.	Font name, generic family	font-family: Arial, sans-serif;
font-size	Sets the size of the font.	px, em, %	font-size: 16px;
font-weight	Sets the thickness of the text.	normal, bold, lighter, numeric values	font-weight: bold;
font-style	Italicizes the text.	normal, italic, oblique	font-style: italic;
line-height	Defines the space between lines of text.	normal, numeric, length	line-height: 1.5;
text-align	Aligns the text inside an element.	left, right, center, justify	text-align: center;
text-transform	Controls capitalization of text.	uppercase, lowercase, capitalize	text-transform: uppercase;
text-decoration	Adds text styling like underline, overline, or line-through.	none, underline, overline, line-through	text-decoration: underline;

4. Box Model: Margins, Padding, and Borders

The CSS box model defines how elements are structured in terms of space (padding, margins, and borders).

Property	Description	Values	Example
margin	Defines the space outside an element's border.	Length, auto	margin: 10px;
padding	Defines the space between the content and the border.	Length, percentage	padding: 20px;
border	Adds a border around the element.	width style color	border: 1px solid black;
border-radius	Rounds the corners of an element's border.	Length, percentage	border-radius: 10px;
box-shadow	Adds a shadow effect around an element.	h-offset v-offset blur color	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
width	Sets the width of an element.	Length, percentage	width: 300px;
height	Sets the height of an element.	Length, percentage	height: 200px;

5. Layout and Positioning

CSS provides several ways to control the layout and positioning of elements on a webpage. The following properties allow for both static and dynamic positioning.

Property	Description	Values	Example
display	Specifies how an element is displayed.	block, inline, inline-block, none	display: block;
position	Specifies the type of positioning for an element.	static, relative, absolute, fixed, sticky	position: relative;
top, right, bottom, left	Defines the positioning offsets for positioned elements.	Length, percentage	top: 10px;
z-index	Defines the stack order of elements.	Numeric value	z-index: 10;
float	Floats an element to the left or right.	left, right, none	float: left;
clear	Specifies whether an element should be moved below floating elements.	left, right, both, none	clear: both;

6. Backgrounds and Gradients

CSS enables you to set solid color backgrounds or more advanced gradient backgrounds. These properties help you add depth and interest to web designs.

Property	Description	Values	Example
background-color	Sets the background color of an element.	Color name, hex, RGB, HSL	background-color: #f4f4f4;
background-image	Sets a background image for an element.	url()	background-image: url('background.jpg');
background-repeat	Defines how a background image is repeated.	repeat, no-repeat, repeat-x, repeat-y	background-repeat: no-repeat;
background-position	Specifies the position of the background image.	left, center, right, top, bottom, length	background-position: center center;
background-size	Sets the size of the background image.	cover, contain, length	background-size: cover;
background-clip	Specifies whether the background extends under the border.	border-box, padding-box, content-box	background-clip: padding-box;
linear-gradient	Creates a linear gradient background.	Gradient direction, color stops	background: linear-gradient(to right, red, yellow);

7. Transitions, Animations, and Transforms

CSS allows for dynamic transitions, animations, and transformations that enhance user experience and interactivity.

Property	Description	Values	Example
transition	Creates smooth transitions between different states of an element.	property duration timing-function	transition: background-color 0.3s ease-in-out;
transition-duration	Specifies the duration of the transition effect.	Time (s, ms)	transition-duration: 0.5s;
transition-timing-function	Specifies the speed curve of the transition.	ease, linear, ease-in, ease-out, ease-in-out	transition-timing-function: ease-in;
animation	Defines a keyframe animation.	name duration timing-function	animation: bounce 2s infinite;
animation-name	Specifies the name of the @keyframes animation.	Keyframe name	animation-name: slideIn;
animation-duration	Specifies how long an animation takes to complete.	Time (s, ms)	animation-duration: 1.5s;
transform	Applies 2D or 3D transformations to an element.	rotate(), scale(), translate(), skew()	transform: rotate(45deg);
transform-origin	Defines the origin for transformations.	center, top left, 50% 50%	transform-origin: center center;
scale()	Resizes the element (scales it).	Number	transform: scale(1.5);
rotate()	Rotates the element.	Angle (deg, turn)	transform: rotate(90deg);
translate()	Moves the element along the X and Y axes.	Length or percentage	transform: translate(50px, 100px);

8. Flexbox

Flexbox is a powerful layout module that allows for flexible and responsive layouts. It is especially useful for aligning and distributing space among items within a container.

Property	Description	Values	Example
display: flex	Turns an element into a flex container.	flex, inline-flex	display: flex;
flex-direction	Defines the direction of the flex items.	row, row-reverse, column, column-reverse	flex-direction: row;
justify-content	Aligns items horizontally in a flex container.	flex-start, flex-end, center, space-between, space-around	justify-content: space-between;
align-items	Aligns items vertically in a flex container.	flex-start, flex-end, center, baseline, stretch	align-items: center;
flex-wrap	Defines whether flex items should wrap onto multiple lines.	nowrap, wrap, wrap-reverse	flex-wrap: wrap;
align-content	Aligns the flex container’s lines when there is extra space.	stretch, center, flex-start, flex-end, space-between, space-around	align-content: stretch;
flex-grow	Specifies how much an item will grow relative to the others.	Number	flex-grow: 2;
flex-shrink	Specifies how much an item will shrink relative to the others.	Number	flex-shrink: 1;
flex-basis	Defines the initial size of a flex item before any remaining space is distributed.	auto, length, percentage	flex-basis: 200px;

9. Grid Layout

CSS Grid is another powerful layout system that allows for complex, two-dimensional layouts. It provides more control over rows and columns than Flexbox.

Property	Description	Values	Example
display: grid	Turns an element into a grid container.	grid, inline-grid	display: grid;
grid-template-columns	Defines the number and size of columns in the grid.	Length, percentage, auto	grid-template-columns: repeat(3, 1fr);
grid-template-rows	Defines the number and size of rows in the grid.	Length, percentage, auto	grid-template-rows: 100px auto 100px;
grid-column-gap	Specifies the gap between grid columns.	Length	grid-column-gap: 20px;
grid-row-gap	Specifies the gap between grid rows.	Length	grid-row-gap: 20px;
grid-gap	Shorthand for both grid-column-gap and grid-row-gap.	Length	grid-gap: 20px 40px;
grid-column	Specifies how many columns an item should span.	span or auto	grid-column: span 2;
grid-row	Specifies how many rows an item should span.	span or auto	grid-row: span 3;
justify-items	Aligns grid items along the row axis.	start, end, center, stretch	justify-items: center;
align-items	Aligns grid items along the column axis.	start, end, center, stretch	align-items: stretch;

---

10. Media Queries

Media queries allow you to apply styles based on the device's characteristics, such as screen width or resolution. This enables responsive design.

Property	Description	Values	Example
@media	Applies styles based on specified conditions.	screen, min-width, max-width	@media screen and (min-width: 768px) { ... }
min-width	Sets a minimum width for applying styles.	Length	@media (min-width: 600px) { ... }
max-width	Sets a maximum width for applying styles.	Length	@media (max-width: 1200px) { ... }

This CSS Cheat Sheet 2024 provides a comprehensive reference for core CSS properties, values, and techniques, helping you style and design your web pages effectively. Whether you're working with basic typography or advanced layout systems like Flexbox and Grid, mastering these properties is essential for creating responsive, visually appealing websites.