Css basics

                       Cascading Style Sheet- Basics            

   Cascading style sheet  commonly known as CSS . It is used for

 styling the web pages .  

CSS SELECTORS:

                                 A  CSS Selector selects the Html element  you want to style .

 

most commonly used css selectors are:

            

• simple selectors(it depends upon the class and id )
• attribute selectors(it depends upon the tag in html)

css can be added in three ways :

• external css(using the link to add the css page)
• internal css(In the head tag you can just open the style element add the styles and close the style element)
• inline  css (Within in the body you can add the style tag)

Syntax:

               selector{

                              property :value;

                 }  

eg: 

                 

            p{

     

                       color: black;

                       text-align :center;

              }

css background property :

           The Background property is used to set the background

 for the web pages    

types:

• background-color  
• background-image
• background-repeat 
• background-attachment

 Examples:

background-color  :

      

              h1{

                    background-color  :violet;

                  }

background-image:

       

                   body{

                         

                              background-image: url(''//link//'')

          

                          }

background-repeat :

                      

                       body{

             

                                background-repeat :no-repeat

                              }

background-attachment:

     

                            div{

                                   background-attachment:fixed;

                                }

                                CSS BOX MODEL

           

  Padding:

           

             padding in css is used to create a space around an

 element's content   

four types:

• padding-top
• padding-right
• padding-left
• padding-bottom

examples:

               section{

                               padding-top:2rem;

                               padding-left:2rem;

                               padding-right: 2rem;

                               padding-bottom:2rem;

                        }

you can write this in other way also

    

            section{

                      

                  padding: 2rem 2rem 2rem 2rem

   

                }

Border:

        

           Border in css  is a line that placed inbetween the padding and margin     

Border properties   :

• border-width
• border-radius
• border-style
• border-color

Example:  

                 h1{

                       

                       border-width:5px;

                       border-style:solid;

                       border-color:black;

                 }

you can also write this in other ways also

       

               h1{

   

                   border:5px solid black;

                 }

Margin:

 

             It is outermost layer in the box model . which creates

 space between the border and the web page     .

margin properties:

• margin-top
• margin-left
• margin-right       
• margin-bottom

example:

       

               footer{

        

                            margin-top:2rem;

                            margin-left:2rem;

                            margin-right: 2rem;

                            margin-bottom:2rem;

                       }

you can also write this in other ways also

    

                footer{

                  margin: 2rem 2rem 2rem 2rem

   

               }