Css Cheat Sheet for Beginners

CSS (Cascading Style Sheets) is a style language used to design and control the visual appearance of web pages. While HTML is responsible for the structure and content of a webpage, CSS defines how that content should look.

CSS allows you to change colors, spacing, fonts, layout, animations, and overall page design without modifying the HTML code. This separation of structure (HTML) and style (CSS) makes websites easier to maintain and improves performance.

CSS Basics

selector {
  property: value;
}

Example

p {
  color: red;
  font-size: 16px;
}

Ways to Add CSS

Inline CSS

<h1 style="color:blue;">Hello</h1>

Internal CSS

<style>
  h1 { color: blue; }
</style>

External CSS (Recommended)

<link rel="stylesheet" href="style.css">

CSS Selectors

*           /* Universal */
p           /* Element */
.class      /* Class */
#id         /* ID */
div p       /* Descendant */
div > p     /* Child */
a:hover     /* Pseudo-class */

Text Properties

color
font-size
font-family
font-weight
text-align
text-transform
line-height
letter-spacing

Example

h1 {
  font-size: 32px;
  text-align: center;
}

Box Model

margin
padding
border
width
height
box-sizing

div {
  padding: 20px;
  margin: 10px;
  border: 1px solid #000;
  box-sizing: border-box;
}

Display & Position

display: block | inline | inline-block | none | flex | grid;
position: static | relative | absolute | fixed | sticky;

.box {
  position: relative;
  display: flex;
}

Flexbox Cheat Sheet

display: flex;
flex-direction: row | column;
justify-content: center | space-between;
align-items: center;
flex-wrap: wrap;
gap: 10px;

Grid Cheat Sheet

display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;

Colors & Backgrounds

color
background-color
background-image
background-size
background-position
background-repeat

Borders & Shadows

border
border-radius
box-shadow

.card {
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

Responsive Design

Media Queries

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

Common Units

px   em   rem   %   vw   vh

Z-Index

z-index: 10;

Works only with positioned elements.

CSS Transitions & Animations

transition: all 0.3s ease;

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

Pseudo-Classes & Elements

:hover
:focus
:active
::before
::after

Overflow & Visibility

overflow: hidden | auto | scroll;
visibility: hidden | visible;

Useful CSS Shortcuts

margin: 10px 20px;
padding: 5px;
font: italic bold 16px Arial;

Best Practices

Next Learning Path