Displaying Elements in CSS

The way in which elements are displayed on a web page can significantly affect the layout of your design. This includes how elements align with each other, how text flows around elements, and even whether or not elements appear at all.

Desired Outcomes

By the end of this lecture, you should be able to:

  • Understand how to display and hide elements.
  • Understand the overflow property works.
  • Understand the difference between the display, visibility and opacity properties.

Display Property

The display property specifies the display behavior of an element. The most common values are:

  • none: This value makes the element and its content disappear from the page completely.
  • block: This value makes the element take up the full width of its parent element. Block-level elements start on a new line.
  • inline: This value makes the element only take up as much width as necessary, and does not force new lines.
  • inline-block: This is a hybrid of inline and block. It makes the element only take up as much width as necessary, but allows for setting of width and height like a block element.

Example syntax:

div {
  position: none | block | inline | inline-block;
}

Example usage:

div {
  display: none; /* The <div> will not appear on the page */
}

p {
  display: block; /* The <p> will take up the full width of its parent */
}

Visibility Property

The visibility property allows you to hide an element, but it will still take up the same space as before. The element is hidden, but still affects layout. The main values are visible (default) and hidden.

Example syntax:

p {
  visibility: hidden | visible;
}

Example usage:

p {
  /* The <p> element will be invisible, but still take up space */
  visibility: hidden; 
}

Opacity Property

The opacity property sets the opacity level for an element. The opacity level describes the transparency level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent.

Example:

p {
  opacity: 0.5; /* The paragraph will be semi-transparent */
}

Overflow Property

The overflow property specifies what should happen if content overflows an element's box. Values include visible (default), hidden, scroll, and auto.

Example syntax:

div {
  overflow: visible | auto | scroll | hidden;
}

Example usage:

div { 
   /* Provides a scrollbar if the <div> content is too big to fit  */
   overflow: auto;
}

Understanding these properties will allow you to better control how elements are displayed on the web page, and handle different scenarios of content overflow and element visibility. Always remember to test your design on different screen sizes to ensure it looks good on all devices.

-75%

Time remaining:
days 00: 00: 00

Learn to code HTML & CSS

From Zero to Hero

Check out this course on Udemy, now at 75% off! Inside this interactive course, I will teach you how to develop websites from scratch moving from beginner to advanced concepts. I take time to explain every detail and finish off by building some real-world websites.

HTML & CSS: From Zero to Hero
Learn to code HTML & CSS

-75%

Time remaining:
days 00: 00: 00

Learn to code JavaScript & jQuery

From Zero to Hero

Check out this course on Udemy, now at 75% off! Inside this interactive course, I will teach you how to develop components from scratch moving from beginner to advanced concepts. I take time to explain every detail and finish off by building some real-world reusable components.

JavaScript & jQuery: From Zero to Hero
Learn to code JavaScript & jQuery

-75%

Time remaining:
days 00: 00: 00

Learn Frontend Web Development

From Zero to Hero

Check out this course on Udemy, now at 75% off! A bundle of the previous two courses. Inside this interactive course, I will teach you how to develop websites from scratch moving from beginner to advanced concepts. I take time to explain every detail and finish off by building some real-world websites.

Frontend Web Development: From Zero to Hero
Learn Frontend Web Development