Scribd
Upload
14 views

Web Design-Lecture 8-CSS BoxModel

The document provides information about CSS box model properties including margins, borders, padding, and content. It discusses how these properties determine how elements are positioned and styled within the browser window. The key points covered include the use of margins to separate elements, padding to move content from edges, and borders to add styling around elements. Shorthand properties for borders, margins, and padding are also described.

Uploaded by

James Lues
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
14 views

Web Design-Lecture 8-CSS BoxModel

The document provides information about CSS box model properties including margins, borders, padding, and content. It discusses how these properties determine how elements are positioned and styled within the browser window. The key points covered include the use of margins to separate elements, padding to move content from edges, and borders to add styling around elements. Shorthand properties for borders, margins, and padding are also described.

Uploaded by

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

Web Design Faculty of Science

Computer Science Dept.


Second Stage
Lecture 8:
CSS - Box Model

Hoshang Qasim
E-mail: [email protected]
2021
Introduction to Box Model

• Determines how elements are positioned within the browser window.


• All HTML elements can be considered as boxes.
• consists of: margins, borders, padding, and the actual content.

The image below illustrates the box model:

2
Introduction to Box Model

• Margin - Clears an area around the border. The margin does not have a background color,
it is completely transparent.

• Border - A border that goes around the padding and content. The border is affected by the
background color of the box.

• Padding - Clears an area around the content. The padding is affected by the background
color of the box.

3
• Content - The content of the box, where text and images appear.
Introduction to Box Model

• Use margin to separate the block from things outside it


• padding moves the contents away from the edges of the block
• margins are not covered by either the background or border because

4
they are the space outside of the actual element.
The border properties

• enable you to specify how the border of the box representing an element should look.

1. border-color to indicate the color a border should be


2. border-style to indicate whether a border should be a solid, dashed, or double line etc.
3. border-width to indicate the width a border should be

p{
border-style : solid;
border-color : #ff0000;
5
border-width : 4px;
}
The border properties

border-bottom-style
border-right-style
border-top-style
border-bottom-color border-left-style
border-right-color
border-top-color
border-bottom-width
border-left-color
border-right-width
border-top-width
border-left-width
6
The border properties

7
The border Example

<head>
<style type="text/css">

h1{border-style : solid;
border-color : #ff0000;
border-width : 4px;
border-bottom-color:green;
border-right-color :yellow;
border-top-color :pink;
border-left-color :gray;
border-bottom-style :dotted;
border-top-style :dashed;
border-bottom-width :15px;
}
</style>
</head>
<body>
8 <h1>testing for margin position</h1>
</body>
border properties

Shorthands

• The border property allows us to define all border properties in one


declaration.
• The properties that can be set, are:
border-width, border-style, and border-color.
• The border-style is required It does not matter if other values are missing.

#menu {
border: 1px solid red;
9
}
border properties

<html>
<head>
<style>
div {
border: 3px solid red;
margin: 25px 50px 75px 100px;
background-color: orange;
}
</style>
</head>
<body>
<h2>Margin shorthand property</h2>
<div>The border property allows us to define all border
properties in one declaration.The properties that can be
set, are:
</div>
</body>
10
</html>
border properties

Border Radius

• The border-radius property is used to define how rounded border corners are.
• The curve of each corner is defined using one or two radii, defining its shape:
circle or ellipse.
• We can set different border radius for each corner using the properties: border-
top-left-radius, border-top-right-radius, border-bottom-right-radius and border-
bottom-left-radius.

11
border properties

Border Radius
<html>
<head>
<style>
#raduis {
border-radius: 50px;
border: 5px solid blue;
padding: 50px;
width: 150px;
height: 100px;
}
</style>
</head>
<body>
<div id="raduis">Border Raduis</div>
12 </body>
</html>
Border Radius Shorthands
<div id="a"></div><div id="b"></div><div id="c"></div>
<div id="d"></div><div id="e"></div><div id="f"></div>

#a { border-radius: 10px; background-color: blue;}


#b { border-radius: 40px 10px; background-color: red;}
#c { border-radius: 40px 10px 20px 20px; background-color: green;}
#d { border-radius: 10% 10% 20% 30% 40%; background-color: orange;}
#e { border-radius: 10% 20% 40px 10px; background-color: yellow;}
#f { border-radius: 20px 0; background-color: fuchsia;}

13
The margin property

• The margin property controls the gap between boxes.


• Its value is either a
✓ length, Defines a fixed margin (in pixels)
✓ a percentage, Defines a margin in % of the containing element
✓ Auto, The browser sets the margin.
p{margin-top:50px;
✓ inherit, from the parent element. margin-bottom:50px;
margin-right:25px;
margin-left:25px;
14
}
The margin property

• It is possible to specify all the margin properties in one property. This is called a
shorthand property.

margin:25px 50px 75px 100px;

• Top margin is 25px margin:25px 50px 75px;


• Right margin is 50px
• bottom margin is75px • Top margin is 25px

• Left marginis 100px • Right and left margins are 50px


• Bottom margin is 75px
15
The margin property

• It is possible to specify all the margin properties in one property. This is called a
shorthand property.

margin: 25px 50px; margin:30px;

• All four margins are 30px;


• Top and bottom margins are 25px
• Right and left margins are 50px

16
The margin property Example

<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 5px solid red;
margin: 50px;
background-color: silver;
}
</style>
</head>
<body>

<div>All four margins are 30px;</div>


17
</body>
</html>
The margin property

<html>
<head>
<style type="text/css">
p
{
Border:5px solid;
margin:250px;
margin-left:250px;
margin-top:200px;
}
</style>
</head>
<body>
<p>testing for margin position</p>
</body>
18 </html>
The padding property

• specify how much space should appear between the content of an element and its border:

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

• Value specified in pixels. Although percentage


19
padding Shorthand property

padding:25px 50px 75px 100px;

padding:25px 75px 100px;


Top padding is 25px
Right padding is 50px
bottom padding is 75px Top padding is 25px

left padding is 100px Right and left paddings are 75px


bottom padding is 100px

20
padding Shorthand property

padding: 50px 75px;

padding:50px;

Top and bottom paddings are 50px


All four paddings are 50px
Right and left paddings are 75px

21
padding Shorthand property

<html>
<head>
<style>
div {
border: 3px solid blue;
padding: 10px 25px 50px 50px;
background-color: lightblue;
}
</style>
</head>
<body>

<div>padding Shorthand property top padding of 10px,


a right padding of 25px, a bottom padding of 50px, and
a left padding of 50px.</div>

22
</body>
</html>
Absolute length
Absolute length units represents a physical measurement. They are useful
when the physical properties of the output medium are known, such as for
print layout.

mm, cm, in, pt and pc

• mm One millimeter.
• cm One centimeter (10 millimeters).
• in One inch (2.54 centimeters).
• pt One point (1/72nd of an inch). body {font-size: 18pt;

• pc One pica (12 points). }


23
Pixel
• Defines a measurement in screen pixels.
• the pixel (px) represents one device pixel (dot).

p {padding: 25px;
}

24
Percentage
The percentage CSS data type represents a percentage value. A
percentage consists of a number followed by the percentage sign %. There
is no space between the symbol and the number.

div {
width: 50%;
}

Many CSS properties (width, margin, padding, fontsize,..) can take percentage values
25
to define a size as relative to its parent object.
Length units

Unit Description

%-percentage Defines a measurement as a percentage relative to another value,


typically an enclosing element

px Defines a measurement in screen pixels.

em Relative to the font-size of the element

pt Defines a measurement in points. A point is defined as 1/72 of an inch.

26
Length units

body {font-size: 18pt;


} p {padding: 25px;
}

P{ width = 25%;
}

27
float property

• take an element out of normal flow and place it as far to the left or right of a containing
box as possible.
• Whenever you specify a float property on an element
Value purpose

left The box is floated to the left of the containing element, and the content of the
containing element flows to the right of it .
right The box is floated to the right of the containing element, and the content of
the containing element flows to the left of it .
none The box is not floated and remains where it would have been positioned in
normal flow
28 inherit The box takes the same property as its containing element .
float property

img{
width:auto;
float:left;
margin-right: 10px;
}

29
float property

<html>
<head>
<style>
float {
float: left;
font-size: 400%;
font-family: algerian, courier;
line-height: 40%;
}
</style>
</head>
<body>
<p><float>T</float>his is float testing.
his is float testing.his is float testing.
his is float testing.his is float testing.
his is float testing.</p>
30
</body>
</html>

You might also like