CSS Cheatsheet

Certainly! Here’s a cheat sheet for CSS (Cascading Style Sheets) that includes some commonly used properties and values:

Selectors:

• Universal Selector:

  * {
    property: value;
  }

• Element Selector:

  p {
    property: value;
  }

• Class Selector:

  .classname {
    property: value;
  }

• ID Selector:

  #idname {
    property: value;
  }

• Attribute Selector:

  [attribute="value"] {
    property: value;
  }

Box Model:

• Width and Height:

  element {
    width: value;
    height: value;
  }

• Padding:

  element {
    padding: top right bottom left;
  }

• Margin:

  element {
    margin: top right bottom left;
  }

• Border:

  element {
    border: thickness style color;
  }

Text Styling:

• Font Size:

  element {
    font-size: value;
  }

• Font Family:

  element {
    font-family: "Font Name", sans-serif;
  }

• Font Weight:

  element {
    font-weight: bold;
  }

• Text Color:

  element {
    color: #RRGGBB;
  }

Display and Positioning:

• Display:

  element {
    display: block | inline | inline-block | none;
  }

• Positioning:

  element {
    position: static | relative | absolute | fixed;
    top: value;
    right: value;
    bottom: value;
    left: value;
  }

Flexbox:

• Flex Container:

  .container {
    display: flex;
    justify-content: center;
    align-items: center;
  }

• Flex Items:

  .item {
    flex: 1;
    order: 2;
    align-self: flex-end;
  }

Grid:

• Grid Container:

  .container {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-gap: 10px;
  }

• Grid Items:

  .item {
    grid-column: span 2;
    grid-row: 1 / 3;
  }

Transitions and Animations:

• Transitions:

  element {
    transition: property duration timing-function delay;
  }

• Keyframe Animation:

  @keyframes animationName {
    0% {
      property: value;
    }
    50% {
      property: value;
    }
    100% {
      property: value;
    }
  }

Pseudo-classes and Pseudo-elements:

• Hover:

  element:hover {
    property: value;
  }

• First Child:

  element:first-child {
    property: value;
  }

• Before Pseudo-element:

  element::before {
    content: " ";
    property: value;
  }

This cheat sheet covers some of the most commonly used CSS properties and values. Refer to official documentation