CSS Box-Model

 Css Box-Model :-

It consists of :- Margin, border, padding and the actual content. 

1.CSS box-model:- Css box-model is a fundamental concepts that defines structure of a web element's layout.

# Every element on webpage is considered a box.

Css box-model components layout:-

1.Content :- It is the actual content of the elements ,such as a text or image.
  
2. Padding :- Padding is the space between the content and border.It is used to create space around the content inside the elements.

3. Border :- A line that surrounds padding and content.It is the area between margin and padding.

4. Margin :- Margin is the outermost space around the element. Margin is the space between element's border and neighbouring element.




Coding :-

<html>
 <head>
 <style type="text/css">
    .king
      {
         background-color:skyblue;
         width:270px;
         border:solid 8px green;
          padding:15px;
         text-align:justify;
         margin:15px;
       }
  </style>
<title></title>
</head>
<body>
 <div class="king"> Video provides a powerful way to help prove your point. When you click Online Video, you can paste in the embed code for the video you want to add. You can also type a keyword to search online for the video that best fits your document.
To make your document look professionally produced, Word provides header, footer, cover page and text box designs that complement each other. For example, you can add a matching cover page, header and sidebar. Click Insert, then choose the elements you want from the different galleries.
Themes and styles also help to keep your document coordinated. 
</div>
</body>
</html>


Output is :-





 By hover effects :-
Coding :-

<html>
 <head>
 <style type="text/css">
    .king
      {
         background-color:skyblue;
         width:270px;
         border:solid 8px green;
          padding:15px;
         text-align:justify;
         margin:15px;
       }
        .king:hover
       {
         background-color:orange;
         color:white;
        border:solid 8px red;
       }
</style>
<title></title>
</head>
<body>
 <div class="king"> Video provides a powerful way to help prove your point. When you click Online Video, you can paste in the embed code for the video you want to add. You can also type a keyword to search online for the video that best fits your document.
To make your document look professionally produced, Word provides header, footer, cover page and text box designs that complement each other. For example, you can add a matching cover page, header and sidebar. Click Insert, then choose the elements you want from the different galleries.
Themes and styles also help to keep your document coordinated. 
</div>
</body>
</html>



Output is :-

 
Css border:-

Used to set an element's border:

1. border-width:25px;
2. border-style:dotted/dashed/double/solid
3. border-color:black;
 
Style 1:-

Coding :-

<html>
<head>
<style type="text/css">
 .bob
    {
      border-bottom-style:solid;
      border-top-style:solid;
      border-left-style:solid;
      border-right-style:solid;
      border-bottom-width:8px;
      border-top-width:8px;
      border-left-width:8px;
      border-right-width:8px;
      border-bottom-color:green;
      border-top-color:green;
      border-left-color:green;
      border-right-color:green;
    }
    .tim
    {
      border-bottom-style:dashed;
      border-top-style:dashed;
      border-left-style:dashed;
      border-right-style:dashed;
      border-bottom-width:8px;
      border-top-width:8px;
      border-left-width:8px;
      border-right-width:8px;
      border-bottom-color:pink;
      border-top-color:pink;
      border-left-color:pink;
      border-right-color:pink;
    }
    .kim
    {
      border-bottom-style: dotted;
      border-top-style: dotted;
      border-left-style: dotted;
      border-right-style: dotted;
      border-bottom-width:8px;
      border-top-width:8px;
      border-left-width:8px;
      border-right-width:8px;
      border-bottom-color: skyblue;
      border-top-color: skyblue;
      border-left-color: skyblue;
      border-right-color: skyblue;
    }
    .king
    {
      border-bottom-style: double;
      border-top-style: double;
      border-left-style: double;
      border-right-style: double;
      border-bottom-width:8px;
      border-top-width:8px;
      border-left-width:8px;
      border-right-width:8px;
      border-bottom-color:red;
      border-top-color:red;
      border-left-color:red;
      border-right-color:red;
    }
</style>
<title></title>
 </head>
<body>
 <h1 class="bob">This is solid 
        border.</h1>
 <h1 class="tim">This is dashed
     border.</h1>
<h1 class="kim">This is dotted
    border .</h1>
<h1 class="king">This is double
    border .</h1>
 </body>
</html>
Output is :-














Style 2:-

Coding:-



Output is:-




Style 3:-

Coding:-




Output is:-

Style 4:-

Coding:-



Output is:-




Border-radius:-

Used to round the corners of an element's outer border edges:

1. Border-radius:10px;
2. Border-radius:50%;

1.Border-radius:10px;

Coding :-

<html>
 <head>
  <style type="text/css">
       .bob
         {
            background-color: red;
             height:100px;
             width: 100px;
             border-top-right-radius: 50px;
             border-top-left-radius: 50px;
           border-bottom-left-radius:30px;
         border-bottom-right-radius:
30px;
         }
         .tim
         {
             background-color: orange;
             height:100px;
             width:100px;
             border-radius: 100px;
         }
         .sim
         {
             background-color: skyblue;
             height:100px;
             width:100px;
             border-radius: 30px;
         }

</style>
 <title></title>
</head>
<body>
    <div class="bob"></div>
    <br><br>
    <div class="tim"></div>
    <br><br>
    <div class="sim">
   <br><br>
 </body>
</html>
Output is :-

2.Border-radius:50%;

Coding :-




Output is :-



Comments

Post a Comment

Popular posts from this blog

Css basic Properties ✍🏻

Image
Css Selectors - 1.  The Css id selector:- The id selector uses the id attribute of an HTML element to select a specific element. The id of an element is unique with in a page, so the id selector is used to select one unique element. To select an Element with a specify id, write a hash(#) ch aracter , followed by the id of the elements. Output is:- 2. The Css class Selector:- The Class Selector selects HTML elements with a specific class attribute. To select an element with a specify class, write a period(.) character , followed by the class name. Output is:- The Difference between Id and Class:-  The Difference between an id and a class is that an Id can be used to identify one element , whereas a class can be used to identify more than one .   ID's are unique:- Each element can have only one I'd. Each page can have only one element with that Id. Classes are Not unique:- You can use the same class on multiple elements. You can use multiple classes on the same element. CSS...
Read more

Basic Html Notes

  What is website ? A website is a collection of web pages   which contains the information about the particular organization or institution or any product.It contains the related content that is identified by a common domain name and published on any one web server . Few examples of such websites are bing.com , wikipedia.org , google.com , amazon.com etc. Note:-A website can be opened using the software known as Browser . Commonly used browsers are Google Chrome , internet explorer , Mozilla Firefox etc.  Language used for website development :- The most common programming language used to develop websites are: HTML ( HyperText Markup Language ), CSS ( Cascading Style Sheets ), JavaScript and PHP ( Hypertext Preprocessor ). Note:-Some of these can be used as an extension of the existing languages but some can be used entirely separate from the other languages to create a dynamic or static website . Purpose:- Websites are developed for a particular purpose,such as com...
Read more

Advanced Html Notes

Comments in HTML:- The comment tag is used to insert a comment in the HTML source code. A comment can be placed anywhere in the document and the browser will ignore everything inside the brackets. <p>This html comment would<!-- This is a comment --> be displayed like this.</p> Note:- You don't see the text between the tags<--and-->.If you look at the source code,you would see the comment.To view the source code for this page,in your browser window, select View  and then select Source . HTML TEXT FORMATTING:- 1. <b> :- Defines  bold  text. 2.<Strong> :- Defines Important  text. 3. <i> :-   Defined Italic  text. 4. <em> :- Defined Emphasized  text. 5. <mark> :- Defined Marked text. 6. <small> :-  Defined Small  text. 7. <del> :- Defined deleted text. 8. <ins> :- Defined Inserted text. 9. <sub> :- Defined Subscript  text. 10. <sup> :- Defined Superscri...
Read more