8/31/23, 1:39 PM CSS Cheat Sheet

Thanks for trying out Immersive Reader. Share your feedback with us.

CSS Cheat Sheet

CSS Introduction :

CSS stands for Cascading Style Sheets. It is used to style HTML pages. CSS determines how
HTML elements will be displayed on the screen. CSS files end with .css extension. Using CSS, you
can control the look and feel of the whole website with just one CSS file. In this post, I have tried
to write a cheat sheet for all important CSS properties along with their possible values. You can
download this cheat sheet and refer whenever required.

(Click on image to enlarge)

CSS Syntax :

Selector { Property1 : Value1; Property2 : Value2; … }

CSS syntax consists of a selector and a declaration block where Selector is an HTML element
which you want to style. Declaration block must be enclosed within { }. Declaration block contains
many declaration statements separated by semicolon(;). Each declaration statement contains a CSS
property and a value separated by a colon(:).

CSS Selectors :

CSS selectors are the HTML elements which you want to style. There are different ways to select
an HTML element in CSS. Below table describes the same.

CSS Example Example

Selectors Description

Name p{} Selects all <p>

Selector elements.

ID Selector #myID { } Selects all elements

with id=”myID”

Class .myClass { } Selects the elements

Selector with
class=”myClass”

Universal *{} Selects all elements.

Selector

Group p, div, span { } Selects all <p>,

Selector <div> and <span>
read://https_javaconceptoftheday.com/?url=https%3A%2F%2Fjavaconceptoftheday.com%2Fcss-cheat-sheet%2F 1/19
8/31/23, 1:39 PM CSS Cheat Sheet

elements

Descendant div a { } Selects all <a>

Selector elements inside
<div>

Child div > a { } Selects <a> elements

Selector which are direct
children of <div>

General div ~ a { } Selects all <a>

Sibling elements which are
Selector siblings of <div>

Adjacent div + a { } Selects <a> which

Sibling come after <div>
Selector

Pseudo ::after, ::before, ::first-letter, ::first-line, ::marker, These are used to

Element ::selection select and style a part
Selectors of an element.

Pseudo Class :active, :focus, :hover, :link, :visited, :target, :checked, It selects the
Selectors :disabled, :enabled, :empty, :first-child, :last-child, elements based on
:only-child, :first-of-type, :last-of-type, :invalid, their state.
:not(selector), :nth-child(n), :nth-last-child(n), :nth-of-
type(n), :nth-last-of-type(n), :in-range, :out-of-range,
:required, :optional, :read-only, :read-write

Attribute [attribute], It selects the

Selectors [attribute=value], [attribute~=value], elements based on
[attribute|=value], [attribute^=value], attribute and value.
[attribute$=value], [attribute*=value]

CSS Insertion :

There are three ways you can link CSS with an HTML document.

Type Of Description Example

Link

External Linking external CSS file with an <link rel=”stylesheet” href=”style.css”>

CSS HTML file using <link> tag.

Internal Defining page specific style using <style>

CSS <style> element within an HTML body {color: black;}
page.

read://https_javaconceptoftheday.com/?url=https%3A%2F%2Fjavaconceptoftheday.com%2Fcss-cheat-sheet%2F 2/19
8/31/23, 1:39 PM CSS Cheat Sheet

h1 {color: red;}
</style>

Inline CSS Defining element specific style using <p style=”color:black;”>Inline

style attribute of an HTML element. CSS</p>

CSS Comments :

CSS comments start with /* and ends with */.

<style>
p {
color: black; /* Single Line Comment */
/*Multi
Line
Comment */
background-color: white;
}
</style>

CSS Backgrounds :

CSS background properties are used to add background effects to an HTML element.

Property Values Description

background- color | transparent | initial | inherit It specifies background color of

color an element.

background- URL | none | initial | inherit It is used to apply an image as a

image background to an element.

background- repeat | repeat-x | repeat-y | no-repeat | This property specifies how

repeat initial | inherit background image should be
repeated.

background- left top | left center | left bottom | right It specifies starting position of a
position top | right center | right bottom | center background image.
top | center center | center bottom | x%
y% | xpos ypos | initial | inherit

background- scroll | fixed | local | initial | inherit This property specifies whether
attachment the background image is fixed or
scrolls with the rest of the page.

background- auto | length | cover | contain | initial | It specifies the size of the
size inherit background image.

background- border-box | padding-box | content-box | It specifies how far the

clip initial | inherit background color or background

read://https_javaconceptoftheday.com/?url=https%3A%2F%2Fjavaconceptoftheday.com%2Fcss-cheat-sheet%2F 3/19
8/31/23, 1:39 PM CSS Cheat Sheet

image should extend within an

element

background- padding-box | border-box | content-box | It defines origin position of a

origin initial | inherit background image.

background- normal | multiply | screen | overlay | It defines the blending mode of

blend-mode darken | lighten | color-dodge | saturation each background layer.
| color | luminosity

background bg-color bg-image position/bg-size bg- It is a shorthand property for all

repeat bg-origin bg-clip bg- background properties. Using this
attachment initial | inherit property, you can specify all
background properties in one
line.

CSS Borders :

CSS border properties are used to define style for an element’s border.

Property Values Description

border-style dotted | dashed | solid | double | It defines the style for all four borders
groove | ridge | inset | outset | hidden of an element.
| none | inherit | initial

border-top- dotted | dashed | solid | double | It defines the style for top border of
style groove | ridge | inset | outset | hidden an element.
| none | inherit | initial

border- dotted | dashed | solid | double | It defines the style for bottom border
bottom-style groove | ridge | inset | outset | hidden of an element.
| none | inherit | initial

border-left- dotted | dashed | solid | double | It defines the style for left border of
style groove | ridge | inset | outset | hidden an element.
| none | inherit | initial

border-right- dotted | dashed | solid | double | It defines the style for right border of
style groove | ridge | inset | outset | hidden an element.
| none | inherit | initial

border-width medium | thick | thin | length | initial It specifies the width of all four
| inherit borders of an element.

border-top- medium | thick | thin | length | initial It specifies the width of top border of
width | inherit an element.

read://https_javaconceptoftheday.com/?url=https%3A%2F%2Fjavaconceptoftheday.com%2Fcss-cheat-sheet%2F 4/19
8/31/23, 1:39 PM CSS Cheat Sheet

border- medium | thick | thin | length | initial It specifies the width of bottom
bottom-width | inherit border of an element.

border-left- medium | thick | thin | length | initial It specifies the width of left border of
width | inherit an element.

border-right- medium | thick | thin | length | initial It specifies the width of right border
width | inherit of an element.

border-color color | transparent | initial | inherit It sets the color for all four borders of
an element.

border-top- color | transparent | initial | inherit It sets the color for top border of an
color element.

border- color | transparent | initial | inherit It sets the color for bottom border of
bottom-color an element.

border-left- color | transparent | initial | inherit It sets the color for left border of an
color element.

border-right- color | transparent | initial | inherit It sets the color for right border of an
color element.

border-radius length | % | initial | inherit It applies rounded corners to an

element.

border-top- length | % | initial | inherit It makes top left corner of an element

left-radius rounded.

border-top- length | % | initial | inherit It makes top right corner of an

right-radius element rounded.

border- length | % | initial | inherit It makes bottom left corner of an

bottom-left- element rounded.
radius

border- length | % | initial | inherit It makes bottom right corner of an

bottom-right- element rounded.
radius

border-image source slice width outset repeat | It specifies an image to be used as a

initial | inherit border for an element.

border-image- none | URL | initial | inherit It specifies path to an image to be

source used as a border of an element.

border-image- length | % | auto | initial | inherit It specifies the width of a border

read://https_javaconceptoftheday.com/?url=https%3A%2F%2Fjavaconceptoftheday.com%2Fcss-cheat-sheet%2F 5/19
8/31/23, 1:39 PM CSS Cheat Sheet

width image.

border-image- stretch | repeat | round | space | initial It specifies whether the border image
repeat | inherit of an element should be repeated or
stretched or rounded.

border-image- number | % | fill | initial | inherit It specifies how to slice the border
slice image.

border-image- length | number | initial | inherit This property sets outset of a border
outset image.

border border-width border-style border- It is a shorthand property for border-

color | initial | inherit style, border-width and border-color.

border-bottom border-width border-style border- It is a shorthand property for border-

color | initial | inherit bottom-style, border-bottom-width
and border-bottom-color.

border-top border-width border-style border- It is a shorthand property for border-

color | initial | inherit top-style, border-top-width and
border-top-color.

border-left border-width border-style border- It is a shorthand property for border-

color | initial | inherit left-style, border-left-width and
border-left-color.

border-right border-width border-style border- It is a shorthand property for border-

color | initial | inherit right-style, border-right-width and
border-right-color.

CSS Margins :

CSS margin properties are used to apply space around HTML elements. Margin is the space around
an element outside its border.

Property Values Description

margin length | auto | initial It used to set margin of an element around all sides –
| inherit top, bottom, left and right.

margin-top length | auto | initial It sets top margin of an element.

| inherit

margin- length | auto | initial It sets bottom margin of an element.

bottom | inherit

read://https_javaconceptoftheday.com/?url=https%3A%2F%2Fjavaconceptoftheday.com%2Fcss-cheat-sheet%2F 6/19
8/31/23, 1:39 PM CSS Cheat Sheet

margin-left length | auto | initial It sets left margin of an element.

| inherit

margin-right length | auto | initial It sets right margin of an element.

| inherit

CSS Padding :

CSS padding properties apply space between content of an HTML element and it’s border. Padding
is the space around the content of an element inside its border.

Property Values Description

padding-top length | It sets top padding of an element.

initial |
inherit

padding- length | It sets bottom padding of an element.

bottom initial |
inherit

padding-left length | It sets left padding of an element.

initial |
inherit

padding- length | It sets right padding of an element.

right initial |
inherit

padding length | It sets padding at all sides of an element. It is a shorthand

initial | property for setting top, bottom, left and right padding in one
inherit statement.

CSS Dimensions :

CSS dimension properties are used to set the height and width of an element.

Property Value Description

height auto | length | % | initial | inherit It sets height of an element.

width auto | length | % | initial | inherit It sets width of an element.

max-height none | length | % | initial | inherit It sets maximum height of an element.

max-width none | length | % | initial | inherit It sets maximum width of an element.

read://https_javaconceptoftheday.com/?url=https%3A%2F%2Fjavaconceptoftheday.com%2Fcss-cheat-sheet%2F 7/19
8/31/23, 1:39 PM CSS Cheat Sheet

min-height length | % | initial | inherit It sets minimum height of an element.

min-width length | % | initial | inherit It sets minimum width of an element.

CSS Shadow :

These properties are used to add shadow effect to an element.

Property Value Description

box- none | h-offset v-offset blur spread color | inset | It adds shadow effect to an
shadow initial | inherit element.

text- h-shadow v-shadow blur-radius color | none | It adds shadow effect to the
shadow initial | inherit text.

CSS Overflow :

These properties specify what to do when an element’s content is overflowed.

Property Value Description

overflow visible | hidden | clip | This property specifies what should happen when
scroll | auto | initial | an element’s content is too big to fit in the specified
inherit area.

overflow-x visible | hidden | scroll | It specifies what to do with the left/right edges of
auto | initial | inherit the content if it overflows the element’s specified
area

overflow-y visible | hidden | scroll | It specifies what to do with the top/bottom edges of
auto | initial | inherit the content if it overflows the element’s content
area.

overflow- normal | anywhere | It specifies whether or not the browser can break
wrap break-word | initial | lines with long words, if they overflow element’s
inherit container

CSS Outline :

CSS outline properties define outline drawn outside the border of an element.

Property Value Description

outline- dotted | dashed | solid | double | groove | It defines style for outline of an
style ridge | inset | outset | hidden | none | initial element.
read://https_javaconceptoftheday.com/?url=https%3A%2F%2Fjavaconceptoftheday.com%2Fcss-cheat-sheet%2F 8/19
8/31/23, 1:39 PM CSS Cheat Sheet

| inherit

outline- invert | color | initial | inherit It specifies color for an outline.

color

outline- medium | thick | thin | length | initial | It specifies width of an outline of

width inherit an element.

outline- length | initial | inherit This property adds space between

offset outline and the border of an
element.

outline outline-width outline-style outline-color | It is a shorthand property for

initial | inherit outline-style, outline-color and
outline-width.

CSS Text :

CSS text properties are used to style text of an HTML file.

Property Value Description

color color | initial | inherit It defines the color of a text.

font-family family-name | generic-family | It specifies the font family for a text.

initial | inherit

font-size medium | xx-small | x-small | It specifies font size of a text.

small | large | x-large | xx-large |
smaller | larger | length | initial |
inherit

font-size- number | none | initial | inherit It specifies the font-size adjustment when
adjust the selected font-size is not available.

font-stretch ultra-condensed | extra- It makes the text narrower or wider.

condensed | condensed | semi-
condensed | normal | semi-
expanded | expanded | extra-
expanded | ultra-expanded |
initial | inherit

font-style normal | italic | oblique | initial | It specifies font style for a text.
inherit

font-variant normal | small-caps | initial | It applies font variation to a text.

inherit

read://https_javaconceptoftheday.com/?url=https%3A%2F%2Fjavaconceptoftheday.com%2Fcss-cheat-sheet%2F 9/19
8/31/23, 1:39 PM CSS Cheat Sheet

font-weight normal | bold | bolder | lighter | It specifies font weight of a text.

number | initial | inherit

font font-style font-variant font- It is a shorthand property for all font

weight font-size/line-height font- related properties.
family | caption | icon | menu |
message-box | small-caption |
status-bar | initial | inherit

text-align left | right | center | justify | initial This property horizontally aligns the text.
| inherit

vertical-align baseline | length | sub | super | top It specifies vertical alignment of not only
| text-top | middle | bottom | text- text but any element.
bottom | initial | inherit

text-align- auto | left | right | center | justify | It specifies horizontal alignment for last
last start | end | initial | inherit line.

direction ltr | rtl | initial | inherit It sets writing direction of a text.

text- none | underline | overline | line- It specifies the text decoration like
decoration- through | initial | inherit underline, overline or line-thorugh.
line

text- solid | double | dotted | dashed | It specifies the style for text decoration
decoration- wavy | initial | inherit line.
style

text- color | initial | inherit It specifies the color for text decoration
decoration- line.
color

text- auto | from-font | length | It specifies the thickness for text

decoration- percentage | initial | inherit decoration line.
thickness

text- text-decoration-line text- It is a shorthand property for text-

decoration decoration-color text-decoration- decoration-line, text-decoration-
style text-decoration-thickness | color, text-decoration-style and text-
initial | inherit decoration-thickness i.e using this
property, you can specify all these
properties in a single line declaration.

text- none | capitalize | uppercase | It defines uppercase or lowercase of a text.

transform lowercase | initial | inherit

text-indent length | initial | inherit It specifies indentation for first line in a

read://https_javaconceptoftheday.com/?url=https%3A%2F%2Fjavaconceptoftheday.com%2Fcss-cheat-sheet%2F 10/19
8/31/23, 1:39 PM CSS Cheat Sheet

text block.

line-height normal | number | length | initial | It specifies height of a line.

inherit

letter- normal | length | initial | inherit It adds the space between characters of a
spacing text.

word- normal | length | initial | inherit It adds the space between words of a text
spacing block.

white-space normal | nowrap | pre | pre-line | It specifies how to handle the white spaces
pre-wrap | initial | inherit in a text.

text-shadow h-shadow v-shadow blur-radius It adds the shadow effect to the text.
color | none | initial | inherit

word-break normal | break-all | keep-all | It specifies how words should break at the
break-word | initial | inherit end of a line.

word-wrap normal | break-word | initial | It specifies how long words to be broken

inherit and wrap onto the next line.

writing- horizontal-tb | vertical-rl | It specifies how lines of text are laid out.
mode vertical-lr

text- clip | ellipsis | string | initial | It specifies what to do with overflowed

overflow inherit text.

text-justify auto | inter-word | inter-character It specifies how to justify the text.

| none | initial | inherit

CSS Lists :

CSS list properties are used to style ordered and unordered lists.

Property Value Description

list-style- disc | circle | square | decimal | decimal-leading-zero | It specifies the list item
type georgian | hebrew | hiragana | hiragana-iroha | katakana marker in a list.
| katakana-iroha | lower-alpha | lower-greek | lower-
latin | lower-roman | upper-alpha | upper-greek | upper-
latin | upper-roman | armenian | none | initial | inherit

list-style- none | url | initial | inherit It specifies an image as

image a list item marker.

read://https_javaconceptoftheday.com/?url=https%3A%2F%2Fjavaconceptoftheday.com%2Fcss-cheat-sheet%2F 11/19
8/31/23, 1:39 PM CSS Cheat Sheet

list-style- inside | outside | initial | inherit It sets the position of a

position list-item marker.

list-style list-style-type list-style-position list-style-image | It is a shorthand

initial | inherit property for list-style-
type, list-style-image
and list-style-position.

CSS Table :

These properties are used to decorate a table.

Property Value Description

table-layout auto | fixed | initial | It specifies layout for table cells, rows and columns.
inherit

caption-side top | bottom | initial | It specifies the placement for table caption.
inherit

empty-cells show | hide | initial | It specifies whether hide or show the borders of the
inherit empty cells of a table.

border- length | initial | inherit It adds the space between the borders of adjacent cells
spacing of a table.

border- separate | collapse | It sets whether the table cell borders should be
collapse initial | inherit collapsed into single border or be separated.

CSS Visibility :

These properties control the visibility of an element.

Property Value Description

visibility visible | hidden | collapse | initial | inherit It specifies visibility of

an element.

display inline | block | grid | contents | flex | inline-block | It specifies display

inline-flex | inline-grid | inline-table | list-item | run-in | behavior of an element.
table | none | initial | inherit

CSS Positions :

These properties are used to position an element.

read://https_javaconceptoftheday.com/?url=https%3A%2F%2Fjavaconceptoftheday.com%2Fcss-cheat-sheet%2F 12/19
8/31/23, 1:39 PM CSS Cheat Sheet

Property Value Description

position static | absolute | fixed | relative | It specifies how to position an element.

sticky | initial | inherit

top auto | length | % | initial | inherit It sets top margin for the positioned
element.

bottom auto | length | % | initial | inherit It sets bottom margin for the positioned
element.

left auto | length | % | initial | inherit It sets left margin for the positioned
element.

right auto | length | % | initial | inherit It sets right margin for the positioned
element.

float none | left | right | initial | inherit This property specifies how to float an
element.

clear none | left | right | both | initial | It controls the flow next to floated
inherit elements.

clip auto | shape | initial | inherit It is used to clip absolutely positioned

overflowed element.

z-index auto | number | initial | inherit It specifies stack order of an element.

CSS Columns :

Property Values Description

column- number | auto | initial | inherit It specifies the number of columns

count an element should be divided into.

column-gap length | normal | initial | inherit It specifies the gap between the
columns.

column- auto | length | initial | inherit It specifies the width of a column.

width

column-span none | all | initial | inherit It specifies how many columns a

particular element should span
across.

column-fill balance | auto | initial | inherit It specifies how to file the columns.

read://https_javaconceptoftheday.com/?url=https%3A%2F%2Fjavaconceptoftheday.com%2Fcss-cheat-sheet%2F 13/19
8/31/23, 1:39 PM CSS Cheat Sheet

column-rule- none | hidden | dotted | dashed | solid | It specifies the style of a rule
style double | groove | ridge | inset | outset | between the columns.
initial | inherit

column-rule- color | initial | inherit It specifies the color for the column
color rule.

column-rule- medium | thin | thick | length | initial | It specifies the width for the
width inherit column rule.

column-rule column-rule-width column-rule-style It is a shorthand property for

column-rule-color | initial | inherit column rule properties.

columns auto | column-width column-count | It is a shorthand property for

initial | inherit column-width and column-count.

CSS Flexible Elements :

These properties are related to flexible HTML elements.

Property Value Description

order number | initial | inherit It specifies order for flexible

items within the same container.

flex-basis number | auto | initial | inherit It specifies initial length of a

flexible item.

flex-grow number | initial | inherit It specifies how much a flex item

can grow within a container.

flex-shrink number | initial | inherit It specifies how much a flex item

can shrink within a container.

flex-wrap nowrap | wrap | wrap-reverse | initial | inherit It specifies whether the flexible
items should wrap or not.

flex- row | row-reverse | column | column-reverse It specifies the direction for

direction | initial | inherit flexible items within a container.

flex-flow flex-direction flex-wrap | initial | inherit It is a shorthand property for

flex-direction and flex-wrap
properties.

flex flex-grow flex-shrink flex-basis | auto | It is a shorthand property for

initial | inherit flex-grow, flex-shrink and flex-
basis.

read://https_javaconceptoftheday.com/?url=https%3A%2F%2Fjavaconceptoftheday.com%2Fcss-cheat-sheet%2F 14/19
8/31/23, 1:39 PM CSS Cheat Sheet

align- stretch | center | flex-start | flex-end | space- It is used to align flexible lines
content between | space-around | space-evenly | inside a flexible container.
initial | inherit

align-items stretch | center | flex-start | flex-end | It is used to align flexible items

baseline | initial | inherit inside a flexible container.

align-self auto | stretch | center | flex-start | flex-end | It is used to align selected item
baseline | initial | inherit inside a flexible container.

justify- flex-start | flex-end | center | space-between | It auto-aligns the flexible items

content space-around | space-evenly | initial | inherit inside a flexible container.

CSS Transitions :

These properties are used to apply transition effects to an element.

Property Value Description

transition- none | all | property | initial | inherit It specifies the CSS property
property for which transition effect
will takes place.

transition- time | initial | inherit It specifies the duration of

duration transition.

transition- time | initial | inherit It specifies when the

delay transition effects will start.

transition- linear | ease | ease-in | ease-out | ease-in-out | It specifies the speed curve
timing- step-start | step-end | steps(int,start | end) | of the transition effect.
function cubic-bezier(n,n,n,n) | initial | inherit

transition property duration timing-function delay | It is a shorthand property for

initial | inherit all transition related
properties.

CSS 2D / 3D :

Property Value Description

transform none | transform- It applies 2D or 3D transformation to an element.

functions | initial | inherit

transform- x-axis y-axis z-axis | It allows you to change the position of

origin initial | inherit transformed elements.

read://https_javaconceptoftheday.com/?url=https%3A%2F%2Fjavaconceptoftheday.com%2Fcss-cheat-sheet%2F 15/19
8/31/23, 1:39 PM CSS Cheat Sheet

transform- flat | preserve-3d | initial It specifies how nested elements are rendered in
style | inherit 3D space.

perspective length | none This property is used to give some perspective to

3D positioned element.

perspective- x-axis y-axis | initial | It is used to specify bottom position of 3D

origin inherit elements.

backface- visible | hidden | initial | It specifies whether back face of an element

visibility inherit should be visible or not when facing the user.

CSS Animation :

Property Values Description

animation- keyframename | none | initial | inherit It sets the name for

name animation.

animation- time | initial | inherit It specifies time duration of

duration an animation.

animation- time | initial | inherit This property specifies time

delay delay for the start of an
animation.

animation- normal | reverse | alternate | alternate-reverse It specifies how an animation

direction | initial | inherit should play – forward or
backward or alternate.

animation- number | infinite | initial | inherit It specifies how many times

iteration-count an animation should be
played.

animation- paused | running | initial | inherit It specifies whether an

play-state animation is running or
paused.

animation-fill- none | forwards | backwards | both | initial | It specifies the style when an
mode inherit animation is not playing.

animation- linear | ease | ease-in | ease-out | ease-in-out | It specifies speed curve of an

timing- step-start | step-end | steps(int,start|end) | animation.
function cubic-bezier(n,n,n,n) | initial | inherit

animation name duration timing-function delay It is a shorthand property for

iteration-count direction fill-mode play-state animation properties.

read://https_javaconceptoftheday.com/?url=https%3A%2F%2Fjavaconceptoftheday.com%2Fcss-cheat-sheet%2F 16/19
8/31/23, 1:39 PM CSS Cheat Sheet

CSS Grid :

Property Value Description

row-gap length | normal | initial | inherit It specifies the gap between the
rows of a grid.

column- length | normal | initial | inherit It specifies the gap between the
gap columns of a grid.

gap row-gap column-gap It is a shorthand property for row-

gap and column-gap.

grid-row- auto | row-line It specifies on which row to start

start displaying grid item.

grid-row- auto | row-line | span n It specifies on which row grid item

end will end.

grid-row- length It specifies the gap between the

gap rows of a grid layout.

grid-row grid-row-start | grid-row-end It is a shorthand property for grid-

row-start and grid-row-end.

grid- auto | span n | column-line It specifies on which column to

column- start displaying grid items.
start

grid- auto | span n | column-line It specifies on which column grid

column- items will end.
end

grid- length It specifies the gap between the

column- columns of a grid layout.
gap

grid- grid-column-start / grid-column-end It is a shorthand property for grid-

column column-start and grid-column-end.

grid-gap grid-row-gap grid-column-gap It is a shorthand property for grid-

row-gap and grid-column-gap.

grid-area grid-row-start / grid-column-start / grid- It is a shorthand property for grid-

row-end / grid-column-end | itemname row-start, grid-column-start, grid-
row-end and grid-column-end. You
can also use it to name a grid item.

read://https_javaconceptoftheday.com/?url=https%3A%2F%2Fjavaconceptoftheday.com%2Fcss-cheat-sheet%2F 17/19
8/31/23, 1:39 PM CSS Cheat Sheet

grid-auto- auto | max-content | min-content | length It sets the default row size of a
rows grid layout.

grid-auto- auto | max-content | min-content | length It sets default column size.

columns

grid-auto- row | column | dense | row dense | column It specifies how auto placed items
flow dense will be inserted in the grid.

grid- none | auto | max-content | min-content | It specifies height and number of

template- length | initial | inherit rows in a grid layout.
rows

grid- none | auto | max-content | min-content | It specifies width and number of

template- length | initial | inherit columns in a grid layout.
columns

grid- none | itemnames It specifies how to display grids

template- using grid names.
areas

grid- none | grid-template-rows / grid-template- It si a shorthand property for grid-

template columns | grid-template-areas | initial | template-rows, grid-template-
inherit columns and grid-template-areas
properties.

grid none | grid-template-rows / grid-template- It is a shorthand property for grid-

columns | grid-template-areas | grid- template-rows, grid-template-
template-rows / [grid-auto-flow] grid-auto- columns, grid-template-areas,
columns | [grid-auto-flow] grid-auto- grid-auto-rows, grid-auto-columns,
rows / grid-template-columns | initial | and the grid-auto-flow prpoperties.
inherit

CSS Miscellaneous :

Property Values Description

all Initial | inherit | unset It is used to reset all properties to

their initial or inherited value.

box-sizing content-box | border-box | initial | inherit It defines how the width and height
of an element are calculated – should
they include padding and borders, or
not.

break-after auto | all | always | avoid | avoid-column It handles the page break, column
| avoid-page | avoid-region | column | break, or region break after the

read://https_javaconceptoftheday.com/?url=https%3A%2F%2Fjavaconceptoftheday.com%2Fcss-cheat-sheet%2F 18/19
8/31/23, 1:39 PM CSS Cheat Sheet

left | page | recto | region | right | verso | specified element.

initial | inherit

break- auto | all | always | avoid | avoid-column It handles the page break, column
before | avoid-page | avoid-region | column | break, or region break before the
left | page | recto | region | right | verso | specified element.
initial | inherit

break- auto | all | always | avoid | avoid-column It handles the page break, column
inside | avoid-page | avoid-region | column | break, or region break inside the
left | page | recto | region | right | verso | specified element.
initial | inherit

image- auto | smooth | high-quality | crisp-edges It specifies the type of algorithm to

rendering | pixelated | initial | inherit be used for image rendering.

object-fit fill | contain | cover | scale-down | none | It specifies how an element (<img>
initial | inherit or <video>) should be resized to fit
into its container.

object- left | center | right | length | % | initial | It is used along with object-fit to
position inherit position an element (<img> or
<video>).

opacity number | initial | inherit It sets the opacity level of an element.

resize none | both | horizontal | vertical | initial It sets re-sizable property of an

| inherit element.

tab-size number | length | initial | inherit It specifies the width of a tab

character.

user-select auto | none | text | all It sets whether the text of an element
can be selected or not.

white- normal | nowrap | pre | pre-line | pre- It specifies how white-space inside an
space wrap | initial | inherit element is handled.

Also Read :

HTML Cheat Sheet

CSS Reference

read://https_javaconceptoftheday.com/?url=https%3A%2F%2Fjavaconceptoftheday.com%2Fcss-cheat-sheet%2F 19/19