CSS Course Hindi - Beginner to Pro ( 2023 ) | Chapter 2

Notes

Background

notion image
Background is used on any element to give it specific color or image.
for example
background-color:red; will used to give red background to any html tag.
we can also apply background image on html elements.
we just need to provide file path of background
background:url(”/path/of/image”);
 
useful background property →
  • background-color → provide background color
  • background-image → provide background image
  • background-size → size of background
  • background-repeat → control background will repeat or not
  • background-attachment → background will fixed or scroll with page scroll
  • background-position → it decides position of background on page
Multiple Background example 

#example1 {
  background-image: url(image1.png), url(image2.png);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}
notion image

Margin

Margins are used to create space around elements, outside of any defined borders.
  • margin-top : 20px;
  • margin-right : 40px;
  • margin-bottom : 40px;
  • margin-left: 20px;
      • notion image
Short hand of margin
  • margin : top right bottom left;
  • margin: top ( right left ) bottom ;
  • margin: ( top bottom ) ( right left );
  • margin: all sides ;

Padding

Padding is used to create space around an element's content, inside of any defined borders.
  • padding-top
  • padding-right
  • padding-bottom
  • padding-left
notion image
Short hand of margin
  • padding : top right bottom left;
  • padding: top ( right left ) bottom ;
  • padding: ( top bottom ) ( right left );
  • padding: all sides ;

Border

border are simple line which surround any elements
border-width:1px;
border-color:red;
border-type: solid;
border-radius : 10px;
border radius responsible roundness of border
Short hand
border: width color type;
 
Border Types Examples
notion image

Outline

outline is another line which is outside of margin .
Same Properties as Border
outline-offset is used to create spacing between border and oultine
notion image

Exercise

Problem 1

<body>
    <!-- Problem: 
     1.Download any image from google. 
     2.Add image as background of page
     3.Image should cover complete width & height of page.
     4.use external styling
    -->
  </body>
 
Output :
You can use any image.
notion image

Problem 2

<body>
    <!-- Problem: 
      1. Create a button, apply following properties
      2. left/right padding -> 12px
      3. Top & bottom padding -> 6px 
      4. background -> #FF00000 & Text -> white // colors
    -->
    <button>Subscribe</button>
  </body>
 
Output :
notion image

Problem 3

<body>
    <!-- use button from chapter 2 -  Problem 2 
        1. Add #ad0000 border with dotted lines  - thickness 2px
        2. also apply outline to button outline thickness 2px ;
        3. outline color -> #ff8c8c - 4px spacing between border and outline
        4. 20px marging from all direction
    -->
    <button class="btn">Subscribe</button>
  </body>
 
Output :
notion image

Problem 4

<body>
    <!-- 
      You need to create oultine version of button from problem 2
      1.Now Create copy of button from problem 2 
      2.Add New button copy on right side of problem 3 button 
      3.Now Check output and try to re-create button your self
      4.Note apply different classname to both button.
    -->
    <button class="solid-btn">Subscribe</button>
    <button class="outline-btn">Subscribe</button>
  </body>
 
Output :
notion image