CSS3 Cheatsheet
/****************************
* CSS3 CHEATSHEET - Beginner Friendly
* Learn more: https://web.dev/learn/css/
* Documentation: https://developer.mozilla.org/en-US/docs/Web/CSS
* PDF for Better Readability: https://github.com/LeCoupa/awesome-cheatsheets/files/8880372/CSS_Cheatsheet.pdf
* Brief overview about CSS: http://jonkinney.com/assets/21/advanced_css.pdf
* (Advance) Know more about each topic in-depth: https://www.ciwcertified.com/resources/documents/sample-chapter/CCT02CDHTCSCK1405.PDF
*
*
*
* Table of contents
* -------------------
* 01 | Font
* 02 | Text
* 03 | Background
* 04 | Border
* 05 | Box Model
* 06 | Colors
* 07 | Template Layout
* 08 | Table
* 09 | Columns
* 10 | List & Markers
* 11 | Animations
* 12 | Transitions
* 13 | CSS Flexbox (Important)
* - Parent Properties (flex container)
* - Child Properties (flex items)
* 14 | CSS Grid (Useful in Complex Web Designs)
* - Parent Properties (Grid container)
* - Child Properties (Grid items)
* 15 | Media Queries
*
*
*
*****************************/
01: Font Properties
Font properties control the appearance of text, including its face, weight, and style.
/** Body Selector which applies properties to whole body <body></body> */
body {
/* Font-Family */
font-family: "Segoe UI", Tahoma, sans-serif; /* You can declare multiple fonts. */
/*if first font doesn't exists other ones will be declared serial wise */
/* Font-Style */
font-style: italic;
/* Font-Variant */
font-variant: small-caps;
/* Font-Weight */
font-weight: bold;
/* Font-Size */
font-size: larger;
/* Font */
font: style variant weight size family;
}
02: Text Properties
Text properties allow manipulation of alignment, spacing, decoration, and indentation.
/* Applies to all tags with class 'container' ex: <div class="container"></div> */
.container {
/* Text-Align */
text-align: justify;
/* Letter-Spacing */
letter-spacing: 0.15em;
/* Text-Decoration */
text-decoration: underline;
/* Word-Spacing */
word-spacing: 0.25em;
/* Text-Transform */
text-transform: uppercase;
/* Text-Indent */
text-indent: 0.5cm;
/* Line-Height */
line-height: normal;
}
03: Background Properties
Background properties enable customization of background color, image, position, and size.
/* Applies to all tags with id 'wrapper' ex: <div id="wrapper"></div> */
#wrapper {
/* Background-Image */
background-image: url("Path");
/* Background-Position */
background-position: right top;
/* Background-Size */
background-size: cover;
/* Background-Repeat */
background-repeat: no-repeat;
/* Background-Attachment */
background-attachment: scroll;
/* Background-Color */
background-color: fuchsia;
/* Background */
background: color image repeat attachment position;
}
04: Border Properties
Border properties are used to style borders, including width, style, color, and radius.
/* You can also select multiple items */
div,
.container {
/* Border-Width */
border-width: 5px;
/* Border-Style */
border-style: solid;
/* Border-Color */
border-color: aqua;
/* Border-Radius */
border-radius: 15px;
/* Border */
border: width style color;
}
05: Box Model
The CSS box model defines how HTML elements are rendered, including margins, borders, padding, and content.
.wrapper {
/* Float */
float: none;
/* Clear */
clear: both;
/* Display */
display: block;
/* Height */
height: fit-content;
/* Width */
width: auto;
/* Margin */
margin: top right bottom left;
/* Padding */
padding: top right bottom left;
/* Overflow */
overflow: hidden;
/* Visibility */
visibility: visible;
/* z-index */
z-index: 1;
/* position */
position: static | relative | fixed | absolute | sticky;
}
06: Colors
Color properties allow you to set the color of text, shapes, and other elements.
p,
span,
.text {
/* Color - 1 */
color: cornsilk;
/* Color - 2 */
color: #fff8dc;
/* Color - 3 */
color: rgba(255, 248, 220, 1);
/* Color - 4 */
color: hsl(48, 100%, 93%);
/* Opacity */
opacity: 1;
}
07: Template Layout
Template layout properties define the visual presentation of content within a template.
/* '*' selects all elements on a page */
* {
/* Box-Align */
box-align: start;
/* Box-Direction */
box-direction: normal;
/* Box-Flex */
box-flex: normal;
/* Box-Flex-Group */
box-flex-group: 2;
/* Box-Orient */
box-orient: inline;
/* Box-Pack */
box-pack: justify;
/* Box-Sizing */
box-sizing: margin-box;
/* max-width */
max-width: 800px;
/* min-width */
min-width: 500px;
/* max-height */
max-height: 100px;
/* min-height */
min-height: 80px;
}
08: Table Properties
Table properties are used to style HTML tables, including border spacing and layout.
table {
/* Border-Collapse */
border-collapse: separate;
/* Empty-Cells */
empty-cells: show;
/* Border-Spacing */
border-spacing: 2px;
/* Table-Layout */
table-layout: auto;
/* Caption-Side */
caption-side: bottom;
}
09: Column Properties
Column properties are specifically used to style columns within tables for enhanced visual presentation.
/* Applies to <table class="nice-table"></table> */
/* Not <table></table> */
table.nice-table {
/* Column-Count */
column-count: 10;
/* Column-Gap */
column-gap: 5px;
/* Column-rule-width */
column-rule-width: medium;
/* Column-rule-style */
column-rule-style: dotted;
/* Column-rule-color */
column-rule-color: black;
/* Column-width */
column-width: 10px;
/* Column-span */
column-span: all;
}
10: List & Markers
List and marker properties allow customization of list items and their markers.
li,
ul,
ol {
/* List-style-type */
list-style-type: square;
/* List-style-position */
list-style-position: 20px;
/* List-style-image */
list-style-image: url("image.gif");
/* Marker-offset */
marker-offset: auto;
}
11: Animations
CSS animations enable the creation of dynamic transitions and effects for web page elements.
svg,
.loader {
/* Animation-name */
animation-name: myanimation;
/* Animation-duration */
animation-duration: 10s;
/* Animation-timing-function */
animation-timing-function: ease;
/* Animation-delay */
animation-delay: 5ms;
/* Animation-iteration-count */
animation-iteration-count: 3;
/* Animation-direction */
animation-direction: normal;
/* Animation-play-state */
animation-play-state: running;
/* Animation-fill-mode */
animation-fill-mode: both;
}
12: Transitions
Transitions allow you to define smooth changes between different states of an element.
a,
button {
/* Transition-property */
transition-property: none;
/* Transition-duration */
transition-duration: 2s;
/* Transition-timing-function */
transition-timing-function: ease-in-out;
/* Transition-delay */
transition-delay: 20ms;
}
13: CSS Flexbox
Flexbox is a powerful CSS layout module for arranging items in rows or columns, simplifying alignment and distribution.
Parent Properties (flex container)
section,
div#wrapper {
/* display */
display: flex;
/* flex-direction */
flex-direction: row | row-reverse | column | column-reverse;
/* flex-wrap */
flex-wrap: nowrap | wrap | wrap-reverse;
/* flex-flow */
flex-flow: column wrap;
/* justify-content */
justify-content: flex-start | flex-end | center | space-between | space-around;
/* align-items */
align-items: stretch | flex-start | flex-end | center | baseline;
/* align-content */
align-content: flex-start | flex-end | center | space-between | space-around;
}
Child Properties (flex items)
p,
span,
h1,
h2,
h3,
h4,
h5,
h6,
a {
/* order */
order: 5; /* default is 0 */
/* flex-grow */
flex-grow: 4; /* default 0 */
/* flex-shrink */
flex-shrink: 3; /* default 1 */
/* flex-basis */
flex-basis: | auto; /* default auto */
/* flex shorthand */
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
/* align-self */
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
14: CSS Grid
CSS Grid Layout provides a two-dimensional layout system for creating complex and responsive web designs.
Parent Properties (Grid container)
section,
div#wrapper {
/* display */
display: grid | inline-grid;
/* grid-template-columns */
grid-template-columns: 12px 12px 12px;
/* grid-template-rows */
grid-template-rows: 8px auto 12px;
/* grid-template */
grid-template: none | <grid-template-rows> / <grid-template-columns>;
/* column-gap */
column-gap: <line-size>;
/* row-gap */
row-gap: <line-size>;
/* grid-column-gap */
grid-column-gap: <line-size>;
/* grid-row-gap */
grid-row-gap: <line-size>;
/* gap shorthand */
gap: <grid-row-gap> <grid-column-gap>;
/* grid-gap shorthand */
grid-gap: <grid-row-gap> <grid-column-gap>;
/* justify-items */
justify-items: start | end | center | stretch;
/* align-items */
align-items: start | end | center | stretch;
/* place-items */
place-items: center;
/* justify-content */
justify-content: start | end | center | stretch | space-around | space-between;
/* align-content */
align-content: start | end | center | stretch | space-around | space-between;
/* place-content */
place-content: <align-content> / <justify-content>;
/* grid-auto-columns */
grid-auto-columns: <track-size> ...;
/* grid-auto-rows */
grid-auto-rows: <track-size> ...;
/* grid-auto-flow */
grid-auto-flow: row | column | row dense | column dense;
}
Child Properties (Grid items)
p,
span,
h1,
h2,
h3,
h4,
h5,
h6,
a {
/* grid-column-start */
grid-column-start: <number> | <name> | span <number> | span <name> | auto;
/* grid-column-end */
grid-column-end: <number> | <name> | span <number> | span <name> | auto;
/* grid-row-start */
grid-row-start: <number> | <name> | span <number> | span <name> | auto;
/* grid-row-end */
grid-row-end: <number> | <name> | span <number> | span <name> | auto;
/* grid-column shorthand */
grid-column: <start-line> / <end-line> | <start-line> / span <value>;
/* grid-row shorthand */
grid-row: <start-line> / <end-line> | <start-line> / span <value>;
/* grid-area */
grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
/* justify-self */
justify-self: start | end | center | stretch;
/* align-self */
align-self: start | end | center | stretch;
/* place-self */
place-self: center;
}
15: Media Queries
Media queries are essential for creating responsive designs that adapt to different screen sizes and devices.
/*
|----------------------------------------------------------|
| Responsive Grid Media Queries - 1280, 1024, 768, 480 |
| 1280-1024 - desktop (default grid) |
| 1024-768 - tablet landscape |
| 768-480 - tablet |
| 480-less - phone landscape & smaller |
|----------------------------------------------------------|
*/
@media all and (min-width: 1024px) and (max-width: 1280px) { }
@media all and (min-width: 768px) and (max-width: 1024px) { }
@media all and (min-width: 480px) and (max-width: 768px) { }
@media all and (max-width: 480px) { }
/* Small screens - MOBILE */
@media only screen { } /* Define mobile styles - Mobile First */
@media only screen and (max-width: 40em) { } /* max-width 640px, mobile-only styles, use when QAing mobile issues */
/* Medium screens - TABLET */
@media only screen and (min-width: 40.063em) { } /* min-width 641px, medium screens */
@media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
/* Large screens - DESKTOP */
@media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens */
@media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1024px and max-width 1440px, use when QAing large screen-only issues */
/* XLarge screens */
@media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */
@media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */
/* XXLarge screens */
@media only screen and (min-width: 120.063em) { } /* min-width 1921px, xlarge screens */
/*------------------------------------------*/
/* Portrait */
@media screen and (orientation:portrait) { /* Portrait styles here */ }
/* Landscape */
@media screen and (orientation:landscape) { /* Landscape styles here */ }
/* CSS for iPhone, iPad, and Retina Displays */
/* Non-Retina */
@media screen and (-webkit-max-device-pixel-ratio: 1) {
}
/* Retina */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
}
/* iPhone Portrait */
@media screen and (max-device-width: 480px) and (orientation:portrait) {
}
/* iPhone Landscape */
@media screen and (max-device-width: 480px) and (orientation:landscape) {
}
/* iPad Portrait */
@media screen and (min-device-width: 481px) and (orientation:portrait) {
}
/* iPad Landscape */
@media screen and (min-device-width: 481px) and (orientation:landscape) {
}
/* Make Sure you don't forgot to add */
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> /* within <head> tag */