IS388 Web Programming
09 Introduction to CSS Part2
Dr. Mostafa Elgendy
mostafa.csc0227@miuegypt.edu.eg
2
Box Model
IS388 - Web Programming 8-Mar-23
3
Sections of a page <div>
❖ The <div> tag defines a division or a section in an HTML
document.
❖ The <div> tag is used as a container for HTML elements - which
is then styled with CSS or manipulated with JavaScript.
❖ The <div> tag is easily styled by using the class or id attribute.
❖ Any sort of content can be put inside the <div> tag!
IS388 - Web Programming 8-Mar-23
4
Sections of a page <div>
<html>
<head>
<style>
.myDiv {
border: 5px outset red;
background-color: lightblue;
text-align: center;
}
</style>
</head>
<body>
<div class="myDiv">
<h2>This is a heading in a div element</h2>
<p>This is some text in a div element.</p>
</div>
</body>
</html> HTML
IS388 - Web Programming 8-Mar-23
5
Creating Web Layout using Div
❖ div tag can be used for creating a layout of web pages.
❖ We can also create web layout using tables tag but table tags are
very complex to modify the layout.
❖ The div tag is very flexible in creating web layouts and easy to
modify.
IS388 - Web Programming 8-Mar-23
6
The Box Model and Layout
❖ The box model of an object starts at the outside, with the object’s
margin.
❖ Inside this is the border, then there is padding between the
border and the inner contents.
❖ Finally, you have the object’s contents.
IS388 - Web Programming 8-Mar-23
7
Margins
❖ Separates elements from each other.
❖ When setting the margin property:
❖ You can supply one, two, three, or four arguments.
/* Set all margins to 1 pixel */
margin:1px;
/* Set top and bottom to 1 pixel, and left and right to 2 */
margin:1px 2px;
/* Set top to 1 pixel, left and right to 2, and bottom to 3 */
margin:1px 2px 3px;
/* Set top to 1 pixel, right to 2, bottom to 3, and left to 4 */
margin:1px 2px 3px 4px;
CSS
IS388 - Web Programming 8-Mar-23
8
Margins
<html>
<head>
<link rel='stylesheet' href='mystyles.css'>
</head>
<body>
<table>
<tr>
<td>
<div id='object1’>
margin:<br>10px 20px 30px 40px;
</div>
</td>
</tr>
</table>
</body>
</html> HTML
IS388 - Web Programming 8-Mar-23
9
Borders
❖ The main properties used to modify
borders are /* All borders */
border-width:1px;
❖ border, border-left, border-top, border- /* Top/bottom and left/right */
border-width:1px 5px;
right, and border-bottom. /* Top, left/right, and bottom */
border-width:1px 5px 10px;
/* Top, right, bottom, and left */
❖ Each of these can have other sub border-width:1px 5px 10px 15px;
CSS
properties added as suffixes,
❖ such as -color, -style, and -width.
IS388 - Web Programming 8-Mar-23
10
Borders
IS388 - Web Programming 8-Mar-23
11
Padding
❖ is applied inside any borders and/or
margins. /* All padding */
padding:1px;
/* Top/bottom and left/right */
❖ The main properties padding:1px 2px;
/* Top, left/right, and bottom */
padding:1px 2px 3px;
❖ padding, padding-left, padding-top, /* Top, right, bottom, and left */
padding:1px 2px 3px 4px;
padding-right, and padding-bottom
IS388 - Web Programming 8-Mar-23
12
Padding
<html>
<head>
<style>
#object1 {
border-style: solid;
border-width: 1px;
background: orange;
color: darkred;
padding: 10px 20px 30px 40px;
}
</style>
</head>
<body>
<div id='object1'>To be, or not to be that is the
question:.
</div>
</body>
</html> HTML
IS388 - Web Programming 8-Mar-23
13
Padding
❖ is applied inside any borders and/or
margins. /* All padding */
padding:1px;
/* Top/bottom and left/right */
❖ The main properties padding:1px 2px;
/* Top, left/right, and bottom */
padding:1px 2px 3px;
❖ padding, padding-left, padding-top, /* Top, right, bottom, and left */
padding:1px 2px 3px 4px;
padding-right, and padding-bottom
IS388 - Web Programming 8-Mar-23
Questions
