Scribd
Upload
22 views

Complete CSS Cheat Sheet

Uploaded by

amitsh2523
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
22 views

Complete CSS Cheat Sheet

Uploaded by

amitsh2523
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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