Merge pull request #290 from Technical-Shubham-tech/css3-added
Created cheatsheet for CSS3
This commit is contained in:
Julien Le Coupanec
GitHub
commit
6f67bf688e
|
|
@ -69,6 +69,7 @@ Feel free to take a look. You might learn new things. They have been designed to
|
|||
#### Basics
|
||||
|
||||
- [HTML5](frontend/html5.html)
|
||||
- [CSS3](frontend/css3.css)
|
||||
|
||||
#### Frameworks
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,683 @@
|
|||
/****************************
|
||||
* 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></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: <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 -----------
|
||||
|
||||
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: <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 -----------
|
||||
|
||||
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 <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 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 | <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 -----------
|
||||
|
||||
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 */
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> /* within <head> tag */
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue