Scribd
Upload
15 views

Complete CSS Cheat Sheet

Uploaded by

amitsh2523
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
15 views

Complete CSS Cheat Sheet

Uploaded by

amitsh2523
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Comprehensive CSS Cheat Sheet

1. Selectors

CSS selectors are used to select the HTML elements you want to style. Common types include:

/* Universal Selector */

* {

margin: 0;

padding: 0;

/* Class Selector */

.classname {

color: red;

/* ID Selector */

#idname {

font-size: 20px;

/* Attribute Selector */

input[type="text"] {

border: 1px solid #ccc;

}
Comprehensive CSS Cheat Sheet

2. Colors

CSS supports color names, HEX, RGB, RGBA, HSL, and HSLA formats for styling elements.

/* Named Colors */

color: blue;

/* HEX Colors */

background-color: #ff5733;

/* RGB Colors */

color: rgb(255, 87, 51);

/* RGBA Colors */

color: rgba(255, 87, 51, 0.8);

/* HSL Colors */

background-color: hsl(20, 100%, 50%);

3. Box Model

Every element in CSS is a rectangular box defined by margins, borders, padding, and the content itself.

/* Box Model Example */

div {
Comprehensive CSS Cheat Sheet

width: 100px;

height: 100px;

padding: 10px;

border: 2px solid black;

margin: 20px;

4. Flexbox

CSS Flexbox provides a way to layout elements in a container. It's useful for responsive designs.

/* Flexbox Example */

.container {

display: flex;

justify-content: center;

align-items: center;

.item {

flex: 1;

padding: 10px;

5. Grid

CSS Grid is a two-dimensional layout system for arranging items into rows and columns.
Comprehensive CSS Cheat Sheet

/* Grid Example */

.container {

display: grid;

grid-template-columns: repeat(3, 1fr);

grid-gap: 10px;

.item {

background: lightblue;

6. Transitions & Animations

Add smooth transitions and animations to your elements.

/* Transition Example */

button {

background: blue;

transition: background 0.5s;

button:hover {

background: green;

}
Comprehensive CSS Cheat Sheet

/* Keyframe Animation */

@keyframes slideIn {

from {

transform: translateX(-100%);

to {

transform: translateX(0);

div {

animation: slideIn 1s ease-in-out;

You might also like