Scribd
Upload
10 views

02 - Introduction To CSS Part 2

Uploaded by

mohamednoamann54
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
10 views

02 - Introduction To CSS Part 2

Uploaded by

mohamednoamann54
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

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

You might also like