CSS Master Series Cheatsheet PDF [DOWNLOAD NOW]

Types of CSS 

Inline CSS

<p style="color: red;"> CSS Master Series </p>


Internal CSS

<style>
    p{
       color: red;
    }
</style>


External CSS

<link rel="stylesheet" href="style.css">



Selectors

Universal Selector

* { }


ID Selector

#id{ }


Class

.class{ }


Adjacent Sibling Selector

h4+p{ }


Element Selector

p { }


Group Selector

p, h2, div { }


Child Selector

div > p{ }



Font & Text Styling

Font Family

font-family: 'Courier New', Courier, monospace;


Font Size

font-size: 20px;


Font Weight

font-weight: normal | bold | lighter | inherit | initial | revert | revert-layer | unset;


Line Height

line-height: normal | 1.8rem | 3%;


Word Spacing

word-spacing: normal | 55px | initial | inherit;


Color

color: lightgray | #344354 | #fafaff;


Text Align

text-align: left | right | center | justify;


Text Transform

text-transform: uppercase | lowercase | capitalize;


Text Decoration

text-decoration: overline | underline | line-through;


Letter Spacing

letter-spacing: 20px;


Font Style

font-style: normal | italic | oblique;


Text Indent

text-indent: 32px;


Text Overflow

text-overflow: clip | ellipsis | string | initial | inherit;


Text Shadow

text-shadow: h-shadow v-shadow blur-radius color;



List Styling

List Style Type

list-style-type: circle | square | disc;


List Style Image

list-style-image: url();


List Style Position

list-style-position: inside | outside;


List Style Shorthand

list-style: square inside url();



Units

Pixels

width: 20px;


Percentage

width: 20%;


Millimeter

width: 20mm;


Parent Font Size

width: 20em;


View of Screen's height

height: 20vh;


Centimeter

width: 20cm;


Root em

width: 20rem;


Inches

width: 20in;


1/72in

width: 20pt;


View of Screen's width

width: 20vw;



Position Property

Position

position:  relative | static | absolute | fixed | sticky;


Position Properties

top | right | bottom | left;


Float Element

float: left | right | none;


z-index

z-index: 4;


Cleat Floating

clear: none | both | left | right;



Box Property

Box Sizing

box-sizing: border-box | content-box;


Margin

margin: top | right | bottom | left;


Border Width

border-width: thin | medium | thick | length;


Border Color

border-color: #365boo;


Padding

padding: top | right | bottom | left;



Background

Background Image

background-image: url();


Background Attachment

background-attachment: fixed | scroll | local;


Background Repeat

background-repeat: repeat | repeat-x | repeat-y | no-repeat | round | space;


Background Color

background-color: red;



Flexbox

Display

display: flex;


Flex Wrap

flex-wrap: wrap | nowrap | wrap-reverse;


Align Items

align-items: stretch | center | flex-start | flex-end | baseline;


Flex Direction

flex-direction: row | row-reverse | column | column-reverse;


Justify Content

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;


Align Content

align-content: stretch | center | flex-start | flex-end | space-between | space-around | spacce-evenly;



Flexbox Item Property

Flex Grow

flex-grow: 1;


Align Self

align-self: auto | stretch | center | flex-start | flex-end | baseline;


Flex Shrink

flex-shrink: (1, 2, 3);


Flex Basis

flex-basis: 40px;



Transitions

Transition Shorthand

transition: property duration timing-function delay;


Transition Duration

transition-duration: 5s;


Transition Timing Function

transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int, start | end);


Transition Delay

transition-delay: 4s;



Animation

Animation Shorthand

animation: name duration timing-function iteration-count direction fill-mode;


Animation Name

animation-name: myAnimation;


Animation Timing Function

animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end;


Animation Duration

animation-duration: 3s;

animation-delay: 3s;


Animation Iteration Count

animation-iteration-count: 4;


Animation Direction

animation-direction: normal | reverse | alternate | alternate-reverse;


Animation Play State

animation-play-state: paused | running;

Transform Translate

transform: translate(2px, 3px);


Transform TranslateX

transform: translateX(2px);


Transform TranslateY

transform: translateY(2px);


Transform Scale

transform: scale(1.2);

transform: scaleX(1.2);


Transform ScaleY

transform: scaleY(1.2);


Transform Rotate

transform: rotate(34deg);



Pseudo Elements

Before

::before { }


After

::after { }


First Letter

::first-letter { }


First Line

:first-line { }


Selection

::selection { }


Placeholder

::placeholder { }



Pseudo Classes

Hover

:hover { }


Link

:link { }


Visited

:visited { }


Active

:active { }


First Child

:first-child { }


Last Child

:last-child { }


nth Child

:nth-child(n){ }


nth Last of Type

:nth-last-of-type(n) { }


Only of Type

:only-of-type{ }


First of Type

:first-of-type { }


Last of Type

:last-of-type { }


Empty

:empty { }


Focus

:focus { }


Read Only

:read-only { }


Invalid

:invalid { }


nth Last Child

:nth-last-child(n) { }


nth of Type

:nth-of-type(n) { }


Checked

:checked { }


Disabled

:disabled { }


Enabled

:enabled { }


Required

:required { }


Optional 

:optional { }


Valid

:valid { }


Root

:root { }


Media Query

@media screen and(min-width:500px) and (max-width: 900px) { }



Grid Layout

Display Grid

display: grid;


Grid Template Columns

grid-template-columns: 200px auto 400px;


Grid Template Rows

grid-template-rows: 80px 100px;


Align Content

align-content: space-around;


Justify Content

justify-content: center;


Grid Row Gap

grid-row-gap: auto;


Grid Column Gap

grid-column-gap: 30px;


Grid Gap

grid-gap: 30px;



Grid Items

Grid Row Start

grid-row-start: auto | row-line;


Grid Row End

grid-row-end: auto | row-line | span n;


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 Column

grid-column: <start-line> / <end-line> | <start-line> / span <value>;


Justify Self

justify-self: start | end | center | stretch;


Align Self

align-self: auto | stretch | center | flex-start | flex-end | baseline | initial | inherit;


CSS Master Series Cheatsheet PDF

Download Now

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad