Most Practical CSS Cheat Sheet

CSS is a language for designing your website. which you can use to add background, colours, and even transitions or other interactive elements. When you are first learning how to code in CSS a beginner’s essential CSS cheat Sheet could be a big help.

SELECTORS

Universal Selector                       -             * { }

ID Selector                              -             #id { }

Class Selector                           -            .class{ }

Type Selector                            -             h1,h2,h3 { }
 
Adjacent Sibling Selector                -             H1+p{ }

Child Selector                           -             ul>li { }

General Sibling Selector                 -              h1~ p{ }

Descendant Selector                      -              pa{ }

Attribute Selector                       -              div[attribute="Some Value”] { }

PSEUDO SELECTORS & ELEMENTS

Mouse Over Selector		-	  a:hover { }

Active Link Selector		-         a:active { }

Focus Selector   		-  	  input:focus { }

Visited Links Selector		-	  a:visited { }

Link Selector			-         .class:link{ }

Checked elements selector	-         input:checked { } 

Disabled elements selector 	-         input:disabled { }

Enabled elements selector 	-	  input :enabled { }

Not a Specified Element Selector  -       not(p) { }

First Line Selector		  -       p:first-line{ }

First Letter Selector		-         p::first-letter { }

First Child Selector	        -         p:first-child { }

Last Child Selector             -	  p:last-child { }

Only Child Selector	        -         p:only-child { }

nth-child Selector              -         p:nth-child { }

First Element of its Parent     - 	  p:first-of-type { }
Selector

Elements that have no Children  -	  p:empty { }
Selector

Before Element		        -	  class:before { }

After Element 		        -  	  class::after { }
		

POSITION

Position			 -		Position:static|relative|absolute|fixed |sticky				              

Position Properties	         -		top|right|bottom|left

Float Element	                 -              float:left|right|none

clear Floating Elements      	 -		clear:none|left|right|both

Z Index			         -		Z-index 3|auto|inherit 

BACKGROUND

Background Image                 -           background-image: url( )

Background Repeat                -           background-repeat: repeat-x|repeat-y | repeat |                                                           
                                             |space| round|No-repeat

Background Attachment            -           background-attachment: scroll | fixed | local |      
                                             initial inherit

Background Color                 -           background-color: #2AA9EO

Background Position              -           background-position: top | right| bottom | left |  

                                             center

BOX PROPERTIES

Box Sizing                        -                     box-sizing: border-box | content-box
                  
Margin                            -                     margin: 2px 4px 6px 8px | 0 auto

Border Style                      -                     border-style: none | hidden | dotted|
                                                        dashed solid | double|groove|ridge|
                                                                   inset|outset
Border Color                      -                     border-color: #2AA9E0

Padding                           -                     padding: 2px 4px 6px 8px

Border Width                      -                     border-width: 10px

LIST STYLING

List Type                               -                 list-style-type: disc | circle | square|none

List Position                           -                 list-style-position: inside | outside

List Image                              -                 list-style-image: url( )


TEXT STYLING

Font style                             -       font-style: normal | italic oblique

Font Variant                           -       font-variant: normal | small-caps

Font Weight                            -       font-weight: normal|bold|bolder| lighter | 100 - 900

Font Size                              -    font-size: 12px | 0.8em | 80%

Space Between Characters               -    letter-spacing: normal | 4px

Line Height                            -    line-height: normal| 3em | 34%

Horizontal Alignment                   -    text-align: left | right | center| justify

Vertical Alignment                     -    vertical-align: baseline | 10px |sub|super |top | text-      
                                            top|middle|bottom|text-bottom | initial

Text Transform                         -    text-transform: capitalise|lowercase| uppercase

Text Align Last                        -    text-align-last: auto | left | right|center | justify I       
                                            start | end| initial |inherit

Text Decoration                        -    text-decoration: none | underline|overline line-through

 
Indent First Line                      -    text-indent: 25px

Font Family                            -    font-family: 'Open Sans’, sans-serif

Text Justify                           -    text-justify: auto | inter-word|inter-character| none |                               
                                            |initial| inherit

   
Text Overflow                         -     text-overflow: clip | ellipsis | string|initial|inherit

Text Shadow                           -     text-shadow: h-shadow v-shadow blur-radius color |none|          
                                                     | initial | inherit







Leave a Reply

Your email address will not be published.