Chapter 14 Exercises 14-1 to 14-3
The Element Box
Embedded Files
Home > Chapter Review and Exercises > Chapter 14 - The Element Box > Chapter 14 Exercises
Modifying the Black Goose Bakery CSS style sheet
Modifying the Black Goose Bakery CSS style sheet
Follow the instructions on pages 364, 373, and 381 of the Class Text.
I have already created a folder in Ch14 with the necessary file you will need to edit.
You will start by editing the bakery-styles.css file in your class folder.
As reference, the Chapter 14 textbook slides are in the Class Textbook and Resources section.
Read pages 355-363 before starting Exercise 14-1.
Read pages 355-363 before starting Exercise 14-1.
Exercise 14-1 What you need to know for this exercise
Exercise 14-1 What you need to know for this exercise
1. Chapter 14 focuses on the CSS Element Box. Every element (i.e. p, textarea, h1, h2, etc.) occupies a box-shaped space on the website. To see what the boxes look like on a website, press Ctrl+Shift+I, or right-click anywhere on a website and in the menu that appears, left-click on Inspect. In the lower right-hand corner you will see something like this:
2. The parts of the element box include the:
The Outer edge.
The Margin area between the outer edge and the border, e.g., margin: 25px;. The margin is transparent.
The Border goes around the padding, e.g. border: 25px solid green;
The Padding, e.g. padding: 25px;
The Inner edge
The Content area.
3. There are two methods used to specify the size of the element box:
The default method applies the height and width to the inside content area box. To explicitly use this method use the property: box-sizing: content-box.
The other method is border-box, which applies the height and width to the outside of the border box. To use this method use the property: box-sizing: border-box;
4. The height and width properties specify those settings. Most of the time you will only use the width property so that the browser can automatically adjust the height to fit the content.
5. The overflow property specifies what to do with the content that doesn’t fit. Its values are visible, hidden, scroll, and auto. (p. 360-361)
6. The padding property specifies the space between the content area and the border. The shorthand padding property is padding: top right bottom left;
Exercise 14-1 Walk-through
Exercise 14-1 Walk-through
Page 364-365
Page 364-365
Step 1A
Before you start, in your class folder, in the Ch14 folder, open up bakery.html in your browser to see how it looks at the start. See below.
Step 1B
Now in your class folder, in the Ch14 folder, open up the bakery-styles.css document in Sublime. We will be adding the CSS box-sizing model border-box so that is will apply to all the elements in the bakery.html document.
There are two box sizing models,
content-box sizing which applies the width and height values to the content box only, and
border-box sizing, which applies width and height to the border box (which includes the content and padding around it).
You do this by adding the following CSS html selector and the wild card (*) selector to the beginning of the bakery-styles.css file,
html {
box-sizing: border-box;
}
* {
box-sizing: inherit;
}
This is how bakery-styles.css appears before you make any changes:
@charset "UTF-8";
<--------------- Insert the html selector and the wild card (*) selector here
body {
font-family: Georgia, serif;
font-size: 100%;
background-color: white;
}
And this is what bakery-styles.css will look like after you have inserted the html selector and the wild card (*) selector:
@charset "UTF-8";
html {
box-sizing: border-box;
}
* {
box-sizing: inherit;
}
body {
font-family: Georgia, serif;
font-size: 100%;
background-color: white;
}
NOTE: Read this article about a better way of setting the box size model to border-box:
Step 2
The header element needs to be bigger. In the header section of bakery.html is the navigation menu, at the very top. Add the CSS height: 15em; property to the header selector.
header {
color: white;
background: url(images/croissants_banner.jpg) no-repeat center center;
background-size: cover;
text-align: center;
height: 15em;
}
Step 3
The main element will need some padding. Padding is the space that goes around the content, the text and/or image. Add the padding: 1em; property to the main selector.
main {
font-family: 'Stint Ultra Expanded', cursive;
background-color: white;
line-height: 1.8em;
color: #555;
padding: 1em;
}
Step 4
The aside element needs some padding all around, and extra padding on its left side. The aside element in bakery.html has the hours of operation, and it appears at the bottom of the website. Add the padding: 1em; property and the padding-left: 45px; property to the aside selector.
aside {
background: url(images/scallop.png) repeat-y left top;
background-color: #F6F3ED;
padding: 1em;
padding-left: 45px;
}
Step 5
The copyright notice (at the very bottom of the website) in the footer needs more space around the text. Increase the height of the footer by adding the padding: 1em; property to the footer selector.
footer {
color: #EADDC4;
text-align: center;
font-size: .8em;
padding: 1em;
}
Step 6
Check your work by saving bakery-styles.css and then open (or reload) bakery.html in the browser, and see if it matches the image below.
Read pages 366-373 before starting Exercise 14-2.
Read pages 366-373 before starting Exercise 14-2.
Exercise 14-2 What you need to know for this exercise
Exercise 14-2 What you need to know for this exercise
1. The border style is specified with several border properties:
The border-style property has ten different values, including solid, dotted, dashed, and none. (p. 366)
The border-width property specifies the thickness of the border.
The border-color property specified the color of the border.
2. You can also specify if these styles are to be only applied to the top, right, bottom, or left of the border.
3. The shorthand border property allows you to combine the style, width, and color properties in one declaration.
4. The border-radius property allows you to round off the corners of an element. You can practice the border-radius property here:
https://www.w3schools.com/csSref/css3_pr_border-radius.asp
Exercise 14-2 Walk-through
Exercise 14-2 Walk-through
Pages 373-374
Pages 373-374
Step 1
In your class folder, in the Ch14 folder, open up the bakery-styles.css document in Sublime (if it's not already there). Make a tan colored rule (border), with double thickness, around the main element (the breads and muffins sections). The color hex code for the color tan is #EADDC4. Add the border: double 4px #EADDC4; property to the main selector. If you look carefully at the website when you are finished here, you will see the double lined tan border.
main {
font-family: 'Stint Ultra Expanded', cursive;
background-color: white;
line-height: 1.8em;
color: #555;
padding: 1em;
border: double 4px #EADDC4;
}
Step 2A
You will now make the corners on the main and aside sections rounded. The aside section has the hours of operation, at the bottom of the website.
Use the border-radius: 25px; property in the main selector (the main element has the breads and muffins sections) .
main {
font-family: 'Stint Ultra Expanded', cursive;
background-color: white;
line-height: 1.8em;
color: #555;
padding: 1em;
border: double 4px #EADDC4;
border-radius: 25px;
}
Step 2B
Use the border-top-right-radius: 25px; property in the aside selector.
aside {
background: url(images/scallop.png) repeat-y left top;
background-color: #F6F3ED;
padding: 1em;
padding-left: 45px;
border-top-right-radius: 25px;
}
Step 3A
Make a decorative border on two sides (top and left) of the baked goods headings (h3). Both Breads and Muffins have a <h3> heading.
Top side: Add a declaration that adds a 1-pixel solid rule on the top of the headline. In the h3 selector, add the property border-top: 1px solid;
h3 {
text-transform: uppercase;
letter-spacing: .2em;
color: #7A0002;
border-top: 1px solid;
}
Step 3B
Left side: Add another declaration that adds a thicker 3-pixel solid rule on the left. Add the border-left: 3px solid; property to the h3 selector.
h3 {
text-transform: uppercase;
letter-spacing: .2em;
color: #7A0002;
border-top: 1px solid;
border-left: 3px solid;
}
Step 3C
To prevent the text from bumping into the left border, add a little bit of padding (1em) to the left of the headline content (Breads, Muffins). Add the padding-left: 1em; property to the h3 selector.
h3 {
text-transform: uppercase;
letter-spacing: .2em;
color: #7A0002;
border-top: 1px solid;
border-left: 3px solid;
padding-left: 1em;
}
Step 4A
Replace the standard link underlines (most website links are underlined) with decorative bottom borders.
Turn off the underline for all links to make way for the decoration. Add the text-decoration: none property to a new a selector.
/* link styles */
a:link, a:visited { color: #DC6903; }
a:focus, a:hover, a:active { color: #F9AB33; }
a {
text-decoration: none;
}
Step 4B
Make a 1-pixel dotted border on the bottom edge of links. Use the border-bottom: 1px dotted; property in the a selector you just made. It will be hard to see, but it is dotted.
a {
text-decoration: none;
border-bottom: 1px dotted;
}
Step 4C
But now the new decorative dotted line under the link is a little to close to the link text. To lower the line, add a little bottom padding to the links.
a {
text-decoration: none;
border-bottom: 1px dotted;
padding-bottom: .2em;
}
Step 5
Check your work by saving bakery-styles.css and then open (or reload) bakery.html in the browser, and see if it matches the image below.
Read pages 375-380 before starting Exercise 14-3.
Read pages 375-380 before starting Exercise 14-3.
Exercise 14-3 What you need to know for this exercise
Exercise 14-3 What you need to know for this exercise
1. The border-image-* property lets you fill in the sides and corners of a border box with an image of your choice. This property is not used in this exercise, but you can explore it further at this site:
https://www.w3schools.com/cssref/css3_pr_border-image.asp
2. The margin properties specify the amount of transparent space you can add on the outside of the border.
3. The side specific margin properties are margin-top, margin-right, margin-bottom, and margin-left.
4. The shorthand margin property applies the values in clockwise order (top, right, bottom, left) to the sides of the element, e.g. margin: 1em, 2em, 2em, 1em;
5. Note: The margin: auto; property horizontally centers the element within its container. Very useful.
6. The units of measurement for the margin property are em, px, and percent's.
7. The percentage value measurement, it is calculated based on the width of the parent element.
A great place to practice the margin property is:
https://www.w3schools.com/css/css_margin.asp
Exercise 14-3 Walk-through
Exercise 14-3 Walk-through
Page 381
Page 381
Step 1
In your class folder, in the Ch14 folder, open up the bakery-styles.css document in Sublime. The browser has a default margin setting for the entire body element. Take another look at bakery.html in a browser. The elements on the webpage do not go all the way to the very edge of the window. We would like the elements to completely fill the window. To do this, add the margin: 0; property to the body selector.
body {
font-family: Georgia, serif;
font-size: 100%;
background-color: white;
margin: 0;
}
Step 2
The top margin of the <ul> list is pushing the whole nav element (Menus, News, About, Contact) down from the top edge of the browser, thus creating a white space there. Make a new nav ul descendant selector with the margin: 0; property near the end of the nav styles section of the style sheet.
This descendant selector will only apply the zero margin: 0; property to ul elements inside a nav element.
/* nav styles */
nav, footer {
font-family: verdana, sans-serif;
background-color: #783F27;
}
nav ul li a:link, nav ul li a:visited {
color: #F9AB33;
}
nav ul li a:focus, nav ul li a:hover, nav ul li a:active {
color: #fff;
}
nav ul {
margin: 0;
}
nav ul li {
font-size: .8em;
text-transform: uppercase;
letter-spacing: .2em;
}
Step 3A
The h1 element with the Black Goose Bakery logotype (bgb_logo.png) needs to be moved down a bit by adding a margin to its top edge. Add a header h1 descendant selector with the margin-top: 1.5em; property to the bottom of the header styles section.
Because this is a descendant selector, the 1.5m top margin will only apply to h1 elements that are contained in the header element.
/* header styles */
header {
color: white;
background: url(images/croissants_banner.jpg) no-repeat center center;
background-size: cover;
text-align: center;
height: 15em;
}
header p {
font-style: italic;
font-size: 1.2em;
}
header h1 {
margin-top: 1.5em;
}
Step 3B
In the header, the intro paragraph, The delicious baked goods you love at Black Goose Bistro...now available to go! , could be a little closer to the Black Goose Bakery logotype (bgb_logo.png) above it. Add the margin-top: -12px; property declaration to the existing style rule, as shown here to squeeze it in.
Yes, negative values for margins are allowed!
/* header styles */
header {
color: white;
background: url(images/croissants_banner.jpg) no-repeat center center;
background-size: cover;
text-align: center;
height: 15em;
}
header p {
font-style: italic;
font-size: 1.2em;
margin-top: -12px;
}
header h1 {
margin-top: 1.5em;
}
Step 4
The main section (Fresh from the Oven) needs a margin on all sides. Add the margin: 2.5%; property to the main selector.
/* main "products" styles */
main {
font-family: 'Stint Ultra Expanded', cursive;
background-color: white;
line-height: 1.8em;
color: #555;
padding: 1em;
border: double 4px #EADDC4;
border-radius: 25px;
margin: 2.5%;
}
Step 5
The h3 headings (Breads, Muffins) in the main area need a little extra space above them. Add the margin-top: 2.5em; property to the h3 selector.
h3 {
text-transform: uppercase;
letter-spacing: .2em;
color: #7A0002;
border-top: 1px solid;
border-left: 3px solid;
padding-left: 1em;
margin-top: 2.5em;
}
Step 6
The Hours and Times content, that is located in the aside element, could use some added space around it. Put 1em on the top, 2.5% on the right side, 0 on the bottom, and 10% margin on the left.
/* aside "hours" styles */
aside {
background: url(images/scallop.png) repeat-y left top;
background-color: #F6F3ED;
padding: 1em;
padding-left: 45px;
border-top-right-radius: 25px;
margin: 1em 2.5% 0 10%;
}
Step 7
Check your work by saving bakery-styles.css and then open (or reload) bakery.html in the browser, and see if it matches the image below.
Report abuse