A quick cheatsheet on how to use some of the most commonly used CSS properties. This is a great reference for anyone who wants to learn CSS or brush up on something on the tip of their tongue.
/**************************** * 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 */
Grids
/* Display properties */ display: grid; display: inline-grid;
/* Columns and rows */ grid-template-columns: 1rem 2rem 1rem; /* Measurement units */ grid-template-columns: 25% 50% 25%; /* Percentage units */ grid-template-columns: 1rem auto 1rem 2fr; /* Fill remaining widths with auto or fr units */ grid-template-columns: repeat(12, 1fr); /* Repeat columns without needing to write them */ grid-template-columns: subgrid; /* Use column tracks defined on parent grid */ grid-template-rows: 1rem 10% auto repeat(5, 10px); /* Mix any group, same rules work for rows */ grid-template-rows: subgrid; /* Use row tracks defined on parent grid */
/* Automatic columns and rows */ grid-auto-columns: 10px; /* No matter how many columns of content end up in the grid, each column will be this same width */ grid-auto-rows: 1rem; /* No matter how many rows of content end up in the grid, each row will be this same height */
/* Areas */ grid-template-areas: "header header" "main aside" "footer footer"; /* Grid-style */ grid-template-areas: "header header" "main aside" "footer footer"; /* Inline-style */
/* Template shorthand */ grid-template: "header header" auto "main aside" 100vh "footer footer" 10rem / 80% 20%; /* The above is the same as below long-hand */ grid-template-columns: 80% 20%; grid-template-rows: auto 100vh 10rem; grid-template-areas: "header header" "main aside" "footer footer";
/* Gaps */ grid-row-gap: 1rem; grid-column-gap: 0.5rem; /* Define values separately */ grid-gap: 1rem 0.5rem; /* Short-hand for row / column */ grid-gap: 1rem; /* Gap in both dimensions */
/* Item justification (horizontal or column alignment) */ justify-items: start; /* Align items to the left */ justify-items: center; /* Align items centered within its column */ justify-items: end; /* Align items to the right */ justify-items: stretch; /* (default) Fills available area (horizontally) */
/* Item alignment (vertical or row alignment) */ align-items: start; /* Align items to the top */ align-items: center; /* Align items centered within its row */ align-items: end; /* Align items to the bottom */ align-items: stretch; /* (default) Fills available area (vertically) */
/* Place item shorthand */ place-items: start stretch; /* The above is the same as below long-hand */ align-items: start; justify-items: stretch;
/* Content justification (horizontal or column alignment) */ justify-content: start; /* Align content to the left */ justify-content: center; /* Align content centered horizontally within the grid */ justify-content: end; /* Align content to the right */ justify-content: stretch; /* (default) Fills available area (horizontally) */ justify-content: space-around; /* Chooses a space for both sides of the columns like a left and right margin */ justify-content: space-between; /* Chooses a space to go between columns, no margins on outside of content */ justify-content: space-evenly; /* Chooses a space that goes between all columns and edges consistently */
/* Content alignment (horizontal or column alignment) */ align-content: start; /* Align content to the top */ align-content: center; /* Align content centered vertically within the grid */ align-content: end; /* Align content to the bottom */ align-content: stretch; /* (default) Fills available area (vertically) */ align-content: space-around; /* Chooses a space for the top and bottom of the rows like a top and bottom margin */ align-content: space-between; /* Chooses a space to go between rows, no margins on outside of content */ align-content: space-evenly; /* Chooses a space that goes between all rows and edges consistently */
/* Place item shorthand */ place-content: center start; /* The above is the same as below long-hand */ align-content: center; justify-content: start;
/* Automatic grid positioning */ grid-auto-flow: row; /* Left-to-right rows, then top-to-bottom*/ grid-auto-flow: column; /* Top-to-bottom columns, then left-to-right */ grid-auto-flow: dense; /* Responds with best-guess on left-to-right, top-to-bottom order with advanced layouts */
/* There is one final shorthand for all container properties in one */ /* Explicit grid columns, rows, and areas */ grid: "header header" auto "main aside" 100vh "footer footer" 10rem / 80% 20%; /* You can include a template as the only value, which is equivalent to below */ grid-template: "header header" auto "main aside" 100vh "footer footer" 10rem / 80% 20%; /* Which is again equivalent to below */ grid-template-columns: 80% 20%; grid-template-rows: auto 100vh 10rem; grid-template-areas: "header header" "main aside" "footer footer"; /* Automatic grid flows */ grid: 1rem / auto-flow dense 1fr; /* You can include rows, a flow, and automatic columns, which is equivalent to below */ grid-template-rows: 1rem; grid-auto-flow: dense; grid-auto-columns: 1fr; grid: auto-flow dense 1rem / repeat(10, 10%); /* Conversely, you can do the same thing with automatic rows, and defined columns */ grid-auto-flow: dense; grid-auto-rows: 1rem; grid-template-columns: repeat(10, 10%);
}
Child
.grid-child {
/* Column position */ grid-column-start: 1; grid-column-end: 2; grid-column: 1 / 2; /* Short hand */ grid-column: 1 / span 2; /* Span 2 columns without explicitly defining an endpoint */ grid-column: 1; /* Start in and occupy a single column */
/* Row position */ grid-row-start: 2; grid-row-end: 4; grid-row: 2 / 4; /* Short hand */ grid-row: 2 / span 3;/* Span 3 rows without explicitly defining an endpoint */ grid-row: 1; /* Start in and occupy a single row */
/* Area positioning */ grid-area: header; /* You can use a named grid area from the container */ grid-area: 2 / 1 / 4 / 2; /* Or you can use positioning. This is equivalent to... */ grid-row-start: 2; grid-column-start: 1; grid-row-end: 4; grid-column-end: 2;
/* Self justification (horizontal or column alignment) */ justify-self: start; /* Align item to the left */ justify-self: center; /* Align item centered within its column */ justify-self: end; /* Align item to the right */ justify-self: stretch; /* (default) Fills available area (horizontally) */
/* Self alignment (vertical or row alignment) */ align-self: start; /* Align item to the top */ align-self: center; /* Align item centered within its row */ align-self: end; /* Align item to the bottom */ align-self: stretch; /* (default) Fills available area (vertically) */
/* Placement shorthand */ place-self: start stretch; /* The above is the same as below long-hand */ align-self: start; justify-self: stretch;
}