CSS Display Property

Posted on by tchastkavich

Shape of the Day:

  • Mr. Chastkavich will be checking in from the World of Code Day
  • Learning about CSS display property (Block, inline, and inline-block)

Website of the Day:

https://securityplanner.org/#/ – Get help with making better security decisions for your online accounts and internet-connected devices.

1. Please make sure you have your World of Code Day information ready

  • Mr. Chastkavich will be coming to check in with what you did that day.

2. About the CSS Display Property

  • CSS has the ability to control individual elements that are displayed on a webpage. Here’s another way to create a webpage layout with CSS (this is alternative to positioning and floating).
  • Block and inline were elements we talked about when we first discussed HTML – what are example of block elements again? How about inline elements?
  • Block elements take up as much space as they can (the full width of a page or container you put them in) and thus start on a new line (paragraphs, headers, etc.)
  • Inline elements (default for most) only take up the space they require for the width of content they have and thus do not start on a new line (images, text, links, etc.)
  • Here are a couple good examples to show the different between inline and block: Example 1 and Example 2
  • Refer to the CSS Box Model – If every element basically has an invisible rectangle around it (margins, border, padding) along with background color/image, width AND height, then something should be needed to control that rectangle. It’s the CSS display property with inline-block value. This value makes inline elements respond to the styling options avavilable for the box model, while ALSO keeping it inline. Inline-block is often used to create menus from simple bullets.
  • Create a new webpage to practice with. Start with the usual – opening and closing html, head, title, style, and body tags. Save the file as cssdisplay1.html
  • Learn about a new CSS selector – * – the asterisk, is a symbol you get when you press shift + 8. When you add this to your style sheet, whatever properties we give this selector will be applied to EVERYTHING on the webpage. We’re going to give everything a border so we can see whether certain elements have a block attribute or an inline attribute. Add curly brackets and then border: 1px solid blue; and padding: 4px;
  • Now add some elements: headers, paragraph, links, images (download the four cssdisplay images and use them here – http://bit.ly/WD10stimages )
  • Preview your webpage – what’s block or inline? How can you tell? Try making your window smaller, adjust the size of the window, notice what the elements do and how the boxes/borders react.
  • Change the display value for each element. Force the headline to be inline and the images to be block. Refresh your page.
  • Add another image (any you want – use pexels or unsplash) and see what happens. What is going on?
  • Add three bullets (which one will you use, unorganized or organized list?) below your last image. Are bullets block or inline?
  • Change the display of the bullets to inline and check what happens.
  • Bullets are usually used to create horizontal and vertical menus for websites (like these)
  • What has to be styled to make your bullets look like a menu? What is missing or needs to be changed?