display

Class Wednesday, January 27, 2016

 Today’s goals:

  • Learn CSS display property

 Seat change time for new quarter!

 Today’s featured website:

 What is the CSS Display Property?

  • In pairs, you will find answers to the following questions:
    1. What is the CSS display property?
    2. Why is it important?
    3. What are some examples of the display property (some of the values)?
    4. Name one display value and what it does.
    5. Name one display value and what it does.
    6. Name one display value and what it does.

 More About the CSS Display Property

  • CSS can control not only the page layout, but also how individual elements are displayed on a webpage.
  • We will practice block, inline, and inline-block today and tomorrow (later we’ll discuss flex).
  • 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) are inline with the rest of the 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 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.
  • Remember, to create the menus you used in your webpage project, you styled bullets and changed the display to inline or block to make a navigation panel that had a width and height and background color, among other things (see examples here).
  • Let’s look at the navigation panel examples and discuss why some have display: inline and others have display: block. Consider: is the menu horizontal or vertical; bullets are by default inline; block elements can have a width and height

 Using Bullets with Block & Inline to Create Menus

  • To begin, open Notepad++ and start a new page.
  • To better understand block and inline, you are going to create two menus similar to what you see here, one vertical and one horizontal.
  • Let’s start with a vertical menu:
    • Start a new page with the basic opening and closing html, head, and body tags.
    • Put a style sheet in the head section by adding style type=text/css (peek at your past projects for a reminder) or check-in here.
    • Add four bullets in your body section (go here for a reminder). Call them Home, About, Videos, and Blog.
    • Make each bullet a link and for the link source put #. Check-in here.
    • Now you have a list of regular bullets with links. Go ahead and preview that in the browser. Not very exciting but if we remove the bullets and change the display we can create a vertical menu!
    • First you are going to add ul to your style sheet in your head section and then remove the bullets- go here to see how this looks.
    • Now, let’s add li a to our style sheet- that is the bullet along with the link. Once you do that, add display: block to make the whole menu, not just the link, clickable for each bullet item. See here.
    • Now you can see a vertical menu taking shape. Change the background color of the menu. Change the text color. Try adding a link hover effect. Try adding a border around the outside of the menu. Try adding a border around both the outside and inside. See here for some guidance and see here for colors.
  • Now do the same thing for a horizontal menu.
    • First, comment out your style sheet since we’ll make a new one. Add HTML comment code around the style sheet in the head section. Check-in here.
    • Now, create a new style sheet and add an li with display: inline and a ul with the same properties as the previous style sheet for list-style, margins, and padding (like this).
    • Now, comment out the display property in your style sheet for li (should look like /* display: inline */). Add float: left to li.
    • Let’s style the links in your bullets to make it look more like a menu. Add li a to your style sheet and add padding: 8px, background-color: green, and display: block (like this).
    • Why did we float the bullets? Why did we make the bullet links have display: block and not inline?
    • To make things more exciting, use this code as a guide and change up the colors. Also try adding borders.
  • Extra challenge: Try making a drop-down menu.