{
 "source": "https://peabody.kids/flashcards/tech-css-properties",
 "id": "tech-css-properties",
 "title": "CSS Properties",
 "category": "technology",
 "subject": "Web Development",
 "levels": [
  "6-8",
  "9-12",
  "college",
  "adult"
 ],
 "description": "Common CSS properties, selectors and values for styling web pages.",
 "tags": [
  "CSS",
  "web",
  "styling"
 ],
 "frontLabel": "Property or term",
 "backLabel": "What it does",
 "cards": [
  [
   "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"
  ]
 ]
}