USING THE BOX MODEL

B ox 2
Box 4
Box 1 Box 3
At the end of this lesson, you should be able to:
• Understand the concept of box models
• Demonstrate the ability to manipulate various
styles of boxes, borders, and margins.
• Use the <div> tag.
• Modify borders, margins, padding, height, and
width.
• Explain how the different parts of the box
model differ from one another.
HOW BOXES, BORDERS AND
MARGINS ARE BEING USED
 BOX MODEL

• Is used when talking about

design and layout.

• Consists of the margin,

border, padding, and
content.
 DEFINITION OF TERMS:
• Margin – clears an area outside the border. It is also
transparent.
• Border – sets a border around the padding and
content.
• Padding – clears an area around the content. It is
transparent.
• Content – contains the text and images.
 CSS MARGINS
• Margin defines the space around elements. It clears the are around an element (outside the
border).
Property Description
Property and Value
Margin: 50px 25px 30px Top 50px
125px; Right 25px
Bottom 30px Margin-top: 100px;
Left 125px
Margin: 50px 25px 100px; Top 50px
Right and Left 25px Margin-bottom: 100px;
Bottom 100px
Margin: 50px 25px; Top and Bottom 50px Margin-right: 50px;
Right and Left 25px
Margin: 50px; All four margins 50px
Margin-left: 50px;
 CSS BORDER
Border-width
• Sets the width of the border.
• The width is set in pixels, or by using either thin, medium, or thick.
Border-color
• Sets the color of the border. The color can be set by:
• Color name – border-color: red;
• RGB – border-color: rgb(255,0,0);
• Hexadecimal Color – borde-color: #ffffff;
Border-style
• Can be any of these: dotted, dashed, solid, double, groove, ridge, inset, outset.
BORDER-STYLE
 CSS BORDER
Simply,
border: width style color;
Example: border: 20px dotted red;
 CSS PADDING
• Padding defines the space between the border and the content.
 CSS PADDING
• This is the property that is used to make white spaces outside the content.
Property Description
Property and Value
padding: 50px 25px 30px Top 50px
125px; Right 25px
Bottom 30px padding-top: 10px;
Left 125px
padding: 50px 25px 100px; Top 50px
Right and Left 25px padding-bottom: 10px;
Bottom 100px
padding: 50px 25px; Top and Bottom 50px padding-right: 10px;
Right and Left 25px
padding: 50px; All four paddings 50px
padding-left: 10px;
STYLING NAVIGATION
BAR
ADVANCE cascading style sheets (css)
At the end of the discussion, the students will be able to:
• Create and style navigation bar
• Show self-reliance when designing web pages.
EXAMPLE NAVIGATION BAR
 WHAT IS NAVIGATION BAR?

• Navigation Bar or navbar is a user interface element

that is displayed on the main content of a website.
• It contains links to other sections of the website.
• It is a part of the main website.
 VERTICAL NAVIGATION BAR
Steps:
1. Start by creating an unordered list in our HTML file. This list is
then anchored and used as a link.
2. Use href = “#” to test the links. In a real website design, we use
the URL.
 VERTICAL NAVIGATION BAR
Steps:
3. Let us now remove the bullets and padding in the list using a
CSS file. We should not forget to attach the style to the HTML
document.
 VERTICAL NAVIGATION BAR
Steps:
4. Let us style the <a> elements by modifying the background-
color and width.
 VERTICAL NAVIGATION BAR
Steps:
5. Let us now create a basic vertical navigation bar with a green
background color. We also change the background color of the
links when a user moves the mouse over them.
6. Let us add hover in our CSS file.
 HORIZONTAL NAVIGATION BAR
Steps:
1. To create the horizontal navigation bar, we use inline or float.
2. We then modify the CSS file, and set the display as inline.
3. We use the same HTML file we created for the vertical navbar.
 HORIZONTAL NAVIGATION BAR
Steps:
4. Add padding to li and a to have spaces in between the links.
1. Create the HTML document with a file name box_model_act.html
2. Put <title> “Box Model Activity” </title>
3. Set the <style> body{ background-color: lightgreen; }</style>
4. Set the following margins to div inside the <style> tag.
div{ margin-top: 100px;
margin-right: 50px;
margin-ottom: 75px;
margin-left: 25px;}
5. Create <body> <center><header> “This is an activity about box models”.
</header></center>
6. Set the padding inside the <style> tag to div{ padding:auto;}
7. In the <body> include a <div> type your full name, birthday and birthplace.
</div></body>
8. Set the div border to div{border: 2px solid maroon;}
9. Set the text body{ color:darkblue;}
 CREATE A NAVIGATION BAR USING THE
STEPS GIVEN.
CHOOSE BETWEEN HORIZONTAL BAR OR
VERTICAL BAR.
SEND THE HTML AND CSS FILE, AND
SCREENSHOT OF THE OUTPUT.