DEV Community

Cover image for CSS Cheat Sheet – A Basic Guide to CSS
Madelyn Mathew
Madelyn Mathew

Posted on • Updated on

CSS Cheat Sheet – A Basic Guide to CSS

#css #webdev #programming #javascript

CSS i.e. Cascading Style Sheets is a stylesheet language used to describe the presentation of a document written in a markup language such as HTML, XML, etc. CSS enhances the look and feel of the web-page by describing how elements should be rendered on screen or in other media.

CSS Basics: Cascading Style Sheet(CSS) is used to set the style in web pages that contain HTML elements, here we will see in how many ways we can add CSS for our HTML, there three different ways to do so one by one we will see those procedure.

CSS Cheat Sheet provides you with the most common style snippets CSS gradient, background, button, font family, order, radius, box, and text-shadow generators, color picker, and more tools to add more visual weight to your document. All these and other useful web design tools can be found on a single page.

Font-Family 

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
Enter fullscreen mode Exit fullscreen mode

Font-Style 

font-style: italic;
Enter fullscreen mode Exit fullscreen mode

Font-Variant 

font-variant: small-caps;
Enter fullscreen mode Exit fullscreen mode

Font Weight 

font-weight: bold;
Enter fullscreen mode Exit fullscreen mode

Font-Size 

font-size: larger;
Enter fullscreen mode Exit fullscreen mode

Font 

font: style variant weight size family;
Enter fullscreen mode Exit fullscreen mode

Text

Text properties allow one to manipulate alignment, spacing, decoration, indentation, etc., in the document.

Text-Align 

text-align: justify;
Enter fullscreen mode Exit fullscreen mode

Letter-Spacing 

letter-spacing: .15em;
Enter fullscreen mode Exit fullscreen mode

Text-Decoration 

text-decoration: underline;
Enter fullscreen mode Exit fullscreen mode

Word-Spacing 

word-spacing: 0.25em;
Enter fullscreen mode Exit fullscreen mode

Text-Transform 

text-transform: uppercase;
Enter fullscreen mode Exit fullscreen mode

Text-Indent 

text-indent: 0.5cm;
Enter fullscreen mode Exit fullscreen mode

Line-Height 

line-height: normal;
Enter fullscreen mode Exit fullscreen mode

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.

Background-Image 

background-image: url("Path");
Enter fullscreen mode Exit fullscreen mode

Background-Position 

background-position: right top;
Enter fullscreen mode Exit fullscreen mode

Background-Size 

background-size: cover;
Enter fullscreen mode Exit fullscreen mode

Background-Repeat 

background-repeat: no-repeat;
Enter fullscreen mode Exit fullscreen mode

Background-Attachment 

background-attachment: scroll;
Enter fullscreen mode Exit fullscreen mode

Background-Color 

background-color: fuchsia;
Enter fullscreen mode Exit fullscreen mode

Background 

background: color image repeat attachment position;
Enter fullscreen mode Exit fullscreen mode

Border

Border properties are used to change the style, radius, color, etc., of buttons or other items of the document.

Border-Width 

border-width: 5px;
Enter fullscreen mode Exit fullscreen mode

Border-Style 

border-style: solid;
Enter fullscreen mode Exit fullscreen mode

Border-Color 

border-color: aqua;
Enter fullscreen mode Exit fullscreen mode

Border-Radius 

border-radius: 15px;
Enter fullscreen mode Exit fullscreen mode

Border 

border: width style color;
Enter fullscreen mode Exit fullscreen mode

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.

Float 

float: none;
Enter fullscreen mode Exit fullscreen mode

Clear 

clear: both;
Enter fullscreen mode Exit fullscreen mode

Display 

display: block;
Enter fullscreen mode Exit fullscreen mode

Height 

height: fit-content;
Enter fullscreen mode Exit fullscreen mode

Width 

width: auto;
Enter fullscreen mode Exit fullscreen mode

Margin 

margin: top right bottom left;
Enter fullscreen mode Exit fullscreen mode

Padding 

padding: top right bottom left;
Enter fullscreen mode Exit fullscreen mode

Overflow 

overflow: hidden;
Enter fullscreen mode Exit fullscreen mode

Visibility 

visibility: visible;
Enter fullscreen mode Exit fullscreen mode

Colors

With the help of the color property, one can give color to text, shape, or any other object.

Color 

color: cornsilk;
Enter fullscreen mode Exit fullscreen mode

Opacity 

opacity: 4;
Enter fullscreen mode Exit fullscreen mode

Template Layout

Specifies the visual look of the content inside a template

Box-Align 

box-align: start;
Enter fullscreen mode Exit fullscreen mode

Box-Direction 

box-direction: normal;
Enter fullscreen mode Exit fullscreen mode

Box-Flex 

box-flex: normal;
Enter fullscreen mode Exit fullscreen mode

Box-Flex-Group 

box-flex-group: 2;
Enter fullscreen mode Exit fullscreen mode

Box-Orient 

box-orient: inline;
Enter fullscreen mode Exit fullscreen mode

Box-Pack 

box-pack: justify;
Enter fullscreen mode Exit fullscreen mode

Box-Sizing 

box-sizing: margin-box;
Enter fullscreen mode Exit fullscreen mode

max-width 

max-width: 800px;
Enter fullscreen mode Exit fullscreen mode

min-width 

min-width: 500px;
Enter fullscreen mode Exit fullscreen mode

max-height 

max-height: 100px;
Enter fullscreen mode Exit fullscreen mode

min-height 

min-height: 80px;
Enter fullscreen mode Exit fullscreen mode

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.

Border-Collapse 

border-collapse: separate;
Enter fullscreen mode Exit fullscreen mode

Empty-Cells 

empty-cells: show;
Enter fullscreen mode Exit fullscreen mode

Border-Spacing 

border-spacing: 2px;
Enter fullscreen mode Exit fullscreen mode

Table-Layout 

table-layout: auto;
Enter fullscreen mode Exit fullscreen mode

Caption-Side 

caption-side: bottom;
Enter fullscreen mode Exit fullscreen mode

Columns

These properties are used explicitly with columns of the tables, and they are used to give the table an incredible look.

Column-Count 

column-count: 10;
Enter fullscreen mode Exit fullscreen mode

Column-Gap 

column-gap: 5px;
Enter fullscreen mode Exit fullscreen mode

Column-rule-width 

column-rule-width: medium;
Enter fullscreen mode Exit fullscreen mode

Column-rule-style 

column-rule-style: dotted ;
Enter fullscreen mode Exit fullscreen mode

Column-rule-color 

column-rule-color: black;
Enter fullscreen mode Exit fullscreen mode

Column-width 

column-width: 10px;
Enter fullscreen mode Exit fullscreen mode

Column-span 

column-span: all;
Enter fullscreen mode Exit fullscreen mode

List & Markers

List and marker properties are used to customize lists in the document.

List-style-type 

list-style-type: square;
Enter fullscreen mode Exit fullscreen mode

List-style-position 

list-style-position: 20px;
Enter fullscreen mode Exit fullscreen mode

List-style-image 

list-style-image: url(image.gif);
Enter fullscreen mode Exit fullscreen mode

Marker-offset 

marker-offset: auto;
Enter fullscreen mode Exit fullscreen mode

Animations

CSS animations allow one to animate transitions or other media files on the web page.

Animation-name 

animation-name: myanimation;
Enter fullscreen mode Exit fullscreen mode

Animation-duration 

animation-duration: 10s;
Enter fullscreen mode Exit fullscreen mode

Animation-timing-function 

animation-timing-function: ease;
Enter fullscreen mode Exit fullscreen mode

Animation-delay 

animation-delay: 5ms;
Enter fullscreen mode Exit fullscreen mode

Animation-iteration-count 

animation-iteration-count: 3;
Enter fullscreen mode Exit fullscreen mode

Animation-direction 

animation-direction: normal;
Enter fullscreen mode Exit fullscreen mode

Animation-play-state 

animation-play-state: running;
Enter fullscreen mode Exit fullscreen mode

Animation-fill-mode 

animation-fill-mode: both;
Enter fullscreen mode Exit fullscreen mode

Transitions

Transitions let you define the transition between two states of an element.

Transition-property 

transition-property: none;
Enter fullscreen mode Exit fullscreen mode

Transition-duration 

transition-duration: 2s;
Enter fullscreen mode Exit fullscreen mode

Transition-timing-function 

transition-timing-function: ease-in-out;
Enter fullscreen mode Exit fullscreen mode

Transition-delay 

transition-delay: 20ms;
Enter fullscreen mode Exit fullscreen mode

CSS Flexbox

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)

display 

display: flex;
Enter fullscreen mode Exit fullscreen mode

flex-direction 

flex-direction: row | row-reverse | column | column-reverse;
Enter fullscreen mode Exit fullscreen mode

flex-wrap 

flex-wrap: nowrap | wrap | wrap-reverse;
Enter fullscreen mode Exit fullscreen mode 
flex-flow
Enter fullscreen mode Exit fullscreen mode 
flex-flow: column wrap;
Enter fullscreen mode Exit fullscreen mode

justify-content 

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
Enter fullscreen mode Exit fullscreen mode

align-items 

align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
Enter fullscreen mode Exit fullscreen mode

align-content 

align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
Child Properties (flex items)
Enter fullscreen mode Exit fullscreen mode

order 

order: 5; /* default is 0 */
Enter fullscreen mode Exit fullscreen mode

flex-grow 

flex-grow: 4; /* default 0 */
Enter fullscreen mode Exit fullscreen mode

flex-shrink 

flex-shrink: 3; /* default 1 */
Enter fullscreen mode Exit fullscreen mode

flex-basis 

flex-basis: | auto; /* default auto */
Enter fullscreen mode Exit fullscreen mode

flex shorthand 

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
Enter fullscreen mode Exit fullscreen mode

align-self 

align-self: auto | flex-start | flex-end | center | baseline | stretch;
Enter fullscreen mode Exit fullscreen mode

CSS Grid

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)

display 

display: grid | inline-grid;
Enter fullscreen mode Exit fullscreen mode

grid-template-columns 

grid-template-columns: 12px 12px 12px;
Enter fullscreen mode Exit fullscreen mode

grid-template-rows 

grid-template-rows: 8px auto 12px;
Enter fullscreen mode Exit fullscreen mode

grid-template 

grid-template: none | <grid-template-rows> / <grid-template-columns>;
Enter fullscreen mode Exit fullscreen mode

column-gap 

column-gap: <line-size>;
Enter fullscreen mode Exit fullscreen mode

row-gap 

row-gap: <line-size>;
Enter fullscreen mode Exit fullscreen mode

grid-column-gap 

grid-column-gap: <line-size>;
Enter fullscreen mode Exit fullscreen mode

grid-row-gap 

grid-row-gap: <line-size>;
Enter fullscreen mode Exit fullscreen mode

gap shorthand 

gap: <grid-row-gap> <grid-column-gap>;
Enter fullscreen mode Exit fullscreen mode

grid-gap shorthand 

grid-gap: <grid-row-gap> <grid-column-gap>;
Enter fullscreen mode Exit fullscreen mode

justify-items 

justify-items: start | end | center | stretch;
Enter fullscreen mode Exit fullscreen mode

align-items 

align-items: start | end | center | stretch;
Enter fullscreen mode Exit fullscreen mode

place-items 

place-items: center;
Enter fullscreen mode Exit fullscreen mode

justify-content 

justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
Enter fullscreen mode Exit fullscreen mode

align-content 

align-content: start | end | center | stretch | space-around | space-between | space-evenly;
Enter fullscreen mode Exit fullscreen mode

place-content 

place-content: <align-content> / <justify-content>;
Enter fullscreen mode Exit fullscreen mode

grid-auto-columns 

grid-auto-columns: <track-size> ...;
Enter fullscreen mode Exit fullscreen mode

grid-auto-rows 

grid-auto-rows: <track-size> ...;
Enter fullscreen mode Exit fullscreen mode

grid-auto-flow 

grid-auto-flow: row | column | row dense | column dense;
Child Properties (Grid items)
Enter fullscreen mode Exit fullscreen mode

grid-column-start 

grid-column-start: <number> | <name> | span <number> | span <name> | auto;
Enter fullscreen mode Exit fullscreen mode

grid-column-end 

grid-column-end: <number> | <name> | span <number> | span <name> | auto;
Enter fullscreen mode Exit fullscreen mode

grid-row-start 

grid-row-start: <number> | <name> | span <number> | span <name> | auto;
Enter fullscreen mode Exit fullscreen mode

grid-row-end 

grid-row-end: <number> | <name> | span <number> | span <name> | auto;
Enter fullscreen mode Exit fullscreen mode

grid-column shorthand 

grid-column: <start-line> / <end-line> | <start-line> / span <value>;
Enter fullscreen mode Exit fullscreen mode

grid-row shorthand 

grid-row: <start-line> / <end-line> | <start-line> / span <value>;
Enter fullscreen mode Exit fullscreen mode

grid-area 

grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
Enter fullscreen mode Exit fullscreen mode

justify-self 

justify-self: start | end | center | stretch;
Enter fullscreen mode Exit fullscreen mode

align-self 

align-self: start | end | center | stretch;
Enter fullscreen mode Exit fullscreen mode

place-self 

place-self: center;
Enter fullscreen mode Exit fullscreen mode

Read More : [Get CSS Basic Details](https://www.backlinkss.link/2022/12/css-cheat-sheet.html)

Top comments (0)

Read next

flmgt profile image

Protect Users with AI-powered Content Moderation 🛡️✨

Florian -

qa3emnik profile image

TypeScript: Why It's Taking Over JavaScript (And Why You Should Care)

Qasem Nik -

innazh profile image

Superset embedded dashboard setup: templ components, golang backend

Inna -

mdarifulhaque profile image

2812. Find the Safest Path in a Grid

MD ARIFUL HAQUE -