Learn how the display property works.
- [Instructor] One property you'll use a lot is the Display property. This has to do with how an element will take up space on the page. There are several different possible values, but these are the ones you'll use most often to do layouts, display: inline, block, inline-block, flex, and grid. Every element on your page starts out as a rectangle. Inline elements are usually bits of text. For example, a span, a strong, an M element. Inline means the element is in line with other text and doesn't break the flow of text going from left to right.
You can add margin and padding to an inline element, but it will remain in line with the other text, and these only effect the horizontal flow of text. You can't add vertical margin or padding. An inline element will also ignore a height or width attribute. Block elements take up a block of area on the page. Examples are a paragraph, a H1, a dib, or structural elements like section or nab. Block elements by default take up the full width of space that's available, whether it's the width of the page or a containing element.
You can change the width or the height of a block element with CSS. Every block element will always start on a new line by default. Inline-block is kind of a combination of the two. The element appears inline like an inline element but you can give it a width or height style which will be followed, although it will stay in line. The last two values for display are flex and grid. These are special because they affect how all the elements inside them are displayed. They're used to create a flex box layout or a grid layout which we will look at in detail in later videos.
Even before you start using CSS to create a layout for a page, it already has a layout. Here we have some headings and paragraphs, and they automatically flow down the page, as they are all block elements. This is important because you want to prepare for situations, where, for some reason, the CSS doesn't load and the browser has to display the page without CSS. This is more common if you're on a really slow connection, or for example, if someone is viewing the page in a way that doesn't use CSS, such as a person who is blind who is using a screen reader that reads the page out loud to them.
When you're creating the HTML for a page, imagine that the user is only getting the text, and use that to determine what order everything should go in. Like the header at the top, followed by the main content, and then supplementary content. Then you can use CSS to arrange them on the page visually. But if things are already in a good order, you probably won't have to move them very much.
- What is responsive design?
- The responsive page structure
- Accessibility and responsive design
- Using media queries
- Designing with CSS Grid
- Designing with CSS Flexbox