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

Notes

Background

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;
}

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;

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

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

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

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.

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 :

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 :

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 :

CSS Course / Tutorials in Hindi 2023 - CSS 2023 | CSS Tutorials in Hindi

Learn CSS by doing practice question.

Video Chapters
00:00 2.1 Introduction
00:30 2.2 Background
12:46 2.3 Margin + Padding
21:35  2.4 Border + Outline
26:08  2.5 Questions
27:51  2.6 Solutions


Notion Notes  - https://alkaline-olivine-4e5.notion.site/Chapter-2-4b82a45176f04b23b3417b40e5068816

Github Repo - https://github.com/anshuopinion/CSS-Course

Linkedin -  https://linkedin.com/in/anshuopinion
Telegram Channel -  https://telegram.me/dosomecodinghelp
Instagram - https://instagram.com/dosomecoding
Github - https://github.com/anshuopinion