CSS Box Model Project

Essential Question:  How can I apply box model to my CSS style sheet?

Mastery Objectives:

• SWBAT create dimensions of an element’s box.

• SWBAT create borders of an element’s box.

• SWBAT create paddings of an element’s box.

• SWBAT create margins of an element’s box.

Resources: The Box Model in Chrome DevTools 

The box model is a set of properties used to format parts of an element that take up space on a web page. The model includes the height and width and the element’s padding, border, and margin.

• width and height: the width and height of the content area.

• padding: The amount of space between the content area and the border.

• border: The thickness and style of the border surrounding the content area and padding.

• margin: The amount of space between the border and the outside edge of the element.

A border is a line that surrounds a section, like a frame. Borders have the following properties:

• width—The thickness of the border. A border’s thickness can be set in pixels or with one of the following keywords: thin, medium, or thick.

• style—The design of the border. Web browsers can render any of 10 different styles. Some of these styles include: none, dotted, and solid.

• color—The color of the border. 

h1 {

  border: 4px solid dodgerblue;

}

In the example above, the border has a width of 4 pixels, a style of solid, and a color of dodgerblue. 

Border radius rounds out the border.

Padding is the space between the contents of a box and the borders of a box. 

If you want to be more specific about the amount of padding on each side of a box’s content, you can use the following properties:

• padding-top - the width of the top padding

• padding-right - the width of the right padding

• padding-bottom - the width of the bottom padding

• padding-left - the width of the left padding

30px; padding-left: 20px;

They are formatted together going clockwise starting at the top: padding: 

p.content-header {

  padding: 4px 10px 6px 7px;

} 

padding: 4px - top, 10px- right, 6px - bottom, 7px - left

padding: 4px - top, 10px - right and left, 6px - bottom

padding: 4px - top and bottom, 10px - right and left

Margin refers to the space directly outside of the box.  

p {

  border: 1px solid dodgerblue;

  margin: 10px;

} 

• margin-top

• margin-right

• margin-bottom

• margin-left

p {

  margin: 6px 10px 5px 12px;

} 

div{

  margin: 0 auto; 

} 

0 Auto will center the divs in their containing elements. The 0 sets the top and bottom margins to 0 pixels. The auto value instructs the browser to adjust the left and right margins until the element is centered within its containing element. 

Top and bottom margins, also called vertical margins, collapse, while top and bottom padding do not. 

To accommodate viewing web pages on different devices and screens, CSS offers two properties that can limit how narrow or how wide an element’s box can be sized to:

• min-width—this property ensures a minimum width

• max-width—this property ensures a maximum width of an element’s box.

p {

  min-width: 300px;

  max-width: 600px;

}

Overflow property controls decides what happens if an element doesn't fit on the page due to padding, margins, borders, etc. The values are:

• hidden—when set to this value, any content that overflows will be hidden from view.

• scroll—when set to this value, a scrollbar will be added to the element’s box so that the rest of the content can be viewed by scrolling.

• visible—when set to this value, the overflow content will be displayed outside of the containing element. Note, this is the default value.

p {

  overflow: scroll;

}

All major web browsers have a default stylesheet they use in the absence of an external stylesheet. These default stylesheets are known as user agent stylesheets. This is an example of how to reset the default values of the user agent stylesheet.

* {

  margin: 0;

  padding: 0;

}

Elements can be hidden from view with the 

Preview: Docs The visibility property in CSS determines whether an element is visible or hidden within the page.

visibility

 property.

The visibility property can be set to one of the following values:

• hidden — hides an element.

• visible — displays an element.

• collapse — collapses an element.

Directions:

1. Add a height of 600 pixels to #banner. 

2. Set .pull-quote width to 250 pixels. 

3. Set the #banner .content h1 width to 300 pixels. 

4. Add a dotted blue border with 1-pixel thickness to all h2 headings. 

5. Add a solid, blue border, with a 3 pixel width, to the #banner .content h1 rule. 

6. Set the border radius of #banner .content h1 to 18 pixels. Try experimenting with other border-radius values.

7. In a single line, set the .navigation li elements to have 18 pixels of padding. 

8. Set the .share a elements to have 15 pixels of padding. 

9. Set the top and bottom padding of h2 elements to 30 pixels and set the left and right padding of h2 elements to 20 pixels. 

10. Change the individual padding declarations on the .pull-quote selector ruleset to use padding shorthand with 2 values. Keep the padding for the top and bottom at 10 pixels and the value for the left and right padding at 20 pixels. 

11. Using two values for the padding property, set the padding of the p element to 10 pixels on the top and bottom and 20 pixels on the left and right. 

12. Set the top margin of p elements to 40 pixels. 

13. Find the three blue boxes at the bottom of the web page. These elements are anchor elements of class .share. Set these .share a elements to have a margin of 15 pixels. 

14. Using two values, set the h2 top and bottom margins to 20 pixels and the left and right margins to 30 pixels. 

15. Set the width of the .pull-quote class elements to 250 pixels. 

16. In one line, set the vertical (top and bottom) margins of the .pull-quote class to 0 and the horizontal (left and right) margins to auto. 

17. Set the vertical margins of the #main element to 0, and the horizontal margins to auto. 

18. set the minimum width of the p element to 250 pixels.

After you’ve done this successfully, resize the browser and notice how the paragraph’s box will no longer shrink below 250 pixels.

19. Next, set the maximum width of the p element to 700 pixels.

After you’ve done this successfully, resize the browser and notice how the paragraph’s box will no longer expand beyond 700 pixels.

20. Set the minimum height of the p element to 250 pixels.

After you’ve done this successfully, resize the browser and notice how the height of paragraph’s box will no longer shrink below 250 pixels.

21. Set the maximum height of the p element to 300 pixels. 

22. In order to see the impact of overflow: scroll, first change the height of the #main element to 1500 pixels. 

23. Set the overflow of the #main element to scroll.

When you scroll down, a second scroll bar should appear over the paragraph section. You may have to expand the browser component in order to see this behavior clearly.

24. Reset the default margin and padding values for the body. 

25. Take a look at the list items in index.html. Notice that the list item Donate has a class of donate.

• Add a class selector ruleset for donate.

• Set the visibility to hidden.