Scribd
Upload
23 views2 pages

Comprehensive CSS Properties Guide

The document provides a comprehensive list of CSS properties categorized into sections such as Color & Background, Text & Font, Box Model, Positioning, Flexbox, Grid Layout, Animation & Transition, Transform & Filter, Responsive Design, and Miscellaneous. Each property is briefly described with its primary use, such as setting colors, dimensions, positioning elements, and creating animations. This serves as a quick reference guide for web developers to understand and utilize CSS effectively.

Uploaded by

start.trading998
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
23 views2 pages

Comprehensive CSS Properties Guide

The document provides a comprehensive list of CSS properties categorized into sections such as Color & Background, Text & Font, Box Model, Positioning, Flexbox, Grid Layout, Animation & Transition, Transform & Filter, Responsive Design, and Miscellaneous. Each property is briefly described with its primary use, such as setting colors, dimensions, positioning elements, and creating animations. This serves as a quick reference guide for web developers to understand and utilize CSS effectively.

Uploaded by

start.trading998
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

Full CSS Properties List and Their Uses

Color & Background


color: Sets text color.
background-color: Sets background color.
background-image: Sets background image.
background-repeat: Repeats background (`repeat`, `no-repeat`, etc.).
background-size: Controls background image size.
background-position: Sets image position (e.g., `center`).
opacity: Sets transparency (0 = transparent, 1 = solid).

Text & Font


font-family: Defines font type (e.g., Arial, sans-serif).
font-size: Sets text size.
font-weight: Sets font thickness.
font-style: Normal, italic, or oblique.
text-align: Aligns text (`left`, `center`, etc.).
text-decoration: Adds underline or line-through.
text-transform: Converts text case.
letter-spacing: Controls space between characters.
line-height: Sets line spacing.

Box Model (Layout & Spacing)


width / height: Element dimensions.
margin / padding: Outer and inner spacing.
border: Sets border style, color, and width.
border-radius: Rounds corners.
box-shadow: Adds shadow around element.
overflow: Controls overflow content (`hidden`, `scroll`).

Positioning
position: Defines element position type.
top / right / bottom / left: Offsets element from container.
z-index: Sets stacking order.
float: Floats element left or right.
clear: Controls float behavior.
display: Defines display type (`block`, `flex`, etc.).

Flexbox
display: flex: Enables flex container.
flex-direction: Sets main axis direction.
justify-content: Aligns items horizontally.
align-items: Aligns items vertically.
flex-wrap: Wraps items into multiple lines.
gap: Space between flex items.

Grid Layout
display: grid: Enables grid container.
grid-template-columns / rows: Defines grid structure.
justify-items / align-items: Aligns grid items.
grid-gap: Sets spacing between grid items.

Animation & Transition


transition: Smoothly changes property values.
transition-duration: Defines how long the transition lasts.
animation-name: Name of keyframe animation.
animation-duration: Sets animation length.
animation-iteration-count: How many times animation repeats.

Transform & Filter


transform: Applies transformations like rotate or scale.
transform-origin: Sets pivot point for transform.
filter: Applies visual effects like blur or contrast.
perspective: Adds 3D depth to elements.

Responsive Design
@media: Applies rules based on screen size.
@supports: Conditional CSS for feature support.
@keyframes: Defines animation frames.

Miscellaneous
cursor: Sets mouse cursor style.
user-select: Controls text selection.
content: Used in pseudo-elements `::before` and `::after`.
visibility: Hides element but keeps layout space.

You might also like