CSS Cheat Sheet

Here’s a CSS cheat sheet that covers some essential concepts and properties:

Selectors

Select elements based on their type:

p {
  /* Styles for paragraphs */
}

Select elements with a specific class:

.classname {
  /* Styles for elements with class "classname" */
}

Select elements with a specific ID:

#elementId {
  /* Styles for the element with ID "elementId" */
}

Select nested elements:

parentElement childElement {
  /* Styles for child elements inside parentElement */
}

Here is a dedicated CSS Selectors Cheat Sheet.

Box Model

Set width and height:

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

Add padding:

.box {
  padding: 10px;
}

Add margin:

.box {
  margin: 10px;
}

Border properties:

.box {
  border: 2px solid #333;
  border-radius: 5px;
}

Positioning

Set position:

.box {
  position: relative;
  top: 20px;
  left: 30px;
}

Align elements:

.box {
  text-align: center;
  vertical-align: middle;
}

Here is a dedicated CSS Position Cheat Sheet.

Display Property

Change display property:

.box {
  display: block; /* or inline, inline-block, flex, grid, etc. */
}

Typography

Set font size and family:

body {
  font-size: 16px;
  font-family: 'Arial', sans-serif;
}

Style text:

.headline {
  font-weight: bold;
  text-decoration: underline;
  color: #333;
}

Colors and Backgrounds

Set background color:

.container {
  background-color: #f4f4f4;
}

Set text color:

.text {
  color: #333;
}

Flexbox

Use flex container:

.flex-container {
  display: flex;
}

Set flex items:

.flex-item {
  flex: 1;
}

Here is a dedicated Flexbox Cheat Sheet.

Transitions

Create smooth transitions:

.box {
  transition: width 0.3s ease-in-out;
}

.box:hover {
  width: 250px;
}

Media Queries

Apply styles based on screen size:

@media screen and (max-width: 600px) {
  /* Styles for screens with a maximum width of 600px */
}

Animations

Create animations:

@keyframes slide {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.slide-in {
  animation: slide 1s ease-in-out;
}

This CSS cheat sheet covers some fundamental concepts. Remember to refer to the official CSS documentation for more detailed information and properties.