Scribd
Upload
3 views10 pages

lec 4.1

Okkkkk

Uploaded by

getlikeeleven
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
3 views10 pages

lec 4.1

Okkkkk

Uploaded by

getlikeeleven
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/ 10

CSS Box Model

In CSS, the term "box model" is used when talking about design and layout.

The CSS box model is essentially a box that wraps around every HTML element.
It consists of: margins, borders, padding, and the actual content. The image
below illustrates the box model:
Explanation of the different parts:

 Content - The content of the box, where text and images appear
 Padding - Clears an area around the content. The padding is transparent
 Border - A border that goes around the padding and content
 Margin - Clears an area outside the border. The margin is transparent

The box model allows us to add a border around elements, and to define space
between elements.

<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>

<h2>Demonstrating the Box Model</h2>

<div>This text is the content of the box. We have added a 50px padding, 20px margin
and a 15px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.</div>

</body>
</html>

CSS Borders
The CSS border properties allow you to specify the style, width, and color of an
element's border.

The border-style property specifies what kind of border to display.

The following values are allowed:

 dotted - Defines a dotted border


 dashed - Defines a dashed border
 solid - Defines a solid border
 double - Defines a double border
 groove - Defines a 3D grooved border. The effect depends on the border-
color value
 ridge - Defines a 3D ridged border. The effect depends on the border-
color value
 inset - Defines a 3D inset border. The effect depends on the border-color
value
 outset - Defines a 3D outset border. The effect depends on the border-
color value
 none - Defines no border
 hidden - Defines a hidden border

Specific Side Widths


<style>
p.one {
border-style: solid;
border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */
}

p.two {
border-style: solid;
border-width: 20px 5px; /* 20px top and bottom, 5px on the sides */
}

p.three {
border-style: solid;
border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px
left */
}
</style>

CSS Margins
Margins are used to create space around elements, outside of any defined borders.
The CSS margin properties are used to create space around elements, outside
of any defined borders.

Margin - Individual Sides


CSS has properties for specifying the margin for each side of an element:

 margin-top
 margin-right
 margin-bottom
 margin-left

All the margin properties can have the following values:

 auto - the browser calculates the margin


 length - specifies a margin in px, pt, cm, etc.
 % - specifies a margin in % of the width of the containing element
 inherit - specifies that the margin should be inherited from the parent
element

<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
background-color: lightblue;
}
</style>
</head>
<body>

<h2>Using individual margin properties</h2>

<div>This div element has a top margin of 100px, a right margin of 150px, a bottom
margin of 100px, and a left margin of 80px.</div>

</body>
</html>

If the margin property has four values:

 margin: 25px 50px 75px 100px;


o top margin is 25px
o right margin is 50px
o bottom margin is 75px
o left margin is 100px
CSS Padding
Padding is used to create space around an element's content, inside of any defined
borders.

The CSS padding properties are used to generate space around an element's
content, inside of any defined borders.

Padding - Individual Sides


CSS has properties for specifying the padding for each side of an element:

 padding-top
 padding-right
 padding-bottom
 padding-left

All the padding properties can have the following values:

 length - specifies a padding in px, pt, cm, etc.


 % - specifies a padding in % of the width of the containing element
 inherit - specifies that the padding should be inherited from the parent
element

<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
background-color: lightblue;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
</style>
</head>
<body>

<h2>Using individual padding properties</h2>

<div>This div element has a top padding of 50px, a right padding of 30px, a bottom
padding of 50px, and a left padding of 80px.</div>

</body>
</html>
If the padding property has four values:

 padding: 25px 50px 75px 100px;


o top padding is 25px
o right padding is 50px
o bottom padding is 75px
o left padding is 100px

CSS Height and Width


The CSS height and width properties are used to set the height and width of an
element.

The height and width properties do not include padding, borders, or margins. It
sets the height/width of the area inside the padding, border, and margin of the
element.

The height and width properties may have the following values:

 auto - This is default. The browser calculates the height and width
 length - Defines the height/width in px, cm etc.
 % - Defines the height/width in percent of the containing block
 initial - Sets the height/width to its default value
 inherit - The height/width will be inherited from its parent value

The position Property


The position property specifies the type of positioning method used for an
element (static, relative, fixed, absolute or sticky).

The position property specifies the type of positioning method used for an
element.

There are five different position values:

 static
 relative
 fixed
 absolute
 sticky
Position: static;
HTML elements are positioned static by default.

Static positioned elements are not affected by the top, bottom, left, and right
properties.

div.static {
position: static;
border: 3px solid #73AD21;
}

position: relative;
An element with position: relative; is positioned relative to its normal position.

Setting the top, right, bottom, and left properties of a relatively-positioned


element will cause it to be adjusted away from its normal position.

<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: relative;</h2>

<p>An element with position: relative; is positioned relative to its normal


position:</p>

<div class="relative">
This div element has position: relative;
</div>

</body>
</html>
position: fixed;
An element with position: fixed; is positioned relative to the viewport, which
means it always stays in the same place even if the page is scrolled. The top,
right, bottom, and left properties are used to position the element.

A fixed element does not leave a gap in the page where it would normally have
been located.

<style>
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}

</style>

position: absolute;
An element with position: absolute; is positioned relative to the nearest
positioned ancestor

However; if an absolute positioned element has no positioned ancestors, it uses


the document body, and moves along with page scrolling.

<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}

div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: absolute;</h2>

<p>An element with position: absolute; is positioned relative to the nearest


positioned ancestor (instead of positioned relative to the viewport, like fixed):</p>

<div class="relative">
This div element has position: relative;
<div class="absolute">This div element has position: absolute;</div>
</div>

</body>
</html>

Overlapping Elements
When elements are positioned, they can overlap other elements.

The z-index property specifies the stack order of an element (which element
should be placed in front of, or behind, the others).

An element can have a positive or negative stack order:

<!DOCTYPE html>
<html>
<head>
<style>
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<img src="abc.png" width="100" height="140">
<p>Because the image has a z-index of -1, it will be placed behind the text.</p>

</body>
</html>
Assignment
1. Outline
2. Text Transformation
3. Text Spacing
4. Text Alignment
5. CSS Lists
6. Create table and apply css

You might also like