CET214
Web Programming
06 - More CSS
Dr. Ahmed Said
Start
The Box Model
When working with CSS, it helps to think of every element on a page as being contained within a box.
This is true of inline elements like <a> or block-level elements like <p> .
Each of these boxes is contained within three larger boxes, and the entire set of four is referred to as the CSS
box model.
The innermost box contains the content of the element. Surrounding that is the padding , then the
border , and finally, the outermost layer (the margin ).
In addition to properties that you can use to change how the content is displayed.
Browser developer tools can be used to see the box model for any element on a page.
Dr. Ahmed Said
| 2 of 30
The Box Model
When working with CSS, it helps to think of every element on a page as being contained within a box.
This is true of inline elements like <a> or block-level elements like <p> .
Each of these boxes is contained within three larger boxes, and the entire set of four is referred to as the CSS
box model.
The innermost box contains the content of the element. Surrounding that is the padding , then the
border , and finally, the outermost layer (the margin ).
In addition to properties that you can use to change how the content is displayed.
Browser developer tools can be used to see the box model for any element on a page.
Dr. Ahmed Said
| 2 of 30
The Box Model
When working with CSS, it helps to think of every element on a page as being contained within a box.
This is true of inline elements like <a> or block-level elements like <p> .
Each of these boxes is contained within three larger boxes, and the entire set of four is referred to as the CSS
box model.
The innermost box contains the content of the element. Surrounding that is the padding , then the
border , and finally, the outermost layer (the margin ).
In addition to properties that you can use to change how the content is displayed.
Browser developer tools can be used to see the box model for any element on a page.
Dr. Ahmed Said
| 2 of 30
The Box Model
When working with CSS, it helps to think of every element on a page as being contained within a box.
This is true of inline elements like <a> or block-level elements like <p> .
Each of these boxes is contained within three larger boxes, and the entire set of four is referred to as the CSS
box model.
The innermost box contains the content of the element. Surrounding that is the padding , then the
border , and finally, the outermost layer (the margin ).
In addition to properties that you can use to change how the content is displayed.
Browser developer tools can be used to see the box model for any element on a page.
Dr. Ahmed Said
| 2 of 30
Borders
Before We talk about padding or margins , lets talk about borders.
CSS provides several properties for adding borders around elements and changing how they are displayed.
Using CSS, you can apply a border to any box.
The border-style property is used to set the style of the border, options include solid , dotted , dashed , double ,
groove , ridge , inset , and outset .
The border-width property is used to set the width of the border.
The border-color property is used to set the color of the border.
a { border-width: 1px; border-style: solid; border-color: black; }
css
selector { border: style width color; }
Dr. Ahmed Said
| 3 of 30
Borders
Before We talk about padding or margins , lets talk about borders.
CSS provides several properties for adding borders around elements and changing how they are displayed.
Using CSS, you can apply a border to any box.
The border-style property is used to set the style of the border, options include solid , dotted , dashed , double ,
groove , ridge , inset , and outset .
The border-width property is used to set the width of the border.
The border-color property is used to set the color of the border.
a { border-width: 1px; border-style: solid; border-color: black; }
css
a { border: dashed 3px red; }
Dr. Ahmed Said
| 3 of 30
Borders, cont.
You can use different values for each side of a box when you’re using any of the box properties.
There are two ways to do so. The first is to add directions to the property names, as follows :
The directions are top , bottom , left , and right .
a {
border-left-width: 3px;
border-left-style: dotted;
border-left-color: green;
}
css
Alternatively, you can set the values for each side.
If you specify four values, they will be applied to the top , right , bottom , and left , in that order.
p.box { border-width: 1px 2px 3px 4px; }
Dr. Ahmed Said
| 4 of 30
Borders, cont.
You can use different values for each side of a box when you’re using any of the box properties.
There are two ways to do so. The first is to add directions to the property names, as follows :
The directions are top , bottom , left , and right .
a {
border-left-width: 3px;
border-left-style: dotted;
border-left-color: green;
}
css
Alternatively, you can set the values for each side.
If you specify four values, they will be applied to the top , right , bottom , and left , in that order.
p.box { border-width: 1px 2px 3px 4px; }
Dr. Ahmed Said
| 4 of 30
Borders, cont.
You can use different values for each side of a box when you’re using any of the box properties.
There are two ways to do so. The first is to add directions to the property names, as follows :
The directions are top , bottom , left , and right .
a {
border-left-width: 3px;
border-left-style: dotted;
border-left-color: green;
}
css
Alternatively, you can set the values for each side.
If you specify four values, they will be applied to the top , right , bottom , and left , in that order.
p.box {
border-top-width: 1px;
border-right-width: 2px;
border-bottom-width: 3px;
border-left-width: 4px;
}
Dr. Ahmed Said
| 4 of 30
Borders, cont.
p {
border: solid 2px red ;
border-bottom: dashed 4px green;
}
css
Dr. Ahmed Said
| 5 of 30
Borders, cont.
p {
border: solid 2px red ;
border-bottom: dashed 4px green;
}
css
CSS will apply the styles in the order they appear in the CSS document.
Dr. Ahmed Said
| 5 of 30
Margins and Padding
In the box model, there are two ways to control whitespace around a box.
Padding is the whitespace inside the border
The margin is the whitespace outside the border, separating the box from surrounding elements.
<head>
<style type="text/css">
.outer { border: 2px solid black; }
.inner { border: 2px dotted black; padding: 0; margin: 0; }
</style>
</head>
<body>
html
<div class="outer">
Outer.
<div class="inner">
Friends, Romans, countrymen, lend me your ears;<br />
I come to bury Caesar, not to praise him.<br />
The evil that men do lives after them;<br />
The good is oft interred with their bones;<br />
</div>
</div>
</body>
Dr. Ahmed Said
| 6 of 30
Margins and Padding, cont.
Outer.
Friends, Romans, countrymen, lend me your ears;
I come to bury Caesar, not to praise him.
The evil that men do lives after them;
The good is oft interred with their bones;
As you can see, the text in the inner <div> is jammed right up against the border, and the inner border and
outer border are flush against each other.
That’s because I’ve set both the padding and the margin of the inner <div> to 0. (When you’re setting a
property to 0 there’s no need to specify a unit.)
Dr. Ahmed Said
| 7 of 30
Margins and Padding, cont.
Outer.
Friends, Romans, countrymen, lend me your ears;
I come to bury Caesar, not to praise him.
The evil that men do lives after them;
The good is oft interred with their bones;
As you can see, the text in the inner <div> is jammed right up against the border, and the inner border and
outer border are flush against each other.
That’s because I’ve set both the padding and the margin of the inner <div> to 0. (When you’re setting a
property to 0 there’s no need to specify a unit.)
Dr. Ahmed Said
| 7 of 30
Margins and Padding, cont.
.outer { border: 2px solid black; }
.inner { border: 2px dotted black;
padding: 15px;
margin: 15px;
}
css
Dr. Ahmed Said
| 8 of 30
Margins and Padding, cont.
.outer { border: 2px solid black; }
.inner { border: 2px dotted black;
padding: 15px;
margin: 15px;
}
css
Outer.
Friends, Romans, countrymen, lend me your ears;
I come to bury Caesar, not to praise him.
The evil that men do lives after them;
The good is oft interred with their bones;
Dr. Ahmed Said
| 8 of 30
Margins and Padding, cont.
.outer {
border: 2px solid black;
background-color: gray;
padding: 15px;
margin: 40px; }
.inner {
border: 2px dotted black;
background-color: white;
padding: 15px;
margin: 15px; }
css
Dr. Ahmed Said
| 9 of 30
Margins and Padding, cont.
.outer {
border: 2px solid black;
background-color: gray;
padding: 15px;
margin: 40px; }
.inner {
border: 2px dotted black;
background-color: white;
padding: 15px;
margin: 15px; }
css
Outer.
Friends, Romans, countrymen, lend me your ears;
I come to bury Caesar, not to praise him.
The evil that men do lives after them;
The good is oft interred with their bones;
Dr. Ahmed Said
| 9 of 30
Margins and Padding, cont.
Finally, it’s important to understand the behavior of the background color.
The background color is applied to the padding, but not to the margin.
So, the 15-pixel margin outside the inner <div> takes on the background color of the outer <div> , and the
margin of the outer <div> takes on the background color of the page.
Collapsing Margins
In the CSS box model, horizontal margins are never collapsed. (If you put two items with horizontal margins next to each other,
both margins will appear on the page.)
Vertical margins, however, are collapsed. Only the larger of the two vertical margins is used when two elements with margins
are next to each other.
For example, if a <div> with a 40-pixel bottom margin is above a <div> with a 20-pixel top margin, the margin between the
two will be 40 pixels, not 60 pixels.
Dr. Ahmed Said
| 10 of 30
Margins and Padding, cont.
To center text within a box, the text-align: center; style property is used.
The question now is this: How do you center a box on the page?
Dr. Ahmed Said
| 11 of 30
Margins and Padding, cont.
To center text within a box, the text-align: center; style property is used.
The question now is this: How do you center a box on the page?
Dr. Ahmed Said
| 11 of 30
Margins and Padding, cont.
To center text within a box, the text-align: center; style property is used.
The question now is this: How do you center a box on the page?
In addition to passing units of measure or a percentage to the margin property, you can set the margin to
auto .
In theory, this means to set this margin to the same value as the opposite margin.
However, if you set both the left and the right margins to auto , your element will be centered .
.inner { border: 2px dotted black;
background-color: white;
padding: 15px;
margin: 15px;
}
Dr. Ahmed Said
| 11 of 30
Margins and Padding, cont.
To center text within a box, the text-align: center; style property is used.
The question now is this: How do you center a box on the page?
In addition to passing units of measure or a percentage to the margin property, you can set the margin to
auto .
In theory, this means to set this margin to the same value as the opposite margin.
However, if you set both the left and the right margins to auto , your element will be centered .
.inner { border: 2px dotted black;
background-color: white;
padding: 15px;
width: 50%;
margin-left: auto;
margin-right: auto;
}
Dr. Ahmed Said
| 11 of 30
Margins and Padding, cont.
Dr. Ahmed Said
| 12 of 30
Margins and Padding, cont.
Outer.
Friends, Romans, countrymen, lend me your
ears;
I come to bury Caesar, not to praise him.
The evil that men do lives after them;
The good is oft interred with their bones;
.inner { border: 2px dotted black;
background-color: white;
css
padding: 15px;
width: 50%;
margin-left: auto;
Dr. Ahmed Said
| 12 of 30
Margins and Padding, cont.
Outer.
Friends, Romans, countrymen, lend me your
ears;
I come to bury Caesar, not to praise him.
The evil that men do lives after them;
The good is oft interred with their bones;
the width property in that style sheet to shrink the <div> so that it could be centered.
.inner { border: 2px dotted black;
background-color: white;
css
padding: 15px;
width: 50%;
margin-left: auto;
Dr. Ahmed Said
| 12 of 30
Margins and Padding, cont.
Another thing to remember is that the <body> of the page is a box, too.
.outer { border: 2px solid black;
background-color: gray;
padding: 15px; }
.inner { border: 2px dotted black;
background-color: white;
padding: 15px;
margin: 15px; }
body {
margin: 20px;
border: 3px solid blue;
padding: 20px;
background-color: yellow;
css
}
Dr. Ahmed Said
| 13 of 30
Controlling Size and Element Display
The one box in the box model we haven’t discussed is the content box.
As starters, We already know that there are two types of content boxes:
Block: by default, as wide as the container you place them within but you can modify their height and width using
CSS.
Inline: only as wide as they need to be to display their contents, as well as the margins, borders, and padding that you
apply to them.
Each element is, by default, either a block element or an inline element, but CSS provides the display
property to allow you to change this behavior.
Dr. Ahmed Said
| 14 of 30
Controlling Size and Element Display
The one box in the box model we haven’t discussed is the content box.
As starters, We already know that there are two types of content boxes:
Block: by default, as wide as the container you place them within but you can modify their height and width using
CSS.
Inline: only as wide as they need to be to display their contents, as well as the margins, borders, and padding that you
apply to them.
Each element is, by default, either a block element or an inline element, but CSS provides the display
property to allow you to change this behavior.
Dr. Ahmed Said
| 14 of 30
Controlling Size and Element Display
The one box in the box model we haven’t discussed is the content box.
As starters, We already know that there are two types of content boxes:
Block: by default, as wide as the container you place them within but you can modify their height and width using
CSS.
Inline: only as wide as they need to be to display their contents, as well as the margins, borders, and padding that you
apply to them.
Each element is, by default, either a block element or an inline element, but CSS provides the display
property to allow you to change this behavior.
Dr. Ahmed Said
| 14 of 30
Controlling Size and Element Display, cont.
The display property supports three values:
block
inline
none
Dr. Ahmed Said
| 15 of 30
Controlling Size and Element Display, cont.
The display property supports three values:
block
inline
none ??
Dr. Ahmed Said
| 15 of 30
Controlling Size and Element Display, cont.
The display property supports three values:
block
inline
none ??
Setting the display property to none removes the selected elements from the page entirely.
Hiding elements with this property is useful if you want to use JavaScript to dynamically hide and show
items on the page.
There are two properties for controlling the size of a block: width and height .
They enable you to set the size of the box using any of the units of measurement.
Dr. Ahmed Said
| 15 of 30
display vs visibility
The display property is used to control the visibility of an element on the page.
The visibility property is used to control the visibility of an element on the page without removing it
from the document flow.
The visibility property supports three values:
visible : The default value. The element is visible.
hidden : The element is hidden, but it still takes up space on the page.
collapse : The element is hidden, and it does not take up space on the page.
#header { visibility: hidden; }
css
- The element with the ID header will be hidden, but it will still take up space on the page.
#header { display: none; }
css
- The element with the ID header will be removed from the page entirely.
Dr. Ahmed Said
| 16 of 30
Controlling Size and Element Display, cont.
If you use a percentage for the height or width , that percentage is applied to the size of the containing
element.
If you set the width of an element to 50%, it will be half the width of the containing element.
#header { width: 50%; height: 100px; }
css
Dr. Ahmed Said
| 17 of 30
Controlling Size and Element Display, cont.
This paragraph will appear to be very narrow, but the box in which it resides will be as wide as the browser
window unless you specify a width.
<p>one.<br>two.<br>three.<br></p>
html
Dr. Ahmed Said
| 18 of 30
Controlling Size and Element Display, cont.
This paragraph will appear to be very narrow, but the box in which it resides will be as wide as the browser
window unless you specify a width.
<p>one.<br>two.<br>three.<br></p>
html
It’s possible to set maximum and minimum heights and widths for elements to account for differences in the
size of users’ browser windows.
The properties that enable you to do so are max-width , min-width , max-height , and min-height .
#container { min-width: 600px; }
css
- The element with the ID container will expand to fit the size of the browser window as long as it’s at least 600
pixels wide.
If the browser is smaller than 600 pixels wide, the contents of the element will scroll off the screen.
Dr. Ahmed Said
| 18 of 30
Controlling Size and Element Display, cont.
Likewise, you may want to constrain the maximum size of an element so that lines of text do not become so
long that they’re difficult to read.
#container { max-width: 800px; }
css
You can also use both styles together to keep the size of your page within a certain range, regardless of the
size of the user’s browser window:
#container { min-width: 600px; max-width: 800px; }
css
Dr. Ahmed Said
| 19 of 30
Controlling Size and Element Display, cont.
Likewise, you may want to constrain the maximum size of an element so that lines of text do not become so
long that they’re difficult to read.
#container { max-width: 800px; }
css
You can also use both styles together to keep the size of your page within a certain range, regardless of the
size of the user’s browser window:
#container { min-width: 600px; max-width: 800px; }
css
Dr. Ahmed Said
| 19 of 30
Controlling Size and Element Display, cont.
Normally elements in HTML are sized to fit the content that is placed within them.
However, if you constrain the size of an element with a size or a maximum size and then place content inside
the element that won’t fit, the browser has to decide what to do with it.
By default, when content won’t fit inside its box, the browser just displays the overflow as best it can.
Dr. Ahmed Said
| 20 of 30
Controlling Size and Element Display, cont.
Normally elements in HTML are sized to fit the content that is placed within them.
However, if you constrain the size of an element with a size or a maximum size and then place content inside
the element that won’t fit, the browser has to decide what to do with it.
By default, when content won’t fit inside its box, the browser just displays the overflow as best it can.
Dr. Ahmed Said
| 20 of 30
Overflow
The overflow property is used to control what happens when content overflows the box in which it is
placed.
The overflow property supports four values:
visible : The default value. Content that overflows the box is displayed outside the box.
hidden : Content that overflows the box is hidden.
scroll : A scrollbar is added to the box so that users can scroll to see the content that overflows the box.
auto : A scrollbar is added to the box only if the content overflows the box.
Dr. Ahmed Said
| 21 of 30
Overflow, cont.
Notes
When overflow is visible, content that overflows the box is not taken into account when laying out other items on the page,
and the overflow content bleeds onto other content on the page.
When you are sizing elements on the page manually, you should always account for potential overflow so that it doesn’t break
the layout of your page.
Dr. Ahmed Said
| 22 of 30
Float
Normally, block-level elements flow down the page from top to bottom.
If you want to alter the normal flow of the page, you can use absolute positioning top , left', 'right',
'bottom or you can use the float property.
The float property is used to indicate that an element should be placed as far as possible to the left or
right on the page and that any other content should wrap around it.
As you can see, the three boxes run straight down the page (border added to the first box for illustration)
Dr. Ahmed Said
| 23 of 30
Float, cont.
Adding float property
...
<head>
<style type="text/css" media="screen">
.right {
border: 3px solid black;
padding: 10px;
margin: 10px;
float: right;
width: 33%; }
.bottom { clear: both; }
</style>
...
</head>
html
<body>
<p class="right">The absence of romance in my history will...</p>
<p class="main">The absence of romance in my history will,...</p>
<p class="bottom">The absence of romance in my history will,...</p>
</body>
...
Dr. Ahmed Said
| 24 of 30
Float, cont.
Adding float property
...
<head>
<style type="text/css" media="screen">
.right {
border: 3px solid black;
padding: 10px;
margin: 10px;
float: right;
width: 33%; }
.bottom { clear: both; }
</style>
...
</head>
html
<body>
<p class="right">The absence of romance in my history will...</p>
<p class="main">The absence of romance in my history will,...</p>
<p class="bottom">The absence of romance in my history will,...</p>
</body>
...
Dr. Ahmed Said
| 24 of 30
Float, cont.
Adding float property
...
<head>
<style type="text/css" media="screen">
.right {
border: 3px solid black;
padding: 10px;
margin: 10px;
float: right;
width: 33%; }
.bottom { clear: both; }
</style>
...
</head>
html
<body>
<p class="right">The absence of romance in my history will...</p>
<p class="main">The absence of romance in my history will,...</p>
<p class="bottom">The absence of romance in my history will,...</p>
</body>
...
Dr. Ahmed Said
| 24 of 30
Float, cont.
Adding float property
...
<head>
<style type="text/css" media="screen">
.right {
border: 3px solid black;
padding: 10px;
margin: 10px;
float: right;
width: 33%; }
.bottom { clear: both; }
</style>
...
</head>
html
<body>
<p class="right">The absence of romance in my history will...</p>
<p class="main">The absence of romance in my history will,...</p>
<p class="bottom">The absence of romance in my history will,...</p>
</body>
...
Dr. Ahmed Said
| 24 of 30
Float, cont.
The bottom paragraph does not flow around the <div> because I’ve applied the clear: both property to
it, which cancels any float that has been set.
Using the clear property, you have the option of clearing either the left or the right float without
canceling both at the same time.
This proves useful if you have a long column on the right and a short one on the left and you want
to maintain the float on the right even though you’re canceling it on the left (or vice versa).
Dr. Ahmed Said
| 25 of 30
Float, cont.
The bottom paragraph does not flow around the <div> because I’ve applied the clear: both property to
it, which cancels any float that has been set.
Using the clear property, you have the option of clearing either the left or the right float without
canceling both at the same time.
This proves useful if you have a long column on the right and a short one on the left and you want
to maintain the float on the right even though you’re canceling it on the left (or vice versa).
Dr. Ahmed Said
| 25 of 30
Float, cont.
what happens when you have two right-floating elements together.
Dr. Ahmed Said
| 26 of 30
Float, cont.
with a left-floating element and a right-floating element.
As you can see, when you put two floating elements together, they appear next to each other. If you want
the second one to appear below the first, you need to us e the clear property as well as the float property
in the rule.
Dr. Ahmed Said
| 27 of 30
Float, cont.
.right {
border: 3px solid black;
padding: 10px;
margin: 10px;
float: right;
width: 33%; }
#second { clear: right; }
.bottom { clear: both; }
css
The additional <div> has been given the ID second so that it inherits all the styles of the class right and the
style rule associated with the ID second.
Dr. Ahmed Said
| 28 of 30
Assignment 4
Create a simple web page that uses CSS to style the page.
Dr. Ahmed Said
| 29 of 30
THANK YOU
Dr. Ahmed Said
| 30 of 30