Scribd
Upload
13 views14 pages

02 - Introduction To CSS Part 2

Uploaded by

mohamednoamann54
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
13 views14 pages

02 - Introduction To CSS Part 2

Uploaded by

mohamednoamann54
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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