Scribd
Upload
51 views4 pages

CSS Properties Cheat Sheet

The document provides a comprehensive list of CSS properties along with their specific uses, such as setting text color, background color, and dimensions of elements. It covers properties related to layout, positioning, and visual effects like shadows and animations. Additionally, it includes responsive design techniques and controls for text formatting and spacing.

Uploaded by

calebjoshuaslm
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
51 views4 pages

CSS Properties Cheat Sheet

The document provides a comprehensive list of CSS properties along with their specific uses, such as setting text color, background color, and dimensions of elements. It covers properties related to layout, positioning, and visual effects like shadows and animations. Additionally, it includes responsive design techniques and controls for text formatting and spacing.

Uploaded by

calebjoshuaslm
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

CSS Properties and Their Uses

color

Use: Sets the text color.

background-color

Use: Sets the background color of an element.

font-size

Use: Sets the size of the text.

font-family

Use: Specifies the font of the text.

text-align

Use: Aligns the text inside an element.

margin

Use: Adds space outside an element (external spacing).

padding

Use: Adds space inside an element (internal spacing).

border

Use: Adds a border around an element.

width

Use: Sets the width of an element.

height

Use: Sets the height of an element.

display

Use: Controls how an element is displayed.

position

Use: Sets how an element is positioned.


top, right, bottom, left

Use: Used with position to move elements.

z-index

Use: Controls stacking order of overlapping elements.

overflow

Use: Controls what happens when content overflows its box.

box-shadow

Use: Adds shadow around elements.

border-radius

Use: Rounds the corners of an element.

transition

Use: Adds smooth animation when property values change.

:hover

Use: Applies style when mouse hovers over element.

flex

Use: Creates flexible layouts.

opacity

Use: Controls transparency of an element.

visibility

Use: Hides or shows an element without changing layout.

cursor

Use: Changes the mouse pointer type when hovering.

line-height

Use: Sets the space between lines of text.

letter-spacing
Use: Sets space between letters.

text-decoration

Use: Adds or removes decoration from text.

text-transform

Use: Controls capitalization of text.

white-space

Use: Controls how whitespace is handled.

overflow-x / overflow-y

Use: Controls overflow separately for horizontal/vertical.

max-width / min-width

Use: Sets maximum or minimum width of an element.

box-sizing

Use: Controls how width/height is calculated.

background-image

Use: Sets an image as the background.

background-size

Use: Controls the size of a background image.

background-repeat

Use: Prevents or allows background image repeating.

background-position

Use: Positions background image.

grid

Use: Creates a 2D layout grid.

gap

Use: Sets space between rows or columns in grid/flex.


animation

Use: Adds keyframe-based animation to elements.

@media

Use: Makes layout responsive.

transform

Use: Rotates, scales, or moves elements.

You might also like