Certainly! Below is a basic CSS cheat sheet that includes some commonly used CSS properties and values. This is not an exhaustive list, but it covers many fundamental aspects of styling with CSS.

Absolutely, let’s break down some key concepts in the CSS cheat sheet:

  1. Selectors:
  • Universal Selector: * selects all elements.
/* Universal Selector */
* {
  margin: 0;
  padding: 0;
}
  • Element Selector: h1 selects all <h1> elements.
/* Element Selector */
h1 {
  color: #333;
}
  • Class Selector: .my-class selects all elements with the class “my-class.”
/* Class Selector */
.my-class {
  font-size: 16px;
}
  • ID Selector: #my-id selects the element with the ID “my-id.”
/* ID Selector */
#my-id {
  background-color: #f0f0f0;
}
  • Descendant Selector: parent-element child-element selects child elements within a parent.
/* Descendant Selector */
parent-element child-element {
  border: 1px solid #ccc;
}
  • Attribute Selector: input[type="text"] selects input elements with the attribute type set to “text.”
/* Attribute Selector */
input[type="text"] {
  width: 200px;
}
  • Pseudo-class Selector: a:hover selects <a> elements when hovered.
/* Pseudo-class Selector */
a:hover {
  text-decoration: underline;
}
  1. Box Model:
  • box-sizing: border-box; includes padding and border in the element’s total width and height.
/* Box Model */
box-sizing: border-box;
margin: 10px;
padding: 5px;
border: 1px solid #ddd;
  • margin, padding, and border properties control spacing and borders around elements.
  1. Display:
  • display property sets how an element is rendered.
  • block, inline, inline-block, and none are common values.
/* Display */
display: block;
display: inline;
display: inline-block;
display: none;
  1. Positioning:
  • position: relative; positions an element relative to its normal position.
  • position: absolute; positions an element relative to its closest positioned ancestor.
  • top and left properties move the element from its normal position.
/* Positioning */
position: relative;
position: absolute;
top: 10px;
left: 20px;
  1. Flexbox:
  • display: flex; enables a flex container.
  • justify-content aligns items on the main axis.
  • align-items aligns items on the cross axis.
/* Flexbox */
display: flex;
justify-content: center;
align-items: center;
  1. Grid:
  • display: grid; enables a grid container.
  • grid-template-columns defines the number and size of columns.
  • grid-gap sets the gap between grid items.
/* Grid */
display: grid;
grid-template-columns: 100px 200px;
grid-gap: 10px;
  1. Colors:
  • color sets the text color.
  • background-color sets the background color.
/* Colors */
color: #333;
background-color: #f0f0f0;
  1. Fonts:
  • font-family sets the font type.
  • font-size sets the font size.
  • font-weight sets the font thickness.
/* Fonts */
font-family: 'Arial', sans-serif;
font-size: 14px;
font-weight: bold;
  1. Text:
  • text-align aligns text.
  • text-decoration sets text decoration (e.g., underline).
  • line-height controls the height of a line of text.
/* Text */
text-align: center;
text-decoration: none;
line-height: 1.5;
  1. Transitions:
    • transition creates a smooth transition effect.
/* Transitions */
transition: all 0.3s ease-in-out;

  1. Responsive Design:
    • @media queries apply styles based on screen size.
/* Responsive Design */
@media screen and (max-width: 768px) {
  /* Styles for screens up to 768px wide */
  body {
    font-size: 14px;
  }
}
  1. Animation:
    • @keyframes define animations.
    • The .element class applies the slide animation.
/* Animation */
@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

.element {
  animation: slide 2s ease infinite;
}

Feel free to use this breakdown as a reference for understanding each concept.

Basics, CSS

Tagged in:

, , ,