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;
