What is the code? HTML/CSS

1. Lets start by adjusting our box size to use the border-box version of the box model, which will make sizing all of our elements much easier. Within our style.css file, just below our reset, lets add a comment to identify the code for what will become our grid and help determine the layout of our website. Were putting this below our reset so that it falls in the proper position within the cascade.

From there, we can use the universal selector, *, along with universal pseudo-elements, *:before and *:after, to select every imaginable element and change the box-sizing to border-box. Remember, were going to want to include the necessary vendor prefixes for the box-sizing property, as it is a relatively new property.

1. /* 2. ======================================== 3. Grid 4. ======================================== 5. */ 6. 7. *, 8. *:before, 9. *:after { 10. -webkit-box-sizing: border-box; 11. -moz-box-sizing: border-box; 12. box-sizing: border-box; 13. }

2. Next well 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, lets create a selector with a class of container. Within this selector lets set our width to 960pixels, our left and right padding to 30 pixels, our top and bottommargins 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 rightmargin 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 rightpadding ensures that our content isnt sitting directly on the edge of the element and provides a little breathing room for the content.

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, lets go ahead and apply the class of container throughout our HTML to the

and

elements on each page, including theindex.html, speakers.html, schedule.html, venue.html, andregister.html files.

1.

...

2. 3.

...

4. While were at it, lets go ahead and center the rest of the content on our pages. On the home page, our index.html file, lets add the class of container to each

element on the page, one for our hero section (the section that introduces our conference) and one for our teasers section.

1.

...

Additionally, lets wrap all of the

elements on each page with a

element with the class of container.

1.

2. 3.

...

4. 5.

Well come back and adjust these elements and classes later, but for now were headed in the right direction.

5. Now that all of our content is centered, lets create some vertical spacing between elements. For starters lets place a 22-pixel bottom margin on a few of our heading and paragraph elements. Well place and comment on these typography styles below our grid styles.

1. /* 2. ======================================== 3. Typography 4. ======================================== 5. */ 6. 7. h1, h3, h4, h5, p { 8. margin-bottom: 22px; 9. }

6. Lets also try our hand at creating a border and some rounded corners. Well start by placing a button within the top

element on our home page, just below the header.

Previously we added an element within this

element. Lets add the classes of btn and btn-alt to this anchor.

1. ...

Now lets create some styles for those classes within our CSS. Below our typography rule set, lets create a new section of the CSS file for buttons.

To begin lets add the btn class and apply some common styles that can be shared across all buttons. Well want all of our buttons to have a 5-pixel border-radius. They should be displayed as inline-blockelements so we can add padding around all four sides without issue; well remove any margin.

1. /* 2. ======================================== 3. Buttons 4. ======================================== 5. */ 6. 7. .btn { 8. border-radius: 5px; 9. display: inline-block; 10. margin: 0; 11. }

Well also want to include styles specific to this button, which well do by using the btn-alt class. Here well add a 1-pixel, solid, gray border with 10 pixels of padding on the top and bottom of the button and 30 pixels of padding on the left and right of the button.

1. .btn-alt { 2. border: 1px solid #dfe2e5; 3. padding: 10px 30px; 4. }

Using both the btn and btn-alt classes on the same element allows these styles to be layered on, rendering all of the styles on a single element.

7. Because were working on the home page, lets also add a bit of padding to the

element that contains our element with the classes of btn and btn-alt. Well do so by adding a class attribute value of home to the element, alongside the container class attribute value, as this will be the leading section of our website.

1.

2. ... 3.

Next well want to create a new section within our CSS file for home page styles, and, once were ready, well use the class of hero to apply padding around all four sides of the

element.

1. /* 2. ======================================== 3. Home 4. ======================================== 5. */ 6. 7. .hero { 8. padding: 22px 80px 66px 80px; 9. }

With a solid understanding of reusable layouts, the time has come to implement one in our personal website.

8. For the personal website, well create a three-column reusable layout using inline-block elements. Well do so in a way that allows us to have three columns of equal width or two columns with the total width split between them, two-thirds in one and one-third in the other.

To begin, well create classes that define the width of these columns. The two classes well create arecol-1-3, for one-third, and col-2-3, for two-thirds. Within the grid section of our style.css file, lets go ahead and define these classes and their corresponding widths.

1. .col-1-3 { 2. width: 33.33%; 3. } 4. .col-2-3 { 5. width: 66.66%; 6. }

9. Well want both of the columns to be displayed as inline-block elements. Well need to make sure that their vertical alignment is set to the top of each column, too.

Lets create two new selectors that will share the display andvertical-alignment property styles.

1. .col-1-3, 2. .col-2-3 { 3. display: inline-block; 4. vertical-align: top; 5. }

Looking at the CSS again, weve created two class selectors, col-1-3and col-2-3, that are separated with a comma. The comma at the end of the first selector signifies that another selector is to follow. The second selector is followed by the opening curly bracket, {, which signifies that style declarations are to follow. By comma-separating the selectors, we can bind the same styles to multiple selectors at one time.

10. Well want to put some space in between each of the columns to help break up the content. We can accomplish this by putting horizontal padding on each of the columns.

This works well; however, when two columns are sitting next to one another, the width of the space between them will be double that of the space from the outside columns to the edge of the row. To balance this well place all of our columns within a grid and add the same padding from our columns to that grid.

Lets use a class name of grid to identify our grid, and then lets identify the same horizontal padding for our grid, col-1-3, and col-2-3 classes. With commas separating our selectors again, our CSS looks like this:

1. .grid, 2. .col-1-3, 3. .col-2-3 { 4. padding-left: 15px; 5. padding-right: 15px; 6. }

11. When were setting up the horizontal padding, well need to be careful. Remember, in the last lesson we created a container element, known by the class of container, to center all of our content on a page within a 960 -pixel-wide element. Currently if we were to put an element with the class of grid inside an element with the class of container, their horizontal paddings would add to one another, and our columns would not appear proportionate to the width of the rest of the page.

We dont want this to happen, so instead, well have to share some of the styles from the container rule set with the grid rule set. Specifically, well need to share the width property and values (to make sure our page stays fixed at 960 pixels wide) and the marginproperty and values (to center any element with the class of grid on the page).

Well accomplish this by breaking up the old container rule set into the following:

1. .container, 2. .grid { 3. margin: 0 auto; 4. width: 960px; 5. } 6. .container { 7. padding-left: 30px; 8. padding-right: 30px; 9. }

Now any element with the class of container or grid will be 960pixels wide and centered on the page. Additionally, weve preserved the existing horizontal padding for any element with the class ofcontainer by moving it into a new, separate rule set.

12. All rightall of the heavy lifting needed to get our reusable grid styles into place is finished. Now its time to work in our HTML and to see how these classes perform.

Well begin with the teasers on the home page, within ourindex.html file, aligning them into three columns. Currently, the teasers are wrapped in a

element with the class ofcontainer. Well want to change that class from container to gridso that we can begin placing columns within it.

1.

2. ... 3.

13. Next, well want to add a class of col-1-3 to each of the

elements within the element with the class of grid.

1.

2. 3.

4. ... 5.

6. 7.

8. ... 9.

10. 11.

12. ... 13.

14. 15.

14. And lastly, because each of our columns is an inline-block element, well want to make sure we remove the empty white space between them. Well use comments to do this, and well add a little bit of documentation noting each upcoming section while were at it to better organize our code.

1.

2. 3.

4. 5.

6. ... 7.

12. ... 13.

section class="col-1-3"> 18. ... 19. 20. 21.

To review, on line 3 we leave a comment identifying the Speakers section to follow. At the end of line 7, we open a comment immediately after the closing

tag. Within that comment, on line 9 we identify the Schedule section to come. We then close the comment at the beginning of line 11, just before the openingtag. This same comment structure reappears on lines 13 through 17 between the two elements, right before the Venue section. In all, weve commented out any potential white space between the columns while also using those comments to identify our sections.

We now have a reusable three-column grid that supports multiple arrangements, using both one-third- and two-thirds-width columns.