/****************************
* 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 -----------
There are many properties related to the font, such as the face, weight, style, etc. These
properties allow you to change the style or complete look of your text.
*******************************/
/** Body Selector which applies properties to whole 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 -----------
Text properties allow one to manipulate alignment, spacing, decoration, indentation, etc., in the
document.
*******************************/
/* Applies to all tags with class 'container' ex: */
.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 -----------
As the name suggests, these properties are related to background, i.e., you can change the color,
image, position, size, etc., of the document.
*******************************/
/* Applies to all tags with id 'wrapper' ex: */
#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 -----------
Border properties are used to change the style, radius, color, etc., of buttons or other items of
the document.
*******************************/
/* 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 -----------
In laymen's terms, the CSS box model is a container that wraps around every HTML element. It
consists of margins, borders, padding, and the actual content.
It is used to create the design and layout of web pages.
*******************************/
.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 -----------
With the help of the color property, one can give color to text, shape, or any other object.
*******************************/
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 -----------
Specifies the visual look of the content inside 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 -----------
Table properties are used to give style to the tables in the document. You can change many
things like border spacing, table layout, caption, etc.
*******************************/
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: Columns -----------
These properties are used explicitly with columns of the tables, and they are used to give the
table an incredible look.
*******************************/
/* Applies to */
/* Not */
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 are used to customize lists in the document.
*******************************/
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 allow one to animate transitions or other media files on the web page.
*******************************/
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 let you define the transition between two 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 (Important) -----------
Flexbox is a layout of CSS that lets you format HTML easily. Flexbox makes it simple to align
items vertically and horizontally using rows and columns. Items will "flex" to different sizes to fill
the space. And overall, it makes the responsive design more manageable.
*******************************/
/* ---------------------- 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 (Useful in Complex Web Designs) -----------
Grid layout is a 2-Dimensional grid system to CSS that creates complex responsive web design
layouts more easily and consistently across browsers.
*******************************/
/* ---------------------- 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 | / ;
/* column-gap */
column-gap: ;
/* row-gap */
row-gap: ;
/* grid-column-gap */
grid-column-gap: ;
/* grid-row-gap */
grid-row-gap: ;
/* gap shorthand */
gap: ;
/* grid-gap shorthand */
grid-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: / ;
/* grid-auto-columns */
grid-auto-columns: ...;
/* grid-auto-rows */
grid-auto-rows: ...;
/* 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: | | span | span | auto;
/* grid-column-end */
grid-column-end: | | span | span | auto;
/* grid-row-start */
grid-row-start: | | span | span | auto;
/* grid-row-end */
grid-row-end: | | span | span | auto;
/* grid-column shorthand */
grid-column: / | / span ;
/* grid-row shorthand */
grid-row: / | / span ;
/* grid-area */
grid-area: | / / / ;
/* justify-self */
justify-self: start | end | center | stretch;
/* align-self */
align-self: start | end | center | stretch;
/* place-self */
place-self: center;
}
/***************************
------------ 15: MEDIA QUERIES -----------
Using media queries are a popular technique for delivering a tailored style sheet to
desktops, laptops, tablets, and mobile phones (such as iPhone and Android phones).
|----------------------------------------------------------|
| 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 */
/* within tag */