Today’s goals:

• Check out your graphics from your recent graphic design projects: Period 5 monthly graphics, Period 6 monthly graphics, and Harvest of the Month
• Begin learning about CSS display property and values block, inline, and inline-block

 Today’s featured website:

• https://codepen.io/cgorton/pen/aEoOKa– Decorate a virtual holiday cookie!

 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.
• We discussed block and inline elements when we first learned HTML. Let’s review- what are example of block elements? How about inline?
• 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)
• Launch your webpage and look at each element. What’s block or inline? How can you tell?
• Keep your webpage open in the browser. 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. Re-launch the webpage but keep the other window open so you can compare the two pages.
• Let’s now add another image and see what happens. What is going on?
• Let’s review how to add bullets to our webpage and then add three below our last image. Are bullets block or inline elements?
• Let’s change the display of our bullets to inline and see what happens.
• From bullets to a website menu Bullets are often used to create horizontal and vertical menus for websites (like these). Let’s look at our bullets and see what has to be styled to make them look like a menu? What styling is needed? What is missing or what needs or what needs to be changed?