CSS Properties

Properties for controlling colors, backgrounds, images, and opacity.

Property	Name	Description	Example
color	Text Color	Sets the foreground text color.	color: #3c88a3;
background-color	Background Color	Sets an element's background color.	background-color: #ffffff;
background-image	Background Image	Sets one or more background images or gradients.	background-image: url('image.jpg');
background-repeat	Background Repeat	Controls whether and how a background image repeats.	background-repeat: no-repeat;
background-position	Background Position	Sets the position of a background image.	background-position: center;
background-size	Background Size	Controls the rendered size of a background image.	background-size: cover;
opacity	Opacity	Sets the opacity of an entire element from 0 to 1.	opacity: 0.8;

Properties for controlling text appearance, alignment, and spacing.

Property	Name	Description	Example
font-family	Font Family	Sets the typeface and fallback font stack.	font-family: "Inter", Arial, sans-serif;
font-size	Font Size	Controls text size.	font-size: 1rem;
font-weight	Font Weight	Controls text thickness.	font-weight: 600;
font-style	Font Style	Controls normal, italic, or oblique styling.	font-style: italic;
line-height	Line Height	Controls spacing between lines of text.	line-height: 1.6;
letter-spacing	Letter Spacing	Adjusts spacing between characters.	letter-spacing: 0.05em;
word-spacing	Word Spacing	Adjusts spacing between words.	word-spacing: 0.7em;
text-align	Text Alignment	Aligns inline content within a block container.	text-align: center;
text-decoration	Text Decoration	Controls decorative lines such as underlines and line-throughs.	text-decoration: underline;
text-transform	Text Transform	Controls text capitalization.	text-transform: uppercase;
white-space	White Space	Controls whitespace collapsing and text wrapping.	white-space: nowrap;

Properties for controlling element dimensions, spacing, borders, and overflow.

Property	Name	Description	Example
width	Width	Sets an element's width.	width: 100%;
height	Height	Sets an element's height.	height: 300px;
min-width / max-width	Width Limits	Set minimum and maximum allowed widths.	min-width: 100px; max-width: 500px;
min-height / max-height	Height Limits	Set minimum and maximum allowed heights.	min-height: 100px; max-height: 500px;
margin	Outer Spacing	Creates space outside an element's border.	margin: 2rem auto;
padding	Inner Spacing	Creates space between content and the element's border.	padding: 1rem 1.5rem;
border	Border	Shorthand for border width, style, and color.	border: 1px solid #000;
border-radius	Corner Radius	Rounds an element's corners.	border-radius: 0.5rem;
box-sizing	Box Sizing	Controls how an element's declared width and height are calculated.	box-sizing: border-box;
overflow	Overflow	Controls content that extends beyond an element's box.	overflow: hidden;
box-shadow	Box Shadow	Adds one or more shadows around an element.	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);

Properties for controlling layout behavior, positioning, stacking, and visibility.

Property	Name	Description	Example
display	Display Type	Controls layout behavior such as block, inline, flex, grid, or none.	display: flex;
position	Positioning Mode	Sets static, relative, absolute, fixed, or sticky positioning.	position: relative;
top / right / bottom / left	Offsets	Offset a positioned element from the corresponding edges.	top: 10px; left: 20px;
auto	Automatic Sizing	Lets the layout algorithm determine the value.	margin-inline: auto;
inset	Inset Shorthand	Shorthand for top, right, bottom, and left offsets.	inset: 10px 20px;
z-index	Stacking Order	Sets an element's stack level within the applicable stacking context.	z-index: 10;
visibility	Visibility	Hides or shows an element while preserving its layout space when hidden.	visibility: hidden;
float	Float	Moves an element left or right and allows inline content to wrap around it.	float: left;
clear	Clear Float	Controls whether an element may sit beside floated elements.	clear: left;

Properties for controlling flex containers, item sizing, alignment, and order.

Property	Name	Description	Example
display	Flex Container	Creates a Flexbox formatting context.	display: flex;
flex-direction	Main Axis Direction	Sets the direction of the main axis.	flex-direction: column;
flex-wrap	Flex Wrapping	Controls whether items stay on one line or wrap onto multiple lines.	flex-wrap: wrap;
justify-content	Main-Axis Alignment	Distributes items along the main axis.	justify-content: space-between;
align-items	Cross-Axis Alignment	Aligns items along the cross axis.	align-items: center;
align-content	Wrapped-Line Alignment	Distributes multiple flex lines along the cross axis.	align-content: space-around;
gap	Gap	Sets consistent spacing between flex or grid items.	gap: 1rem;
flex-grow	Flex Grow	Controls how much an item may grow relative to other flex items.	flex-grow: 1;
flex-shrink	Flex Shrink	Controls how much an item may shrink relative to other flex items.	flex-shrink: 1;
flex-basis	Flex Basis	Sets an item's initial main-axis size before free space is distributed.	flex-basis: auto;
flex	Flex Shorthand	Shorthand for flex-grow, flex-shrink, and flex-basis.	flex: 1 1 auto;
align-self	Individual Alignment	Overrides align-items for one flex or grid item.	align-self: center;
order	Visual Order	Changes the visual order of a flex or grid item.	order: 1;

Properties for defining grid tracks, placement, spacing, and alignment.

Property	Name	Description	Example
display	Grid Container	Creates a CSS Grid formatting context.	display: grid;
grid-template-columns	Grid Columns	Defines grid column tracks.	grid-template-columns: repeat(3, 1fr);
grid-template-rows	Grid Rows	Defines grid row tracks.	grid-template-rows: 100px auto;
grid-template-areas	Named Grid Areas	Defines a visual layout using named grid areas.	grid-template-areas: "header header" "sidebar main";
grid-column	Column Placement	Controls where a grid item starts and ends across columns.	grid-column: 1 / 3;
grid-row	Row Placement	Controls where a grid item starts and ends across rows.	grid-row: 1 / 2;
grid-area	Grid Area	Sets a named area or shorthand row and column placement.	grid-area: header;
gap	Grid Gap	Sets spacing between grid rows and columns.	gap: 1rem;
justify-items	Inline Alignment	Aligns items within their grid areas along the inline axis.	justify-items: center;
align-items	Block Alignment	Aligns items within their grid areas along the block axis.	align-items: center;
place-items	Alignment Shorthand	Combines align-items and justify-items.	place-items: center;

Properties for controlling visual effects, motion, and user interaction.

Property	Name	Description	Example
cursor	Cursor	Controls the cursor appearance when pointing at an element.	cursor: pointer;
transform	Transform	Moves, rotates, scales, or skews an element.	transform: rotate(45deg);
transform-origin	Transform Origin	Sets the point around which a transform occurs.	transform-origin: center;
transition	Transition	Animates changes between supported property values.	transition: opacity 0.3s ease;
animation	Animation	Applies one or more keyframe animations.	animation: slideIn 0.5s ease-in-out;
filter	Filter	Applies graphical effects such as blur or grayscale.	filter: blur(5px);
outline	Outline	Draws a line outside the border and is commonly used for focus indicators.	outline: 2px solid blue;
pointer-events	Pointer Events	Controls whether an element can be the target of pointer events.	pointer-events: auto;
user-select	Text Selection	Controls whether users can select an element's text.	user-select: none;
accent-color	Form Accent Color	Sets the accent color of compatible native form controls.	accent-color: blue;

Rules, functions, and properties for creating flexible and responsive layouts.

Property / Rule	Name	Description	Example
@media	Media Query	Applies CSS when specified media conditions match.	@media (max-width: 600px) { ... }
clamp()	Responsive Clamp	Constrains a preferred value between a minimum and maximum.	clamp(1rem, 2.5vw, 2rem);
min()	Minimum Function	Uses the smallest calculated value from a list.	min(100px, 20vw);
max()	Maximum Function	Uses the largest calculated value from a list.	max(100px, 20vw);
object-fit	Media Fit	Controls how replaced content such as images or videos fits its content box.	object-fit: cover;
aspect-ratio	Aspect Ratio	Defines a preferred width-to-height ratio for an element.	aspect-ratio: 16 / 9;