Today’s Goals:
- Begin learning about CSS display property and values block, inline, and inline-block
- Use CSS display values block, inline, and inline-block to create horizontal and vertical webpage menus
Today’s featured site:
- https://saijogeorge.com/css-puns/titanic/ – CSS puns!
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.
- Wednesday’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)
After (forcing h1 and p to be inline and a and img to be block)
- If you add another image or another paragraph, what will happen? Why?
Creating Webpage Menus
- Let’s review how to add bullets to our webpage and then add three below our last image. Are bullets block or inline elements? How can you tell?
- 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? - Create: go here and we will follow the directions to make a vertical menu and a horizontal menu!