CSS Cheatsheet
Font
There are many properties related to the font, such as the face, weight, style, etc. These properties all
to change the style or complete look of your text.
Font-Family
Font-Style
Font-Variant
Font-Weight
Font-Size
CSS Cheatsheet - CodeWithHarry https://www.codewithharry.com/blogpost/css-cheatsheet
Letter-Spacing
letter-spacing: .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;
Background
As the name suggests, these properties are related to background, i.e., you can change the color, ima
position, size, etc., of the document.
Background-Image
2 of 14 23-07-2021, 08:41
CSS Cheatsheet - CodeWithHarry https://www.codewithharry.com/blogpost/css-cheatsheet
background-repeat: no-repeat;
Background-Attachment
background-attachment: scroll;
Background-Color
background-color: fuchsia;
Background
background: color image repeat attachment position;
Border
Border properties are used to change the style, radius, color, etc., of buttons or other items of the docu
Border-Width
border-width: 5px;
Border-Style
border-style: solid;
Border-Color
border-color: aqua;
3 of 14 23-07-2021, 08:41
CSS Cheatsheet - CodeWithHarry https://www.codewithharry.com/blogpost/css-cheatsheet
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
4 of 14 23-07-2021, 08:41
CSS Cheatsheet - CodeWithHarry https://www.codewithharry.com/blogpost/css-cheatsheet
opacity: 4;
Template Layout
Specifies the visual look of the content inside a template
Box-Align
box-align : start;
Box-Direction
box-direction : normal;
Box-Flex
box-flex : normal;
Box-Flex-Group
box-flex-group : 2;
Box-Orient
5 of 14 23-07-2021, 08:41
CSS Cheatsheet - CodeWithHarry https://www.codewithharry.com/blogpost/css-cheatsheet
max-width: 800px;
min-width
min-width: 500px;
max-height
max-height: 100px;
min-height
min-height: 80px;
Table
Table properties are used to give style to the tables in the document. You can change many things like
spacing, table layout, caption, etc.
Border-Collapse
border-collapse: separate;
Empty-Cells
empty-cells: show;
Border-Spacing
border-spacing 2px
6 of 14 23-07-2021, 08:41
CSS Cheatsheet - CodeWithHarry https://www.codewithharry.com/blogpost/css-cheatsheet
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;
7 of 14 23-07-2021, 08:41
CSS Cheatsheet - CodeWithHarry https://www.codewithharry.com/blogpost/css-cheatsheet
list-style-position : 20px;
List-style-image
list-style-image : url(�image.gif�);
Marker-offset
marker-offset : auto;
Animations
CSS animations allow one to animate transitions or other media files on the web page.
Animation-name
animation-name : myanimation;
Animation-duration
animation-duration : 10s;
Animation-timing-function
animation-timing-function : ease;
Animation-delay
animation-delay : 5ms;
8 of 14 23-07-2021, 08:41
CSS Cheatsheet - CodeWithHarry https://www.codewithharry.com/blogpost/css-cheatsheet
animation-fill-mode : both;
Transitions
Transitions let you define the transition between two states of an element.
Transition-property
transition-property: none;
Transition-duration
transition-duration : 2s;
Transition-timing-function
transition-timing-function: ease-in-out;
Transition-delay
transition-delay : 20ms;
CSS Flexbox
9 of 14 23-07-2021, 08:41
CSS Cheatsheet - CodeWithHarry https://www.codewithharry.com/blogpost/css-cheatsheet
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 | first baseline
align-content
align-content: flex-start | flex-end | center | space-between | space-around | sp
Child Properties (flex items)
order
order: 5; /* default is 0 */
flex-grow
flex-grow: 4; /* default 0 */
10 of 14 23-07-2021, 08:41
CSS Cheatsheet - CodeWithHarry https://www.codewithharry.com/blogpost/css-cheatsheet
align-self: auto | flex-start | flex-end | center | baseline | stretch
CSS Grid
Grid layout is a 2-Dimensional grid system to CSS that creates complex responsive web design layou
easily and consistently across browsers.
Parent Properties (Grid container)
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>;
11 of 14 23-07-2021, 08:41
CSS Cheatsheet - CodeWithHarry https://www.codewithharry.com/blogpost/css-cheatsheet
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 | sp
place-content
place-content <align-content> / <justify-content>
12 of 14 23-07-2021, 08:41
CSS Cheatsheet - CodeWithHarry https://www.codewithharry.com/blogpost/css-cheatsheet
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
13 of 14 23-07-2021, 08:41
CSS Cheatsheet - CodeWithHarry https://www.codewithharry.com/blogpost/css-cheatsheet
align-self: start | end | center | stretch;
place-self
place-self: center;
You need to be logged in to post a comment!
Comments
No comments to display. Be the first person to post a comment!
Copyright © 2020-2021 CodeWithHarry.com
14 of 14 23-07-2021, 08:41
