learn.fttgsolutions.com · Cheat Sheets
Select. Style. Animate.
| Universal | * | Selects all elements on the page. |
| Type | div | Selects all elements of the given HTML tag. |
| Class | .classname | Selects all elements with the given class attribute. |
| ID | #idname | Selects the element with the given ID attribute. |
| Group | div, p | Selects all matching elements from a comma-separated list. |
| Chaining | div.classname | Selects elements that match both the type and the class. |
| Type + ID | div#idname | Selects an element that matches both the type and the ID. |
| Descendant | div p | Selects all <p> elements anywhere inside a <div>. |
| Direct child | div > p | Selects <p> elements that are direct children of a <div>. |
| Adjacent sibling | div + p | Selects the first <p> element immediately after a <div>. |
| General sibling | div ~ p | Selects all <p> elements that are siblings after a <div>. |
| Has attribute | [target] | Selects elements that have a target attribute, regardless of value. |
| Exact value | [target="_blank"] | Selects elements whose target attribute equals exactly "_blank". |
| Starts with | [href^="/index"] | Selects elements whose href starts with "/index". |
| Ends with | [href$=".doc"] | Selects elements whose href ends with ".doc". |
| Contains | [class*="chair"] | Selects elements whose class contains the substring "chair". |
| Word match | [title~="chair"] | Selects elements whose title contains "chair" as a whole word. |
| Prefix | [class|="chair"] | Selects elements whose class is "chair" or starts with "chair-". |
| :link | a:link | Selects unvisited links. |
| :visited | a:visited | Selects links the user has already visited. |
| :hover | a:hover | Selects an element when the user hovers over it. |
| :active | a:active | Selects an element while it is being clicked or activated. |
| :focus | input:focus | Selects an element that currently has keyboard focus. |
| :not() | p:not(.intro) | Selects every <p> that does not have the class "intro". |
| :root | :root | Selects the root element of the document — typically <html>. |
| :target | #section:target | Selects the element whose ID matches the URL fragment (#section). |
| :empty | div:empty | Selects elements that have no children (including text nodes). |
| :lang() | p:lang(fr) | Selects elements with a specific lang attribute value. |
| :first-child | p:first-child | Selects <p> elements that are the first child of their parent. |
| :last-child | p:last-child | Selects <p> elements that are the last child of their parent. |
| :nth-child() | li:nth-child(2) | Selects the 2nd child element. Accepts numbers, keywords (odd/even), or expressions like 3n+1. |
| :nth-last-child() | li:nth-last-child(2) | Same as :nth-child() but counts from the last child. |
| :first-of-type | p:first-of-type | Selects the first <p> sibling of its type within its parent. |
| :last-of-type | p:last-of-type | Selects the last <p> sibling of its type within its parent. |
| :nth-of-type() | p:nth-of-type(2) | Selects the nth sibling of the same type within its parent. |
| :nth-last-of-type() | p:nth-last-of-type(2) | Same as :nth-of-type() but counts from the last of that type. |
| :only-child | p:only-child | Selects <p> elements that are the only child of their parent. |
| :only-of-type | p:only-of-type | Selects <p> elements that are the only sibling of their type. |
| :checked | input:checked | Selects checked checkboxes or radio buttons. |
| :disabled | input:disabled | Selects form elements that are disabled. |
| :enabled | input:enabled | Selects form elements that are enabled (not disabled). |
| :required | input:required | Selects input elements with the required attribute. |
| :optional | input:optional | Selects input elements without the required attribute. |
| :valid | input:valid | Selects input elements with a value that passes validation. |
| :invalid | input:invalid | Selects input elements with a value that fails validation. |
| :in-range | input:in-range | Selects inputs whose value is within the min/max range. |
| :out-of-range | input:out-of-range | Selects inputs whose value is outside the min/max range. |
| :read-only | input:read-only | Selects elements with the readonly attribute. |
| :read-write | input:read-write | Selects elements that are editable (not readonly). |
| :indeterminate | input:indeterminate | Selects checkboxes or radio buttons in an indeterminate state. |
| ::before | p::before { content: '→'; } | Inserts generated content before the element's content. |
| ::after | p::after { content: '←'; } | Inserts generated content after the element's content. |
| ::first-letter | p::first-letter | Selects the first letter of a block-level element. |
| ::first-line | p::first-line | Selects the first line of a block-level element. |
| ::selection | ::selection { background: gold; } | Styles the portion of text selected by the user. |
| ::placeholder | input::placeholder | Styles the placeholder text inside an input or textarea. |
| Named | color: red; | Use any CSS named color keyword (red, orange, rebeccapurple, etc.). |
| Hex | color: #264DE4; | 6-digit hex (#rrggbb) or 3-digit shorthand (#rgb). |
| Hex + alpha | color: #264DE480; | 8-digit hex (#rrggbbaa) — last two digits set opacity (00–FF). |
| rgb() | color: rgb(38, 77, 228); | Red, Green, Blue values from 0–255. |
| rgba() | color: rgba(38, 77, 228, 0.5); | rgb() with an alpha channel from 0 (transparent) to 1 (opaque). |
| hsl() | color: hsl(228, 72%, 52%); | Hue (0–360 degrees), Saturation (%), Lightness (%). |
| hsla() | color: hsla(228, 72%, 52%, 0.5); | hsl() with an alpha channel. |
| currentcolor | border-color: currentcolor; | Inherits the element's current color value. |
| transparent | background: transparent; | Fully transparent — shorthand for rgba(0,0,0,0). |
| Color | background-color: #f0f0f0; | Sets a solid background color. |
| Image | background-image: url('bg.png'); | Sets an image as the background. |
| Gradient | background: linear-gradient(to right, red, blue); | Creates a linear color gradient as the background. |
| Radial gradient | background: radial-gradient(circle, red, blue); | Creates a circular/elliptical color gradient. |
| Position | background-position: center top; | Sets the starting position of the background image. |
| Size | background-size: cover; | cover scales to fill the container; contain scales to fit without cropping. |
| Repeat | background-repeat: no-repeat; | Controls whether and how the background image tiles. |
| Attachment | background-attachment: fixed; | fixed keeps the image stationary while scrolling; scroll moves with the page. |
| Clip | background-clip: border-box; | Defines how far the background extends: border-box, padding-box, or content-box. |
| Shorthand | background: #fff url('img.png') center/cover no-repeat; | Combines color, image, position/size, repeat, and attachment in one declaration. |
| font-family | font-family: Arial, sans-serif; | Sets the typeface. List fallbacks separated by commas. |
| font-size | font-size: 16px; | Sets the size of the text. Accepts px, em, rem, %, vw, etc. |
| font-weight | font-weight: bold; | Sets text thickness: normal (400), bold (700), or a numeric value 100–900. |
| font-style | font-style: italic; | Sets text style: normal, italic, or oblique. |
| line-height | line-height: 1.5; | Sets the height of a line box. Unitless values (like 1.5) are relative to font-size. |
| letter-spacing | letter-spacing: 0.05em; | Sets the space between characters. |
| word-spacing | word-spacing: 4px; | Sets the space between words. |
| text-align | text-align: center; | Aligns text horizontally: left, right, center, or justify. |
| text-decoration | text-decoration: underline; | Adds a line to text: underline, overline, line-through, or none. |
| text-transform | text-transform: uppercase; | Changes text case: uppercase, lowercase, or capitalize. |
| text-indent | text-indent: 2em; | Indents the first line of a text block. |
| white-space | white-space: nowrap; | Controls how whitespace and line breaks are handled. |
| font shorthand | font: italic bold 16px/1.5 Arial, sans-serif; | Combines style, weight, size, line-height, and family in one declaration. |
| @font-face | @font-face { font-family: 'MyFont'; src: url('font.woff2'); } | Loads a custom font from a file for use throughout the stylesheet. |
| width / height | width: 200px; height: 100px; | Sets the element's content area dimensions. |
| max-width | max-width: 100%; | Caps the element's width. Commonly used to make images responsive. |
| min-width | min-width: 320px; | Sets the minimum width below which the element won't shrink. |
| max-height / min-height | max-height: 500px; min-height: 100vh; | Caps or floors the element's height. |
| padding | padding: 10px 20px; | Space inside the border. Shorthand: top/bottom left/right; or all four sides separately. |
| margin | margin: 0 auto; | Space outside the border. margin: 0 auto centers a block element horizontally. |
| border | border: 1px solid #ccc; | Shorthand for border-width, border-style, and border-color. |
| border-radius | border-radius: 8px; | Rounds the corners of an element's border box. |
| box-sizing | box-sizing: border-box; | border-box includes padding and border in the element's total width and height. |
| overflow | overflow: hidden; | Controls content that overflows: visible, hidden, scroll, or auto. |
| visibility | visibility: hidden; | Hides the element but it still occupies space (unlike display: none). |
| display | display: block; | Sets the display model: block, inline, inline-block, flex, grid, none, etc. |
| outline | outline: 2px solid blue; | Like border but does not affect layout — often used for focus rings. |
| box-shadow | box-shadow: 0 4px 12px rgba(0,0,0,0.15); | Adds one or more shadow effects around the element's frame. |
| position: static | position: static; | Default — element follows normal document flow; top/left/etc. have no effect. |
| position: relative | position: relative; top: 10px; left: 20px; | Offsets the element from its normal position without affecting surrounding elements. |
| position: absolute | position: absolute; top: 0; right: 0; | Removes element from flow; positioned relative to the nearest non-static ancestor. |
| position: fixed | position: fixed; bottom: 0; | Like absolute but positioned relative to the viewport — stays put on scroll. |
| position: sticky | position: sticky; top: 60px; | Acts as relative until the element hits the given offset, then sticks like fixed. |
| z-index | z-index: 10; | Controls stacking order of positioned elements. Higher value = in front. |
| top / right / bottom / left | top: 0; left: 50%; | Offsets for positioned elements (non-static). Can use px, %, vw, etc. |
| Enable flex | display: flex; | Creates a flex container; direct children become flex items. |
| flex-direction | flex-direction: row; | Sets the main axis: row (default), row-reverse, column, column-reverse. |
| flex-wrap | flex-wrap: wrap; | nowrap (default) keeps all items on one line; wrap allows items to move to the next line. |
| justify-content | justify-content: space-between; | Aligns items along the main axis: flex-start, center, flex-end, space-between, space-around, space-evenly. |
| align-items | align-items: center; | Aligns items along the cross axis: flex-start, flex-end, center, stretch, baseline. |
| align-content | align-content: space-between; | Aligns flex lines when there is extra space on the cross axis (only applies when wrapping). |
| gap | gap: 16px; | Sets spacing between flex items (row-gap and column-gap in one declaration). |
| flex-flow | flex-flow: row wrap; | Shorthand for flex-direction and flex-wrap. |
| flex-grow | flex-grow: 1; | Defines how much an item grows relative to the others when extra space is available. |
| flex-shrink | flex-shrink: 0; | Defines how much an item shrinks relative to the others when space is tight. |
| flex-basis | flex-basis: 200px; | Sets the initial main size of the item before growing or shrinking. |
| flex shorthand | flex: 1 1 auto; | Combines flex-grow, flex-shrink, and flex-basis. flex: 1 is shorthand for 1 1 0. |
| align-self | align-self: flex-end; | Overrides align-items for a specific item. |
| order | order: 2; | Changes the visual order of a flex item without altering the DOM. Lower = first. |
| Enable grid | display: grid; | Creates a grid container; direct children become grid items. |
| grid-template-columns | grid-template-columns: 1fr 1fr 1fr; | Defines the number and size of columns. fr = fraction of available space. |
| grid-template-rows | grid-template-rows: 80px auto 60px; | Defines the number and size of rows. |
| grid-template-areas | grid-template-areas: 'header header' 'sidebar main' 'footer footer'; | Names areas of the grid for use with grid-area on children. |
| gap | gap: 16px 24px; | Sets row and column gutters between grid cells. |
| justify-items | justify-items: center; | Aligns all items along the inline (row) axis within their cells. |
| align-items | align-items: start; | Aligns all items along the block (column) axis within their cells. |
| justify-content | justify-content: space-between; | Aligns the entire grid along the row axis when the grid is smaller than the container. |
| align-content | align-content: start; | Aligns the entire grid along the column axis when the grid is smaller than the container. |
| repeat() | grid-template-columns: repeat(3, 1fr); | Shorthand to repeat a track definition a number of times. |
| minmax() | grid-template-columns: repeat(3, minmax(100px, 1fr)); | Sets a minimum and maximum size for a track. |
| auto-fill / auto-fit | grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); | auto-fill creates as many columns as fit; auto-fit collapses empty tracks. |
| grid-column | grid-column: 1 / 3; | Spans the item from column line 1 to column line 3 (occupies 2 columns). |
| grid-row | grid-row: 2 / span 2; | Places the item starting at row 2 and spanning 2 rows. |
| grid-area | grid-area: header; | Places the item into a named area defined by grid-template-areas. |
| grid-area (manual) | grid-area: 1 / 1 / 3 / 4; | Shorthand for grid-row-start / grid-column-start / grid-row-end / grid-column-end. |
| justify-self | justify-self: end; | Overrides justify-items for a single item along the row axis. |
| align-self | align-self: center; | Overrides align-items for a single item along the column axis. |
| transition | transition: all 0.3s ease; | Shorthand for transition-property, duration, timing-function, and delay. |
| transition-property | transition-property: opacity, transform; | Specifies which CSS properties to animate. Use 'all' or a comma-separated list. |
| transition-duration | transition-duration: 0.3s; | How long the transition takes to complete. |
| transition-timing-function | transition-timing-function: ease-in-out; | The acceleration curve: ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(). |
| transition-delay | transition-delay: 0.1s; | How long to wait before the transition starts. |
| @keyframes | @keyframes slide-in { from { transform: translateX(-100%); } to { transform: translateX(0); } } | Defines the animation sequence using from/to or percentage-based keyframes. |
| animation-name | animation-name: slide-in; | Specifies the name of the @keyframes animation to apply. |
| animation-duration | animation-duration: 0.5s; | Sets how long one cycle of the animation takes. |
| animation-timing-function | animation-timing-function: ease; | The acceleration curve for the animation: ease, linear, ease-in, ease-out, ease-in-out. |
| animation-delay | animation-delay: 0.2s; | How long to wait before the animation starts. |
| animation-iteration-count | animation-iteration-count: infinite; | How many times the animation repeats. Use a number or 'infinite'. |
| animation-direction | animation-direction: alternate; | normal, reverse, alternate, or alternate-reverse — controls playback direction. |
| animation-fill-mode | animation-fill-mode: forwards; | forwards keeps the end state after the animation; backwards applies the start state before it begins. |
| animation-play-state | animation-play-state: paused; | running or paused — toggle to start/stop the animation via JavaScript. |
| animation shorthand | animation: slide-in 0.5s ease 0.2s 1 normal forwards; | Combines name, duration, timing-function, delay, iteration-count, direction, and fill-mode. |
| translate | transform: translate(50px, 20px); | Moves the element by X and Y without affecting document flow. |
| translateX / Y | transform: translateX(-50%); | Moves the element along a single axis. -50% is commonly used for centering. |
| scale | transform: scale(1.2); | Scales the element up or down. scale(1.2) = 120% of original size. |
| rotate | transform: rotate(45deg); | Rotates the element clockwise by the given angle. |
| skew | transform: skew(15deg, 5deg); | Skews the element along the X and Y axes. |
| transform-origin | transform-origin: top left; | Sets the pivot point for transforms. Default is center center. |
| Multiple transforms | transform: rotate(45deg) scale(1.2) translateX(10px); | Apply multiple transforms in a single declaration — they are applied right to left. |
| Define variable | :root { --primary: #264DE4; } | Declares a custom property at :root so it's globally accessible. |
| Use variable | color: var(--primary); | Reads the value of a custom property with var(). |
| With fallback | color: var(--primary, #333); | The second argument to var() is a fallback if the variable is undefined. |
| Local scope | .card { --gap: 8px; gap: var(--gap); } | Variables can be scoped to any selector — they cascade like other properties. |
| Update via JS | el.style.setProperty('--primary', '#ff0000'); | Custom properties can be read and updated at runtime with JavaScript. |
| Media query | @media (max-width: 768px) { ... } | Applies styles only when the viewport is 768px wide or narrower. |
| Min-width | @media (min-width: 1024px) { ... } | Applies styles when the viewport is at least 1024px wide (desktop-first approach). |
| Orientation | @media (orientation: landscape) { ... } | Targets devices in landscape (wider than tall) orientation. |
| Dark mode | @media (prefers-color-scheme: dark) { ... } | Applies styles when the OS is set to dark mode. |
| Reduced motion | @media (prefers-reduced-motion: reduce) { ... } | Disables or simplifies animations for users who prefer less motion. |
@media print { ... } | Applies styles only when the page is being printed. | |
| Viewport units | width: 100vw; height: 100vh; | vw = 1% of viewport width; vh = 1% of viewport height. |
| opacity | opacity: 0.5; | Sets transparency of the element and its children from 0 (invisible) to 1 (fully visible). |
| cursor | cursor: pointer; | Changes the mouse cursor style: pointer, default, move, not-allowed, copy, etc. |
| pointer-events | pointer-events: none; | none makes the element transparent to mouse/touch events. |
| user-select | user-select: none; | Controls whether text can be selected: none, text, all, auto. |
| scroll-behavior | scroll-behavior: smooth; | Enables smooth animated scrolling when navigating to anchor links. |
| object-fit | object-fit: cover; | How replaced elements (img, video) fill their container: cover, contain, fill, none, scale-down. |
| aspect-ratio | aspect-ratio: 16 / 9; | Maintains a fixed width-to-height ratio as the element resizes. |
| clip-path | clip-path: circle(50%); | Clips an element to a shape: circle, ellipse, polygon, or inset. |
| filter | filter: blur(4px) brightness(0.8); | Applies visual filters: blur, brightness, contrast, grayscale, sepia, drop-shadow, etc. |
| !important | color: red !important; | Overrides any other declaration for this property regardless of specificity. Use sparingly. |