color: Sets the text color
background-color: Sets the background color
background-image: Sets a background picture
font-family: Chooses the typeface
font-size: Sets the text size
font-weight: Sets how bold text is
font-style: Sets italic or normal
text-align: Aligns text left, center, right or justify
text-decoration: Adds underline, overline or line-through
text-transform: Changes case: uppercase, lowercase, capitalize
line-height: Sets space between lines of text
letter-spacing: Sets space between letters
width: Sets the width of an element
height: Sets the height of an element
max-width: Sets the largest width allowed
min-height: Sets the smallest height allowed
margin: Space outside an element's border
padding: Space inside an element between content and border
border: Draws a line around an element
border-radius: Rounds the corners of an element
box-shadow: Adds a shadow around an element
text-shadow: Adds a shadow to text
opacity: Sets transparency from 0 to 1
display: Sets how an element is shown: block, inline, flex, grid, none
display: none: Hides an element and its space
visibility: hidden: Hides an element but keeps its space
position: Sets how an element is positioned: static, relative, absolute, fixed, sticky
position: relative: Positions an element compared to its normal spot
position: absolute: Positions an element relative to its nearest positioned parent
position: fixed: Keeps an element in place when scrolling
position: sticky: Sticks an element once you scroll to it
top, right, bottom, left: Offsets for positioned elements
z-index: Sets stacking order of overlapping elements
float: Pushes an element to the left or right so text wraps around it
overflow: Controls what happens when content is too big
box-sizing: border-box: Includes padding and border in an element's width
Flexbox (display: flex): A layout system for rows or columns
flex-direction: Sets row or column in flexbox
justify-content: Aligns flex items along the main axis
align-items: Aligns flex items along the cross axis
flex-wrap: Lets flex items wrap to the next line
gap: Space between flex or grid items
flex-grow: How much an item grows to fill space
Grid (display: grid): A two-dimensional layout system
grid-template-columns: Defines the columns of a grid
grid-template-rows: Defines the rows of a grid
grid-column: Places an item across columns
Selector: The part of CSS that picks which elements to style
Element selector: Targets tags, like p { }
Class selector: Targets by class, like .box { }
ID selector: Targets by ID, like #main { }
Descendant selector: Targets elements inside others, like nav a { }
Child selector: Targets direct children only, like ul > li { }
Universal selector: * targets all elements
Pseudo-class: A state selector like :hover or :focus
Pseudo-element: Selects part of an element like ::before or ::first-line
Specificity: The rule deciding which style wins when rules conflict
Cascade: Styles are combined in order and importance
Inheritance: Some properties pass down from parent to child
!important: Makes a rule override others, to be used rarely
Media query: A rule that applies styles for certain screen sizes
Responsive design: Pages that adapt to different screen sizes
Pixels (px): A fixed unit of size
em unit: A size relative to the parent's font size
rem unit: A size relative to the root font size
Percent (%): A size relative to the parent
vh and vw: 1% of the viewport height or width
Hex color: A color written as #RRGGBB, like #FF0000
rgb(): A color written with red, green and blue values
hsl(): A color written with hue, saturation and lightness
transition: Animates changes between styles
transform: Moves, rotates, scales or skews an element
animation: Applies keyframe animation
@keyframes: Defines the steps of an animation
CSS stands for: Cascading Style Sheets
CSS variable: A reusable value set with --name and used with var(--name)
cursor: Changes the mouse pointer style
list-style: Changes bullets or numbers in lists

Free flashcards from Peabody at peabody.kids/flashcards/tech-css-properties