Shape of the 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. Practicing and learning 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 examples 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 difference 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 available 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)
- 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 anywhere (any image 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?
2. Complete the following survey to help guide some upcoming lessons we are going to have.
https://forms.office.com/r/s8e2jKCkGk