HTML and CSS Reference
In-Depth Information
8. *:before,
9. *:after {
10. -webkit-box-sizing: border-box;
11. -moz-box-sizing: border-box;
12. box-sizing: border-box;
13. }
2. Next we'll want to create a class that will serve as a container for our elements. We
can use this container class on different elements to set a common width , center
the elements on the page, and apply some common horizontal padding .
Just below our universal selector rule set, let's create a selector with a class of
container . Within this selector let's set our width to 960 pixels, our left
and right padding to 30 pixels, our top and bottom margins to 0 , and our
left and right margins to auto .
Setting a width tells the browser definitively how wide any element with the
class of container should be. Using a left and right margin of auto in
conjunction with this width lets the browser automatically figure out equal left
and right margins for the element, thus centering it on the page. Lastly, the
left and right padding ensures that our content isn't sitting directly on the
edge of the element and provides a little breathing room for the content.
Click here to view code image
1. .container {
2. margin: 0 auto;
3. padding-left: 30px;
4. padding-right: 30px;
5. width: 960px;
6. }
3. Now that we have a container class available to use, let's go ahead and apply the
class of container throughout our HTML to the <header> and <footer>
elements on each page, including the index.html , speakers.html ,
schedule.html , venue.html , and register.html files.
Click here to view code image
1. <header class="container" >...</header>
3. <footer class="container" >...</footer>
4. While we're at it, let's go ahead and center the rest of the content on our pages. On
the home page, our index.html file, let's add the class of container to each
Search WWH ::

Custom Search