Scribd
Upload
10 views2 pages

CSS Properties Explained

The document explains various CSS properties including color, font-size, margin, padding, display, position, opacity, transform, transition, and animation. Each property is defined with examples demonstrating how to apply them in CSS. This serves as a reference for styling web elements 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
10 views2 pages

CSS Properties Explained

The document explains various CSS properties including color, font-size, margin, padding, display, position, opacity, transform, transition, and animation. Each property is defined with examples demonstrating how to apply them in CSS. This serves as a reference for styling web elements 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/ 2

CSS Properties Explained

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

font-size
Specifies the size of the text. Can be set in pixels (px), em, rem, or percentages.
p { font-size: 16px; }
h1 { font-size: 2em; }
div { font-size: 120%; }

margin
Defines the outer spacing between an element and surrounding elements.
div { margin: 10px; }
p { margin: 10px 20px; }
span { margin: auto; }

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

display
Specifies how an element is displayed in the document.
div { display: block; }
span { display: inline; }
img { display: none; }

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

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

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

transition
Specifies how property changes should be 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; }

You might also like