CSS CHEAT SHEET CSS CHEAT SHEET

background-repeat: no-repeat;
Font
Background-Attachment
There are many properties related to the font, such as the face, weight, style, etc. These
background-attachment: scroll;
properties allow you to change the style or complete look of your text.
Background-Color
Font-Family
background-color: fuchsia;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
Background
Font-Style
background: color image repeat attachment position;
font-style: italic;
Font-Variant Border
font-variant: small-caps; Border properties are used to change the style, radius, color, etc., of buttons or other items of the
Font-Weight document.
font-weight: bold; Border-Width
Font-Size border-width: 5px;
font-size: larger; Border-Style
Font border-style: solid;
font: style variant weight size family; Border-Color
border-color: aqua;
Text
Border-Radius
Text properties allow one to manipulate alignment, spacing, decoration, indentation, etc., in the
border-radius: 15px;
document.
Border
Text-Align
border: width style color;
text-align: justify;
Letter-Spacing Box Model
letter-spacing: .15em; In laymen's terms, the CSS box model is a container that wraps around every HTML element. It
Text-Decoration consists of margins, borders, padding, and the actual content. It is used to create the design and
text-decoration: underline; layout of web pages.
Word-Spacing Float
word-spacing: 0.25em; float: none;
Text-Transform Clear
text-transform: uppercase; clear: both;
Text-Indent Display
text-indent: 0.5cm; display: block;
Line-Height Height
line-height: normal; height: fit-content;
Width
Background width: auto;
As the name suggests, these properties are related to background, i.e., you can change the color,
Margin
image, position, size, etc., of the document.
margin: top right bottom left;
Background-Image
Padding
background-image: url("Path");
padding: top right bottom left;
Background-Position
Overflow
background-position: right top;
overflow: hidden;
Background-Size
Visibility
background-size: cover;
visibility: visible;
Background-Repeat
1/7 2/7
 CSS CHEAT SHEET CSS CHEAT SHEET
Colors Caption-Side
caption-side: bottom;
With the help of the color property, one can give color to text, shape, or any other object.
Color Columns
color: cornsilk; These properties are used explicitly with columns of the tables, and they are used to give the
Opacity table an incredible look.
opacity: 4; Column-Count
Template Layout column-count : 10;

Specifies the visual look of the content inside a template

Column-Gap
column-gap : 5px;
Box-Align
box-align : start;
Column-rule-width
column-rule-width : medium;
Box-Direction
box-direction : normal;
Column-rule-style
column-rule-style : dotted ;
Box-Flex
box-flex : normal;
Column-rule-color
column-rule-color : black;
Box-Flex-Group
box-flex-group : 2;
Column-width
column-width : 10px;
Box-Orient
box-orient : inline;
Column-span
column-span : all;
Box-Pack
box-pack : justify; List & Markers
Box-Sizing List and marker properties are used to customize lists in the document.
box-sizing : margin-box; List-style-type
max-width list-style-type: square;
max-width: 800px; List-style-position
min-width list-style-position : 20px;
min-width: 500px; List-style-image
max-height list-style-image : url(image.gif);
max-height: 100px; Marker-offset
min-height marker-offset : auto;
min-height: 80px; Animations
Table CSS animations allow one to animate transitions or other media files on the web page.
Table properties are used to give style to the tables in the document. You can change many Animation-name
things like border spacing, table layout, caption, etc. animation-name : myanimation;
Border-Collapse Animation-duration
border-collapse: separate; animation-duration : 10s;
Empty-Cells Animation-timing-function
empty-cells: show; animation-timing-function : ease;
Border-Spacing Animation-delay
border-spacing: 2px; animation-delay : 5ms;
Table-Layout Animation-iteration-count
table-layout: auto; animation-iteration-count : 3;

3/7 4/7
 CSS CHEAT SHEET CSS CHEAT SHEET
Animation-direction flex-shrink
animation-direction : normal; flex-shrink: 3; /* default 1 */
Animation-play-state flex-basis
animation-play-state : running; flex-basis: | auto; /* default auto */
Animation-fill-mode
animation-fill-mode : both; flex shorthand
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
Transitions align-self
Transitions let you define the transition between two states of an element. align-self: auto | flex-start | flex-end | center | baseline | stretch;
Transition-property
transition-property: none;
CSS Grid
Grid layout is a 2-Dimensional grid system to CSS that creates complex responsive web design
Transition-duration
layouts more easily and consistently across browsers.
transition-duration : 2s;
Transition-timing-function Parent Properties (Grid container)
transition-timing-function: ease-in-out; display
Transition-delay display: grid | inline-grid;
transition-delay : 20ms; grid-template-columns
CSS Flexbox grid-template-columns: 12px 12px 12px;

Flexbox is a layout of CSS that lets you format HTML easily. Flexbox makes it simple to align
grid-template-rows
grid-template-rows: 8px auto 12px;
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. grid-template
grid-template: none | <grid-template-rows> / <grid-template-columns>;
Parent Properties (flex container) column-gap
display column-gap: <line-size>;
display: flex;
row-gap
flex-direction row-gap: <line-size>;
flex-direction: row | row-reverse | column | column-reverse;
grid-column-gap
flex-wrap grid-column-gap: <line-size>;
flex-wrap: nowrap | wrap | wrap-reverse;
grid-row-gap
flex-flow grid-row-gap: <line-size>;
flex-flow: column wrap;
gap shorthand
justify-content gap: <grid-row-gap> <grid-column-gap>;
justify-content: flex-start | flex-end | center | space-between | space-arou
grid-gap shorthand
align-items grid-gap: <grid-row-gap> <grid-column-gap>;
align-items: stretch | flex-start | flex-end | center | baseline | first bas
justify-items
align-content justify-items: start | end | center | stretch;
align-content: flex-start | flex-end | center | space-between | space-around
align-items
Child Properties (flex items) align-items: start | end | center | stretch;
order place-items
order: 5; /* default is 0 */ place-items: center;
justify-content
flex-grow
justify-content: start | end | center | stretch | space-around | space-betwe
flex-grow: 4; /* default 0 */
align-content

5/7 6/7
 CSS CHEAT SHEET
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)
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;

7/7