How to use the
CSS Box Model
Learning Objectives
It’s Just Boxes!
Guess what! The web is laid out in boxes. Boxes inside of boxes.
And you… yes I’m talking to YOU, have the power to manipulate those boxes. Push them around. Arrange them, even contort them in any way you want to. Prettify them, if you want.
The Box Model
Content
Padding
Border
Margin
Calculating the box model
Calculating the width of a box
left margin + left border + left padding + width +
right padding + right border + right margin
Calculating the height of a box
top margin + top border + top padding +
height + bottom padding + bottom border + bottom margin
Similar to Figure 5-2, pg 147.
<style>
#wrapper {
width: 800px;
border: 3px dotted black;
margin: 100px auto 0px auto;
}
main{
border: 2px solid black;
background-color: slateblue;
margin: 20px;
/* padding: 30px; */
}
header {
background-color: orchid;
}
/*just a little reminder of multiple;
also shows that headings & paragraphs have large default margins */
main h1, p {
color: bisque ;
margin: 0;
/*Don't do this till the end so you can really distinguish */
/*padding: 20px; */
/*Actually, too much padding for p -- so be careful of what you combine for formatting*/
}
header h1 {
text-align: center;
/* Do these two one at a time */
/* margin:0; */
/* padding: 20px 10px 10px 10px; */
}
</style>
</head>
<body>
<div id="wrapper">
<header>
<h1>San Joaquin Town</h1>
</header>
<main>
<h1>Welcome</h1>
Do this:
p>lorem50[TAB]
Then:
p>lorem30[TAB]
</main>
</div>
The code to the right is only for in case you get behind. So please type from scratch and don’t copy it.
Observe the web page in a browser
Open 02.html from your book_examples folder
How to set the width of the content area
width: 450px; /* an absolute width */
width: 75%; /* a relative width */
width: auto; /* width based on its containing
block (the default) */
How to set the height of the content area
height: 125px;
height: 50%;
height: auto; /* height based on its content (default) */
How to set the minimum and maximum width �and height
min-width: 450px;
max-width: 600px;
min-height: 120px;
max-height: 160px;
C5, Slide 8
How to set the margin on a single side
margin-top: .5em;
margin-left: 1em;
How to set the margins on multiple sides
margin: 1em; /* all four sides */
margin: 0 1em; /* top and bottom,
right and left */
margin: .5em 1em 2em; /* top, right and left,� bottom */
margin: .5em 1em 2em 1em; /* top, right, bottom, left */
C5, Slide 9
Set the padding on a single side of an element
padding-top: 0;
padding-right: 1em;
How to set the padding on multiple sides of an element
padding: 1em; /* all four sides */
padding: 0 1em; /* top and bottom,
right and left */
padding: 0 1em .5em; /* top, right and left,
bottom */
padding: 0 1em .5em 1em; /* top, right, bottom, left */
C5, Slide 10
Page with widths, margins, and padding
C5, Slide 11
Theirs on pg 167
Ours:
It is OK to make our webpage look super gaudy. The wild backgrounds and borders will help to examine the width, margins, and padding.
The HTML for the page (part 1)
<header>
<img src="images/logo.gif" alt="Town Hall Logo"
width="80">
<h2>San Joaquin Valley Town Hall</h2>
<h3>Bringing cutting-edge speakers to the valley</h3>
</header>
C5, Slide 12
The HTML for the page (part 2)
<main>
<h1>This season's guest speakers</h1>
<nav>
<ul>
<li>October: <a class="date_passed"
href="speakers/brancaccio.html">
David Brancaccio</a>...</li>
<li>April: <a href="speakers/tynan.html">
Ronan Tynan</a></li>
</ul>
</nav>
<h2>Looking for a unique gift?</h2>
<p>Town Hall has the answer. For only $100, ....</p>
<p>Or, for $50, you can give yourself the gift ....</p>
<p>See you at the next show?</p>
<p id="contact_us"><em>Contact us by phone</em> at
(559) 555-1212 for ticket information.</p>
</main>
<footer>
<p>© Copyright 2022 San Joaquin Valley Town
Hall.</p>
</footer>
C5, Slide 13
The CSS for the web page (part 1)
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
width: 700px;
margin: 1em auto; }
h1, h2, h3, p {
margin: 0;
padding: 0; }
a { font-weight: bold; }
a:link { color: #931420; }
a:visited { color: #f2972e; }
a:hover, a:focus { color: blue; }
ul { margin: 0 0 1.5em; }
li { font-size: 95%;
padding-bottom: .35em; }
p { font-size: 95%;
padding: .25em 0; }
em { font-weight: bold; }
C5, Slide 14
The CSS for the web page (part 2)
header img { float: left; }
header h2 {
font-size: 220%;
color: #f2972e;
text-align: center;
text-shadow: 2px 2px 0 black;
margin-bottom: .25em; }
header h3 {
font-size: 130%;
font-style: italic;
text-align: center; }
C5, Slide 15
The CSS for the web page (part 3)
main h1 {
font-size: 175%;
margin: 1em 0 .35em;
}
main h2 { font-size: 130%; }
#contact_us { margin-top: 1em; }
a.date_passed { color: gray; }
/* the styles for the footer */
footer { margin-top: 1em; }
footer p {
font-size: 80%;
text-align: right; }
C5, Slide 16
A version of the page that uses a reset selector
C5, Slide 17
The CSS for this version of the page
* {
margin: 0;
padding: 0; }
ul { margin: 0 0 1.5em 1.25em; }
li {
font-size: 95%;
padding-bottom: .35em;
padding-left: .25em; }
#contact_us { margin-top: 1em; }
C5, Slide 18
Murach's HTML and CSS, 5th Edition
Properties for setting borders
border
border-side
border-width
border-style
border-color
border-side-width
border-side-style
border-side-color
The syntax for the shorthand border �and border-side properties
border: [width] [style] [color];
border-side: [width] [style] [color];
C5, Slide 19
Murach's HTML and CSS, 5th Edition
How to set border properties
border: thin solid green;
border: 2px dashed #808080;
border: 1px inset; /* uses the element's color
property */
How to set side borders
border-top: 2px solid black;
border-right: 4px double blue;
C5, Slide 20
Murach's HTML and CSS, 5th Edition
How to set the widths of borders
border-width: 1px; /* all four sides */
border-width: 1px 2px; /* top and bottom,� right and left */
border-width: 1px 2px 2px; /* top, right and left, bottom */
border-width: 1px 2px 2px 3px; /* top, right, bottom, left */
How to set the style of borders
border-style: dashed; /* dashed line all sides */
border-style: solid none; /* solid top and bottom, no� border right and left */
How to set the color of borders
border-color: #808080;
border-color: black gray; /* black top and bottom, gray� right and left */
How to set the width, style, and color
border-bottom-width: 4px;
border-right-style: dashed;
border-left-color: gray;
C5, Slide 21
Murach's HTML and CSS, 5th Edition
Syntax for the border-radius and box-shadow
border-radius: radius; /* applies to all four corners */
border-radius: topLeft topRight lowerRight lowerLeft;
box-shadow: horizontalOffset verticalOffset blurRadius
spread color;
�
C5, Slide 22
Murach's HTML and CSS, 5th Edition
The HTML for a section
Appearance in �a browser
<section>
<a href="ebooks_index.html">$10 Ebooks!</a>
</section>
The CSS for the section
section {
padding: 20px;
width: 160px;
border: 5px double blue;
color: blue;
font-size: 200%;
text-align: center;
font-weight: bold;
border-radius: 10px 20px 0 20px;
box-shadow: 3px 3px 4px 4px red;
}
�
C5, Slide 23
Murach's HTML and CSS, 5th Edition
Setting the background color and image
border
border-side
border-width
border-style
border-color
border-side-width
border-side-style
border-side-color
The syntax for the shorthand background property
background: [color] [image] [repeat] [attachment] [position];
C5, Slide 24
How to control image repetition
background-repeat: repeat; /* repeats both directions */
background-repeat: repeat-x; /* repeats horizontally */
background-repeat: repeat-y; /* repeats vertically */
background-repeat: no-repeat; /* doesn't repeat */
How to control image position
background-position: left top; /* 0% from left, 0% from top */
background-position: center top; /* centered horizontally,� 0% from top */
background-position: 90% 90%; /* 90% from left,� 90% from top */
How to control image scrolling
background-attachment: scroll; /* image moves as you scroll */
background-attachment: fixed; /* image does not move as you� scroll */
Accessibility guideline
C5, Slide 25
Murach's HTML and CSS, 5th Edition
The syntax for using a linear gradient �in the background-image property
background-image:
linear-gradient(direction, color %, color %, ... );
�
C5, Slide 26
The HTML for three divisions
<div id="eg1"></div>
<div id="eg2"></div>
<div id="eg3"></div>
The CSS for the three divisions
#eg1 {
background-image: linear-gradient(
to right, white 0%, red 100%); }
#eg2 {
background-image: linear-gradient(
45deg, red 0%, white 50%, blue 100%); }
#eg3 {
background-image: linear-gradient(
45deg, red 0%, red 33%,� white 33%, white 66%,� blue 66%, blue 100%); }
�
C5, Slide 27
Murach's HTML and CSS, 5th Edition
The linear gradients in a browser
C5, Slide 28
A web page that uses borders and a gradient
C5, Slide 29
The CSS for the gradient and borders
html {
background-image: linear-gradient(
to bottom, white 0%, #facd8a 100%);
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
width: 700px;
background-color: white;
margin: 15px auto;
padding: 15px 1.5em;
border: 1px solid black;
border-radius: 25px;
box-shadow: 5px 5px 0 0;
}
C5, Slide 30
The CSS (continued)
header {
padding-bottom: 1em;
border-bottom: 2px solid #f2972e; }
header h2 {
...
text-shadow: 2px 2px 0 black;
footer {
margin-top: 2em;
border-top: 2px solid #f2972e;
padding-top: .7em; }
C5, Slide 31
Short 5-1 Apply CSS to an HTML page
C5, Slide 32
* {
margin: 0;
padding: 0;
}
html {
background-image: linear-gradient(to bottom, deeppink 0%, yellow 100%);
height: 100%;
}
body {
/* background-color: burlywood; */
}
#wrapper {
width: 900px;
margin: 1em auto;
/* background-color: linen; */
}
/* #1 set
a body to check whether your CSS is connected
b instead of body as container, use #wrapper for that purpose.
note how nfl and cofc does not cover the whole page width. There are 2 widths
c Carefully look at the natural spacing on your page. GET TO KNOW DEFAULTS! not specifically, but simply that they are there. https://www.w3schools.com/cssref/css_default_values.php
now flip to page 156-57 and let's do a reset.
https://medium.com/matts-lambda-minutes/matt-lambda-minute-css-box-model-display-properties-and-css-resets-3f0c1c86bab7#70bc
https://meyerweb.com/eric/tools/css/reset
But we'll keep ours simple with the universal selector and just magins and padding.
header {background-color: rebeccapurple; } in honor of Eric's daughter
d pseudo classes, style elements based on their status/condition. Let's style our anchors
*/
a{font-weight: bold; font-size: 1.2em; text-decoration: none;}
a:link {color: brown; }
a:visited {color: chocolate; }
a:hover {background-color: yellow; text-decoration: underline overline}
/*background images: page _____
From pexels, search "seamless background", size 100x100.
Set as UL background
*/
ul {
background-image: url(pexels-karolina.jpg);
margin: 0px 100px 0em 1.5em; /*instead of 3 parameters, we did 4 */
}
li {padding: .35em;}
p{padding: .25em 0; }
/*#2 set
a ul, li, p. principles/best practices: ems are more adaptive. also talk about parameters with 2, 3 & 4
b dress up our header. Not much new learning. Start with back color to identify.
c clear float in main
d main needs margins and padding because we colored it. Start with margin;
e this & that
f in the footer, learn how to creat gradients.
*/
header{background-color: royalblue;
height:175px; /*must be at least as tall as our loto*/
/*dont do this till set#3 */
/* from page 169 */
/* do it and then move to header to see difference */
/* Then remove back color from wrapper and you might stop puking */
margin: 15px auto;
padding: 15px 1.5em;
border: 1px solid black;
border-radius: 25px;
box-shadow: 5px 5px 12px 0 ;
}
header img {float: left;
}
header h2 {
font-size: 300%;
margin-bottom: .5em;
}
main {clear: both;
background-color: coral;
margin: 1em 1em 0em 1em ; /*we may to change later */
padding: 1em 2em ;
}
main h1 {
margin: 1em 0 .35em 0; /*4 values are easier for my mind to process than 3 */
border: 1px solid ghostwhite;
}
footer {
text-align: center;
background-image: linear-gradient(45deg, royalblue 0%, papayawhip 50%, green 100%);
font-size: 85%;
min-height: 50px;
padding-top: 30px;
}
/* footer p { margin: 0} */
/* page 169 shows how to addg gradient, background, colors and borders */
/*#3 set
a go up to top and do the gradient for html element
b we rarely need html element because it's essentially the same as body. But it's needed in order to apply the height. The height keeps the background from stopping. I guess it literarly means to apply it to the entire height of the page.
c The next highlighted style from the boodk is body. but remember, that is our wrapper div. So go back up and type the new styles.
*/
/* another fancy thing */
.frame{
float:left;
height: 130px;
}
.brandyou {
height: 130px;
background-color: red;
width: 500px;
border-radius: 0 50px 50px 0;
font-size: 200%; }
C5, Slide 33
These are fallback notes on the CSS. I wrote them for me, so they are not intended as clear communication for anyone else. They are useful if you make a mistake or fall behind.