<CSS_Cheat_Sheet/>

The universal selector (*) selects all elements on a page.

* {
  margin: 0;
  padding: 0;
}
            

The type selector selects all elements of a given type.

p {
  color: blue;
}
            

The class selector selects all elements with a specified class.

.example {
  font-size: 20px;
}
            

The ID selector selects a single element with a specified ID.

#unique {
  background-color: yellow;
}
            

The attribute selector selects elements based on an attribute or attribute value.

a[href="https://example.com"] {
  color: red;
}
            

The pseudo-class selector selects elements based on their state.

a:hover {
  color: green;
}
            

The pseudo-element selector selects a part of an element.

p::first-line {
  font-weight: bold;
}
            

The child selector selects direct child elements of a specified element.

ul > li {
  list-style-type: none;
}
            

The descendant selector selects all elements that are descendants of a specified element.

div p {
  color: purple;
}
            

The adjacent sibling selector selects an element that is immediately preceded by a specified element.

h1 + p {
  margin-top: 0;
}
            

The general sibling selector selects all elements that are siblings of a specified element.

h1 ~ p {
  color: brown;
}
            

The actual content area of the box, where text and images appear.

.example {
  width: 200px;
  height: 100px;
}
            

The space between the content and the border.

.example {
  padding: 20px;
}
            

The border that goes around the padding and content.

.example {
  border: 1px solid #ccc;
}
            

The space outside the border.

.example {
  margin: 10px;
}
            

The width of the content area, excluding padding, border, and margin.

.example {
  width: 300px;
}
            

The height of the content area, excluding padding, border, and margin.

.example {
  height: 150px;
}
            

Determines how the browser calculates the total width and height of an element.

.example {
  box-sizing: border-box;
}
            

Specifies how an element is displayed.

.example {
  display: block;
}
            

Specifies whether an element is visible or hidden.

.example {
  visibility: hidden;
}
            

Specifies the transparency level of an element.

.example {
  opacity: 0.5;
}
            

Specifies what happens if content overflows an element's box.

.example {
  overflow: hidden;
}
            

Specifies what happens with the left/right edges of the content if it overflows the element's content area.

.example {
  overflow-x: scroll;
}
            

Specifies what happens with the top/bottom edges of the content if it overflows the element's content area.

.example {
  overflow-y: auto;
}
            

Clips an absolutely positioned element.

.example {
  clip: rect(0, 100px, 100px, 0);
}
            

Defines the visible area of an element.

.example {
  clip-path: circle(50% at 50% 50%);
}
            

Specifies the positioning method used for an element.

.example {
  position: relative;
}
            

Specifies the position of a positioned element.

.example {
  position: absolute;
  top: 0;
  left: 0;
}
            

Specifies the stack order of positioned elements.

.example {
  z-index: 10;
}
            

Specifies the positioning method used for an element.

.example {
  position: relative;
}
            

Specifies the position of a positioned element.

.example {
  position: absolute;
  top: 0;
  left: 0;
}
            

Specifies the stack order of positioned elements.

.example {
  z-index: 10;
}
            

Specifies whether an element should float to the left, right, or none.

.example {
  float: left;
}
            

Specifies what elements can float beside the cleared element and on which sides.

.example {
  clear: both;
}
            

Clips an absolutely positioned element.

.example {
  clip: rect(0, 100px, 100px, 0);
}
            

Defines the visible area of an element.

.example {
  clip-path: circle(50% at 50% 50%);
}
            

Specifies what happens if content overflows an element's box.

.example {
  overflow: hidden;
}
            

Specifies what happens with the left/right edges of the content if it overflows the element's content area.

.example {
  overflow-x: scroll;
}
            

Specifies what happens with the top/bottom edges of the content if it overflows the element's content area.

.example {
  overflow-y: auto;
}
            

Defines a flex container.

.container {
  display: flex;
}
            

Defines an inline flex container.

.container {
  display: inline-flex;
}
            

Defines the direction of the flex container's main axis.

.container {
  flex-direction: row;
}
            

Reverses the main axis of the flex container.

.container {
  flex-direction: row-reverse;
}
            

Defines the main axis as vertical.

.container {
  flex-direction: column;
}
            

Reverses the main axis to vertical.

.container {
  flex-direction: column-reverse;
}
            

Prevents flex items from wrapping to a new line.

.container {
  flex-wrap: nowrap;
}
            

Allows flex items to wrap onto multiple lines if needed.

.container {
  flex-wrap: wrap;
}
            

Reverses the wrapping direction of flex items.

.container {
  flex-wrap: wrap-reverse;
}
            

Shorthand for setting flex-direction and flex-wrap.

.container {
  flex-flow: row nowrap;
}
            

Aligns flex items at the start of the main axis.

.container {
  justify-content: flex-start;
}
            

Aligns flex items at the end of the main axis.

.container {
  justify-content: flex-end;
}
            

Aligns flex items at the center of the main axis.

.container {
  justify-content: center;
}
            

Distributes flex items evenly with space between them.

.container {
  justify-content: space-between;
}
            

Distributes flex items evenly with space around them.

.container {
  justify-content: space-around;
}
            

Distributes flex items evenly with equal space around them.

.container {
  justify-content: space-evenly;
}
            

Stretches flex items to fill the container's cross-axis.

.container {
  align-items: stretch;
}
            

Aligns flex items at the start of the cross axis.

.container {
  align-items: flex-start;
}
            

Aligns flex items at the end of the cross axis.

.container {
  align-items: flex-end;
}
            

Aligns flex items at the center of the cross axis.

.container {
  align-items: center;
}
            

Aligns flex items such that their baselines align.

.container {
  align-items: baseline;
}
            

Stretches flex lines to fill the container.

.container {
  align-content: stretch;
}
            

Aligns flex lines at the start of the cross axis.

.container {
  align-content: flex-start;
}
            

Aligns flex lines at the end of the cross axis.

.container {
  align-content: flex-end;
}
            

Aligns flex lines at the center of the cross axis.

.container {
  align-content: center;
}
            

Distributes flex lines evenly with space between them.

.container {
  align-content: space-between;
}
            

Distributes flex lines evenly with space around them.

.container {
  align-content: space-around;
}
            

Specifies the order of a flex item.

.item {
  order: 2;
}
            

Specifies how much a flex item can grow relative to the rest.

.item {
  flex-grow: 1;
}
            

Specifies how much a flex item can shrink relative to the rest.

.item {
  flex-shrink: 0;
}
            

Specifies the initial size of a flex item.

.item {
  flex-basis: 100px;
}
            

Shorthand for flex-grow, flex-shrink, and flex-basis.

.item {
  flex: 1 0 auto;
}
            

Defines a grid container.

.example {
  display: grid;
}
            

Defines the columns of the grid with a space-separated list of values.

.example {
  grid-template-columns: 100px 200px;
}
            

Defines the rows of the grid with a space-separated list of values.

.example {
  grid-template-rows: 100px 200px;
}
            

Specifies named grid areas.

.example {
  grid-template-areas: 
    "header header"
    "sidebar content"
    "footer footer";
}
            

Specifies the gap between rows and columns.

.example {
  grid-gap: 10px;
}
            

Specifies the background color of an element.

.example {
  background-color: #ff0000;
}
            

Specifies one or more background images for an element.

.example {
  background-image: url('image.jpg');
}
            

Defines how background images are repeated.

.example {
  background-repeat: no-repeat;
}
            

Specifies the position of the background images.

.example {
  background-position: center;
}
            

Specifies the size of the background images.

.example {
  background-size: cover;
}
            

Sets the width, style, and color of the border.

.example {
  border: 1px solid #000;
}
            

Specifies the width of the border.

.example {
  border-width: 2px;
}
            

Specifies the style of the border.

.example {
  border-style: dashed;
}
            

Specifies the color of the border.

.example {
  border-color: red;
}
            

Defines the radius of the border's corners.

.example {
  border-radius: 5px;
}
            

Sets the color of the text.

.example {
  color: #ff0000;
}
            

Sets the background color of an element.

.example {
  background-color: #00ff00;
}
            

Specifies the font family for the text.

.example {
  font-family: 'Arial', sans-serif;
}
            

Specifies the size of the font.

.example {
  font-size: 16px;
}
            

Specifies the weight of the font.

.example {
  font-weight: bold;
}
            

Specifies the style of the font.

.example {
  font-style: italic;
}
            

Specifies whether or not a text should be displayed in a small-caps font.

.example {
  font-variant: small-caps;
}
            

Specifies the horizontal alignment of text.

.example {
  text-align: center;
}
            

Specifies the decoration added to text.

.example {
  text-decoration: underline;
}
            

Controls the capitalization of text.

.example {
  text-transform: uppercase;
}
            

Sets the space between characters in a text.

.example {
  letter-spacing: 2px;
}
            

Specifies the height of a line.

.example {
  line-height: 1.5;
}
            

A shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay.

.example {
  transition: all 0.3s ease;
}
            

Specifies the name of the CSS property the transition effect is for.

.example {
  transition-property: background-color;
}
            

Defines how many seconds or milliseconds a transition effect takes to complete.

.example {
  transition-duration: 0.5s;
}
            

Specifies the speed curve of the transition effect.

.example {
  transition-timing-function: linear;
}
            

Defines when the transition effect will start.

.example {
  transition-delay: 1s;
}
            

A shorthand property for all the animation properties.

.example {
  animation: slide 2s forwards;
}
            

Specifies the name of the @keyframes animation.

.example {
  animation-name: slide;
}
            

Specifies how many seconds or milliseconds an animation takes to complete one cycle.

.example {
  animation-duration: 2s;
}
            

Specifies the speed curve of the animation.

.example {
  animation-timing-function: ease;
}
            

Specifies when the animation will start.

.example {
  animation-delay: 1s;
}
            

Specifies the number of times an animation should be played.

.example {
  animation-iteration-count: infinite;
}
            

Specifies whether or not the animation should play in reverse on alternate cycles.

.example {
  animation-direction: alternate;
}
            

Applies a 2D or 3D transformation to an element.

.example {
  transform: rotate(45deg);
}
            

Specifies the origin for the transformation.

.example {
  transform-origin: top left;
}
            

Specifies how nested elements are rendered in 3D space.

.example {
  transform-style: preserve-3d;
}
            

Defines the perspective from which the viewer sees the 3D transformed elements.

.example {
  perspective: 1000px;
}
            

Defines the origin for the perspective property.

.example {
  perspective-origin: top left;
}
            

Applies graphical effects like blur or color shift to an element.

.example {
  filter: blur(5px);
}
            

Applies a Gaussian blur to the element.

.example {
  filter: blur(10px);
}
            

Adjusts the brightness of the element.

.example {
  filter: brightness(0.5);
}
            

Adjusts the contrast of the element.

.example {
  filter: contrast(200%);
}
            

Applies a drop shadow effect to the element.

.example {
  filter: drop-shadow(2px 2px 2px black);
}
            

Specifies the display behavior (the type of rendering box) of an element.

.example {
  display: block;
}
            

Specifies the type of positioning method used for an element.

.example {
  position: absolute;
}
            

Specifies the position of a positioned element.

.example {
  top: 10px;
  right: 20px;
}
            

Specifies whether an element should float to the left, right, or not at all.

.example {
  float: left;
}
            

Specifies on which sides of an element floating elements are not allowed to float.

.example {
  clear: both;
}
            

Applies when the user designates an element (with some pointing device), but does not activate it.

.example:hover {
  color: blue;
}
            

Applies while an element has the focus (accepts keyboard or mouse events, or other forms of input).

.example:focus {
  outline: 2px solid blue;
}
            

Applies while an element is being activated by the user (e.g., between the times the user presses the mouse button and releases it).

.example:active {
  background-color: yellow;
}
            

Matches elements based on their position in a group of siblings.

.example:nth-child(2) {
  color: red;
}
            

Matches elements of a given type, based on their position among a group of siblings.

.example:nth-of-type(3) {
  color: green;
}
            

Inserts content before the content of an element.

.example::before {
  content: "Note: ";
  color: red;
}
            

Inserts content after the content of an element.

.example::after {
  content: "!";
  color: blue;
}
            

Styles the first letter of the first line of a block-level element.

.example::first-letter {
  font-size: 2em;
  color: green;
}
            

Styles the first line of a block-level element.

.example::first-line {
  font-weight: bold;
}
            

Applies styles based on the result of one or more media queries.

@media (max-width: 600px) {
  .example {
    background-color: lightblue;
  }
}
            

Specifies the conditions of a media query, such as screen width, resolution, or orientation.

@media (orientation: landscape) {
  .example {
    background-color: lightgreen;
  }
}
            

A pixel is a relative unit, representing a dot on the screen.

.example {
  font-size: 16px;
}
            

Relative to the font-size of the element (2em means 2 times the size of the current font).

.example {
  margin: 1em;
}
            

Relative to the font-size of the root element.

.example {
  padding: 1rem;
}
            

Defines a length as a percentage relative to another value, typically the parent element's length.

.example {
  width: 50%;
}
            

Relative to 1% of the width (vw) or height (vh) of the viewport.

.example {
  height: 50vh;
}
            

Sets the width of an element.

.example {
  width: 100px;
}
            

Sets the height of an element.

.example {
  height: 200px;
}
            

Sets the maximum width of an element.

.example {
  max-width: 100%;
}
            

Sets the maximum height of an element.

.example {
  max-height: 500px;
}
            

Sets the minimum width of an element.

.example {
  min-width: 50px;
}
            

Sets the minimum height of an element.

.example {
  min-height: 100px;
}
            

Sets the margin space on all sides of an element.

.example {
  margin: 20px;
}
            

Sets the top margin of an element.

.example {
  margin-top: 10px;
}
            

Sets the right margin of an element.

.example {
  margin-right: 15px;
}
            

Sets the bottom margin of an element.

.example {
  margin-bottom: 5px;
}
            

Sets the left margin of an element.

.example {
  margin-left: 30px;
}
            

Sets the padding space on all sides of an element.

.example {
  padding: 20px;
}
            

Sets the top padding of an element.

.example {
  padding-top: 10px;
}
            

Sets the right padding of an element.

.example {
  padding-right: 15px;
}
            

Sets the bottom padding of an element.

.example {
  padding-bottom: 5px;
}
            

Sets the left padding of an element.

.example {
  padding-left: 30px;
}
            

Specifies what happens if content overflows an element's box.

.example {
  overflow: hidden;
}
            

Specifies what happens with the left/right edges of the content if it overflows the element's content area.

.example {
  overflow-x: scroll;
}
            

Specifies what happens with the top/bottom edges of the content if it overflows the element's content area.

.example {
  overflow-y: auto;
}
            

Specifies whether an element should float to the left, right, or none.

.example {
  float: left;
}
            

Specifies what elements can float beside the cleared element and on which sides.

.example {
  clear: both;
}
            

Specifies the stack order of positioned elements.

.example {
  z-index: 10;
}
            

Sets all the list properties in one declaration.

.example {
  list-style: square inside;
}
            

Specifies the type of list-item marker.

.example {
  list-style-type: disc;
}
            

Specifies the position of the list-item marker.

.example {
  list-style-position: outside;
}
            

Specifies an image as the list-item marker.

.example {
  list-style-image: url('image.png');
}
            

Sets whether the table borders should be collapsed into a single border or separated.

.example {
  border-collapse: collapse;
}
            

Sets the distance between the borders of adjacent cells.

.example {
  border-spacing: 10px;
}
            

Sets the layout algorithm to be used for the table.

.example {
  table-layout: fixed;
}
            

Specifies the placement of the table caption.

.example {
  caption-side: bottom;
}
            

Sets whether or not to display borders on empty cells.

.example {
  empty-cells: hide;
}
            

Sets whether the table borders should be collapsed into a single border or separated.

.example {
  border-collapse: collapse;
}
            

Sets the distance between the borders of adjacent cells.

.example {
  border-spacing: 10px;
}
            

Sets the layout algorithm to be used for the table.

.example {
  table-layout: fixed;
}
            

Specifies the placement of the table caption.

.example {
  caption-side: bottom;
}
            

Sets whether or not to display borders on empty cells.

.example {
  empty-cells: hide;
}
            

Specifies the mouse cursor to be displayed when pointing over an element.

.example {
  cursor: pointer;
}
            

Adds shadow effects around an element's frame.

.example {
  box-shadow: 10px 10px 5px grey;
}
            

Adds shadow effects to text.

.example {
  text-shadow: 2px 2px 5px red;
}
            

Sets all the outline properties in a single declaration.

.example {
  outline: 2px solid blue;
}
            

Sets the width of the outline.

.example {
  outline-width: thick;
}
            

Sets the style of the outline.

.example {
  outline-style: dashed;
}
            

Sets the color of the outline.

.example {
  outline-color: red;
}
            

Sets the opacity level for an element.

.example {
  opacity: 0.5;
}
            

Inserts content before or after an element.

.example::before {
  content: 'Prefix ';
}
.example::after {
  content: ' Suffix';
}
            

Creates or resets a counter.

.example {
  counter-reset: section;
}
            

Increments the value of a counter.

.example {
  counter-increment: section;
}
            

Uses a counter value as content.

.example::before {
  content: counter(section) '. ';
}
            

Specifies the number of columns an element should be divided into.

.example {
  column-count: 3;
}
            

Specifies the gap between the columns.

.example {
  column-gap: 15px;
}
            

Specifies a rule between columns.

.example {
  column-rule: 1px solid black;
}
            

Allows you to make an element look like a standard user interface element.

.example {
  appearance: none;
}
            

Defines how the width and height of an element are calculated.

.example {
  box-sizing: border-box;
}
            

Sets the color of the text cursor (caret).

.example {
  caret-color: red;
}
            

Defines a custom property (variable).

:root {
  --main-bg-color: brown;
}
.example {
  background-color: var(--main-bg-color);
}
            

Performs calculations to determine CSS property values.

.example {
  width: calc(100% - 50px);
}
            

Used to insert the value of a custom property.

.example {
  color: var(--main-color);
}
            

Common units for specifying dimensions.

.example {
  width: 100px;
  padding: 2em;
  font-size: 1rem;
}
            

Relative units for specifying dimensions.

.example {
  width: 50%;
  height: 100vh;
  font-size: 10vw;
}
            

Specifies the font for an element.

.example {
  font-family: Arial, sans-serif;
}
            

Specifies the font size for an element.

.example {
  font-size: 16px;
}
            

Specifies the weight (or boldness) of the font.

.example {
  font-weight: bold;
}
            

Specifies the height of a line of text.

.example {
  line-height: 1.5;
}
            

Specifies print-specific styles.

@media print {
  .example {
    font-size: 12pt;
    color: black;
  }
}
            

Resets the default styling of all HTML elements to a consistent baseline.

/* Example of a simple CSS reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  height: 100%;
}