Scribd
Upload
3 views

CSS Properties Overview

This document provides an overview of various CSS properties, categorized into sections such as Color and Background, Text Styling, Box Model, Positioning, Flexbox, Grid, Animation and Transition, and Others. Each property is accompanied by its possible values and an example usage. It serves as a reference for understanding and applying CSS styles effectively.

Uploaded by

deysayandey21
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

CSS Properties Overview

This document provides an overview of various CSS properties, categorized into sections such as Color and Background, Text Styling, Box Model, Positioning, Flexbox, Grid, Animation and Transition, and Others. Each property is accompanied by its possible values and an example usage. It serves as a reference for understanding and applying CSS styles effectively.

Uploaded by

deysayandey21
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

CSS Properties Overview

Color and Background


color
*Values*: <color> (e.g., #FF0000, rgb(255,0,0), blue)
*Example*: color: #333333;

background-color
*Values*: <color>
*Example*: background-color: lightblue;

background-image
*Values*: url('image.jpg'), none
*Example*: background-image: url('bg.jpg');

background-size
*Values*: auto, cover, contain, <width> <height>
*Example*: background-size: cover;

Text Styling
font-size
*Values*: <absolute-size> (e.g., medium, large), <length> (e.g., 14px, 1em)
*Example*: font-size: 16px;

font-family
*Values*: serif, sans-serif, 'Arial', sans-serif
*Example*: font-family: Arial, sans-serif;

font-weight
*Values*: normal, bold, lighter, <number> (e.g., 400, 700)
*Example*: font-weight: bold;

text-align
*Values*: left, right, center, justify
*Example*: text-align: center;
text-decoration
*Values*: none, underline, line-through, overline
*Example*: text-decoration: underline;

Box Model
width
*Values*: <length>, <percentage> (e.g., 50%)
*Example*: width: 100px;

height
*Values*: <length>, <percentage>
*Example*: height: auto;

margin
*Values*: <length>, auto, <percentage>
*Example*: margin: 20px auto;

padding
*Values*: <length>, <percentage>
*Example*: padding: 10px;

border
*Values*: <width> <style> <color> (e.g., 1px solid #000)
*Example*: border: 1px solid black;

box-sizing
*Values*: content-box, border-box
*Example*: box-sizing: border-box;

Positioning
position
*Values*: static, relative, absolute, fixed, sticky
*Example*: position: relative;

top, right, bottom, left


*Values*: <length>, <percentage>, auto
*Example*: top: 50px;

z-index
*Values*: <integer> (e.g., 1, 10)
*Example*: z-index: 10;

Flexbox
display
*Values*: flex, inline-flex, block, inline, none
*Example*: display: flex;

flex-direction
*Values*: row, column, row-reverse, column-reverse
*Example*: flex-direction: column;

justify-content
*Values*: flex-start, flex-end, center, space-between, space-around
*Example*: justify-content: space-between;

align-items
*Values*: stretch, center, flex-start, flex-end, baseline
*Example*: align-items: center;

flex-grow
*Values*: <number>
*Example*: flex-grow: 2;

Grid
grid-template-columns
*Values*: <track-size>, repeat()
*Example*: grid-template-columns: 1fr 2fr;

grid-template-rows
*Values*: <track-size>, repeat()
*Example*: grid-template-rows: 100px auto 1fr;
grid-column-gap
*Values*: <length>
*Example*: grid-column-gap: 10px;

grid-row-gap
*Values*: <length>
*Example*: grid-row-gap: 15px;

Animation and Transition


transition
*Values*: property duration timing-function delay
*Example*: transition: all 0.3s ease;

animation
*Values*: name duration timing-function delay iteration-count direction
*Example*: animation: fadeIn 1s ease-in-out;

@keyframes
*Values*: Custom keyframes defined by user
*Example*: @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

Others
opacity
*Values*: <number> (e.g., 0.0 to 1.0)
*Example*: opacity: 0.5;

cursor
*Values*: pointer, default, move, not-allowed, crosshair
*Example*: cursor: pointer;

overflow
*Values*: visible, hidden, scroll, auto
*Example*: overflow: hidden;

You might also like