Scribd
Upload
11 views

Detailed_CSS_Properties

The document provides a detailed explanation of various CSS properties including color, font-family, font-size, margin, padding, display, position, z-index, opacity, transform, transition, animation, flexbox, grid, media queries, and CSS variables. Each property is illustrated with examples demonstrating its usage in styling HTML elements. This serves as a comprehensive guide for understanding and applying CSS properties effectively.

Uploaded by

azer11624
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
11 views

Detailed_CSS_Properties

The document provides a detailed explanation of various CSS properties including color, font-family, font-size, margin, padding, display, position, z-index, opacity, transform, transition, animation, flexbox, grid, media queries, and CSS variables. Each property is illustrated with examples demonstrating its usage in styling HTML elements. This serves as a comprehensive guide for understanding and applying CSS properties effectively.

Uploaded by

azer11624
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/ 3

Detailed CSS Properties Explanation

color
Defines the color of text. Can be specified using color names, hex codes, RGB, or HSL.
p { color: red; }
span { color: #ff0000; }
div { color: rgb(255, 0, 0); }

font-family
Specifies the font of the text. Multiple fonts can be listed as fallbacks.
p { font-family: Arial, sans-serif; }
div { font-family: 'Courier New', monospace; }

font-size
Sets the size of the font. Can be defined in px, em, rem, or percentages.
h1 { font-size: 2em; }
p { font-size: 16px; }
div { font-size: 120%; }

margin
Defines the outer space around an element.
div { margin: 10px; }
p { margin: 10px 20px; }
span { margin: auto; }

padding
Defines the inner space between the element's content and its border.
div { padding: 10px; }
p { padding: 10px 20px; }
span { padding: 5px 10px 15px 20px; }

display
Determines how an element is displayed.
div { display: block; }
span { display: inline; }
img { display: none; }

position
Defines how an element is positioned in the document flow.
div { position: static; }
span { position: absolute; }
p { position: fixed; }

z-index
Determines the stack order of elements.
div { position: absolute; z-index: 10; }
p { z-index: 1; }

opacity
Controls the transparency of an element.
div { opacity: 1; }
p { opacity: 0.5; }
span { opacity: 0; }

transform
Applies transformations such as rotation, scaling, and translation.
div { transform: rotate(45deg); }
p { transform: scale(1.5); }
span { transform: translate(10px, 20px); }

transition
Specifies how property changes are animated over time.
div { transition: all 0.5s ease-in-out; }
p { transition: opacity 1s linear; }

animation
Defines animations using keyframes.
@keyframes example { 0% { opacity: 0; } 100% { opacity: 1; } }
div { animation: example 2s infinite; }

flexbox
A layout model for arranging elements efficiently in rows and columns.
container { display: flex; justify-content: space-between; align-items: center; }

grid
A two-dimensional layout system.
container { display: grid; grid-template-columns: 1fr 2fr; grid-gap: 10px; }

@media
Used for responsive design by applying styles based on screen size.
@media (max-width: 600px) { body { background-color: lightblue; } }
CSS Variables (--var)
Allows defining reusable variables for styles.
:root { --main-color: #ff5733; }
button { background-color: var(--main-color); }

You might also like