Flashcards › Technology & Coding › Web Development

CSS Properties

Common CSS properties, selectors and values for styling web pages.

78 cardsGrades 6–8, Grades 9–12, College, Adult#CSS#web#styling

0 of 78 known
78 cards
  • colorProperty or term
    Sets the text color
  • background-colorProperty or term
    Sets the background color
  • background-imageProperty or term
    Sets a background picture
  • font-familyProperty or term
    Chooses the typeface
  • font-sizeProperty or term
    Sets the text size
  • font-weightProperty or term
    Sets how bold text is
  • font-styleProperty or term
    Sets italic or normal
  • text-alignProperty or term
    Aligns text left, center, right or justify
  • text-decorationProperty or term
    Adds underline, overline or line-through
  • text-transformProperty or term
    Changes case: uppercase, lowercase, capitalize
  • line-heightProperty or term
    Sets space between lines of text
  • letter-spacingProperty or term
    Sets space between letters
  • widthProperty or term
    Sets the width of an element
  • heightProperty or term
    Sets the height of an element
  • max-widthProperty or term
    Sets the largest width allowed
  • min-heightProperty or term
    Sets the smallest height allowed
  • marginProperty or term
    Space outside an element's border
  • paddingProperty or term
    Space inside an element between content and border
  • borderProperty or term
    Draws a line around an element
  • border-radiusProperty or term
    Rounds the corners of an element
  • box-shadowProperty or term
    Adds a shadow around an element
  • text-shadowProperty or term
    Adds a shadow to text
  • opacityProperty or term
    Sets transparency from 0 to 1
  • displayProperty or term
    Sets how an element is shown: block, inline, flex, grid, none
  • display: noneProperty or term
    Hides an element and its space
  • visibility: hiddenProperty or term
    Hides an element but keeps its space
  • positionProperty or term
    Sets how an element is positioned: static, relative, absolute, fixed, sticky
  • position: relativeProperty or term
    Positions an element compared to its normal spot
  • position: absoluteProperty or term
    Positions an element relative to its nearest positioned parent
  • position: fixedProperty or term
    Keeps an element in place when scrolling
  • position: stickyProperty or term
    Sticks an element once you scroll to it
  • top, right, bottom, leftProperty or term
    Offsets for positioned elements
  • z-indexProperty or term
    Sets stacking order of overlapping elements
  • floatProperty or term
    Pushes an element to the left or right so text wraps around it
  • overflowProperty or term
    Controls what happens when content is too big
  • box-sizing: border-boxProperty or term
    Includes padding and border in an element's width
  • Flexbox (display: flex)Property or term
    A layout system for rows or columns
  • flex-directionProperty or term
    Sets row or column in flexbox
  • justify-contentProperty or term
    Aligns flex items along the main axis
  • align-itemsProperty or term
    Aligns flex items along the cross axis
  • flex-wrapProperty or term
    Lets flex items wrap to the next line
  • gapProperty or term
    Space between flex or grid items
  • flex-growProperty or term
    How much an item grows to fill space
  • Grid (display: grid)Property or term
    A two-dimensional layout system
  • grid-template-columnsProperty or term
    Defines the columns of a grid
  • grid-template-rowsProperty or term
    Defines the rows of a grid
  • grid-columnProperty or term
    Places an item across columns
  • SelectorProperty or term
    The part of CSS that picks which elements to style
  • Element selectorProperty or term
    Targets tags, like p { }
  • Class selectorProperty or term
    Targets by class, like .box { }
  • ID selectorProperty or term
    Targets by ID, like #main { }
  • Descendant selectorProperty or term
    Targets elements inside others, like nav a { }
  • Child selectorProperty or term
    Targets direct children only, like ul > li { }
  • Universal selectorProperty or term
    * targets all elements
  • Pseudo-classProperty or term
    A state selector like :hover or :focus
  • Pseudo-elementProperty or term
    Selects part of an element like ::before or ::first-line
  • SpecificityProperty or term
    The rule deciding which style wins when rules conflict
  • CascadeProperty or term
    Styles are combined in order and importance
  • InheritanceProperty or term
    Some properties pass down from parent to child
  • !importantProperty or term
    Makes a rule override others, to be used rarely
  • Media queryProperty or term
    A rule that applies styles for certain screen sizes
  • Responsive designProperty or term
    Pages that adapt to different screen sizes
  • Pixels (px)Property or term
    A fixed unit of size
  • em unitProperty or term
    A size relative to the parent's font size
  • rem unitProperty or term
    A size relative to the root font size
  • Percent (%)Property or term
    A size relative to the parent
  • vh and vwProperty or term
    1% of the viewport height or width
  • Hex colorProperty or term
    A color written as #RRGGBB, like #FF0000
  • rgb()Property or term
    A color written with red, green and blue values
  • hsl()Property or term
    A color written with hue, saturation and lightness
  • transitionProperty or term
    Animates changes between styles
  • transformProperty or term
    Moves, rotates, scales or skews an element
  • animationProperty or term
    Applies keyframe animation
  • @keyframesProperty or term
    Defines the steps of an animation
  • CSS stands forProperty or term
    Cascading Style Sheets
  • CSS variableProperty or term
    A reusable value set with --name and used with var(--name)
  • cursorProperty or term
    Changes the mouse pointer style
  • list-styleProperty or term
    Changes bullets or numbers in lists

Download this deck

Want paper cards? Paste the plain-text download into the flashcard maker.

More Web Development decks