block and inline

Class Tuesday, January 21, 2020

 Today’s Goals:

  • Use CSS display values block, inline, and inline-block to create horizontal and vertical webpage menus
  • Complete a self-guided review of CSS

 Today’s featured app:

  Block and Inline Elements

  • CSS can control how individual elements are displayed on a webpage using the display property . Let’s look at all of the different values for this property. This is another way to create a webpage layout with CSS (in addition to the other properties we’ve learned).
  • Block elements always start on a new line and take up as much space as possible (filling their parent container). You can use CSS box model properties on block elements (margins, border, and padding) and also add a background-color, height, and width.
    Examples: h1 (headline), p (paragraph), div tags
  • Inline elements never start on a new line and squish next to other content beside them. Inline elements don’t respond to box model properties (can’t give them margins, borders, or padding or a background color and height/width properties.
    Examples: img (images), a (links)
  • Inline-block brings together the inline and block values so that block elements can remain block but also line up with other content and inline elements can be given borders, padding, background-color, etc.
  • Last week’s practice page with block and inline elements:
    Get code: If you had any issues on Wednesday with your code, click here to download practice code  to use! Copy and paste it over your other code.
    Before (default behavior of h1, p, a, and img elements)
    normal
    After (forcing h1 and p to be inline and a and img to be block)
    flipped

 Creating Webpage Menus

  • From bullets to a website menu Bullets are often used to create horizontal and vertical menus for websites (like these ).
  • Create: go here  and we will follow the directions to make a vertical menu and a horizontal menu!

 Self-guided reviews