Today’s Goal:

• Begin learning about CSS display property and values block, inline, and inline-block

 Today’s Featured Site:

• http://www.snowdaycalculator.com/calculator.php– This student created a snow day calculator while still in MIDDLE school; read more about that cool fact here.

 About the CSS Display Property

• CSS can control how individual elements are displayed on a webpage. This is another way to create a webpage layout with CSS (in addition to positioning and floating, which we have recently learned).
• We will look at block and inline display today.
• Block elements take up as much space as they can (the full width of a page or container) and start on a new line (think paragraphs, headlines) while inline elements (the default display) only take up the space they need for the width of their content and don’t start on a new line (like images, links).
• Check out 2 good visuals for block and inline here and here
• Remember the CSS box model? Every element basically has an invisible rectangle around it that can have margins, a border, padding, background color/image, width and height. 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. Inline-block is often used to create menus from simple bullets.
• Here is a good visual for inline-block.

  Block and Inline Elements

• Let’s start a new page and add some things. Open Notepad++, and add opening and closing html, head, title, style, and body tags. Save this as cssdisplay1.html.
• Let’s learn about a new CSS selector– the universal *. Hit shift and the number 8 on your keyboard and add the * to your style sheet inside your style tags in your head section. Whatever properties we give this universal selector will be applied to EVERYTHING on our webpage. We’re going to give everything a border so we can see whether certain elements are block or inline. Add some curly brackets and then border: 1px solid blue; and padding: 3px;
• Now let’s add some elements: headline, paragraph, link, images (use these: https://www.mhswebdesign.com/storage/2012/06/1.jpg, https://www.mhswebdesign.com/storage/2012/06/2.jpg, https://www.mhswebdesign.com/storage/2012/06/3.jpg, https://www.mhswebdesign.com/storage/2012/06/4.jpg)
• Is each element block or inline? How can you tell?
• Let’s go into the CSS and change the display value for each element. For example, we will force the headline to be inline and the image to be block.
• Let’s now add another image and see what happens. What is going on?
• Let’s add some bullets to begin practicing creating a webpage menu by styling bullets. A new display value, inline-block will help us create a horizontal menu along with the float property that we just learned. We’ll also add some padding and a border.
• Last thing: Go to different websites you like and see what types of menus or navigation they use. Is there a horizontal menu at the top of the page? Is there a vertical menu along the side? Think about how bullets could potentially be used to create menus like this.