Today’s goals:
- Review grading policy
- Continue practicing CSS display- block, inline, and inline-block
Today’s featured website(s):
- http://shoulddesignersco.de/– DJ Khaled has lots of questions for designers! Make sure to view the code. Also, this is a great domain name. Notice what happens to the grid of items when you shrink the browser.
Grading Policy
Review: Box Model, Block, Inline, & Inline Block
- Quick visual review in Notepad++
- CSS box model video– stop at 2:30
- CSS display video– start at 3:24 and end at 5:00
A Tale of 2 Tables- Practicing with Inline-Block
- Remember the CSS box model? Every element basically has an invisible rectangle around it that can have a border, background color/image, width and height (margins, borders, padding). The CSS display property can control that rectangle and the inline-block value can make inline elements respond to the styling options available for the box model (margins, borders, padding, width & height) while also keeping it inline.
- Here is a good visual for inline-block
- To understand the benefit of display: inline-block, you’re going to create a page with two tables, one made with HTML table code and the other with the inline-block value.
- Open Notepad++ and start a new page (use same start code from PART 1 here)
- Let’s add a regular table to our body section that has 3 rows and 3 columns (3 cells per table row). Table code reminder here.
- Number each table cell 1 through 9 and add this to each one to take up some space: Lorem ipsum dolor sit amet.
- Let’s add a border-width, border-color, border-style and padding so it’s easier to see the table. Add tr, td to your style sheet and add values for border-width, border-color, border-style and padding.
- Finally, add table to your style sheet and give it a width of 500px.
- Let’s make another table now, composed of elements with the inline-block display.
- Create a class in your style sheet and call it .box. Give it a width of 100px, a height of 80px, and display: inline-block. Add a border by using border: 2px groove #000000. Check-in here.
- Now, add 9 opening and closing div tags and in each one add div class=”box” and add box 1, box 2, etc. Like this.
- What happens to both tables when you shrink your browser window?
- What is inline-block doing to our divs? What does it mean to have the advantages of both block (takes up space, can have width and height) and inline (content aligned next to each other)?