Today’s Goals:

• Review CSS and your questions
• CSS triangle– quick demo
• Begin learning about CSS display property  and values block, inline, and inline-block

 Today’s featured site:

• https://neal.fun/deep-sea/ – Learn about what lives in the depths of the ocean as you scroll and scroll…and scroll

 CSS Review

• Our CSS Spreadsheet 
• Your questions:
  1. Whats the easiest way to make sure everything is saved in the right place to make it easier to put images in?
  2. Is there a way to put a gradient onto an image? Such as Hulu’s image?
  3. How can CSS be made easier and faster to use?
  4. Why do you need to put the background color in both the body and wrapper section?

 CSS Triangles

• Think: which one of the box model properties (margin, border, or padding) could potentially be used to create a triangle with CSS? Why? Hint: remember all of the box model properties can be applied in all directions- example: margin-top, border-bottom, padding-right, etc.
• Code:
  https://www.30secondsofcode.org/css/s/triangle  (see it)
  https://codepen.io/pen/?&editable=true  (try it)

 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:
  text: 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.
  Go into your style tags in the head section and add type selectors for h1, p, a, and img with curly brackets
  Add the display property for each selector and change it’s default value to the opposite
  For example, img will have display: block; and h1 will have display: inline;
  Re-launch the webpage but keep the other window open so you can compare the two pages.
• If you add another image or another paragraph, what will happen? Why?
• 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?