Publishers of technology books, eBooks, and videos for creative people

Home > Articles

  • Print
  • + Share This
This chapter is from the book

This chapter is from the book

Display Types

We took a look at the block and inline values of the display property a short while ago. In this section, will look at some other values of this property and the related visibility property.

visibility

With visibility, we can show and hide an element. It takes the keyword values visible and hidden, which do pretty much what you'd expect them to. The one thing to note is that even when hidden, elements still take up space in the document flow. If we want the element to completely vanish, and both be invisible and the space it occupies in the document to collapse, we need to use a different property and value: display: hidden.

hidden

When an element has a display value of hidden, it is as if the element doesn't exist. The page is rendered as if the element is not there, and its contents are completely invisible as well.

List Items

Just as it is possible to make inline elements like em display as block elements—and vice versa—with the display property, it's possible to make any element display as a list item. For example, to make paragraphs display as list items, use:

p {
  display: list-item
}

You may need to give the element a left margin, so that the list-style marker (a bullet or number, for example) shows in the margin.

list-style-type

CSS provides many different list style types, which determine how lists are numbered or which bullet characters are used. The list-style-type property can take values that include:

  • circle, disc, and square These specify which character is used for list-item bullets.
  • decimalThis numbers each list item sequentially, starting with 1.
  • upper-roman and lower-romanThis numbers each list item using uppercase (such as IX) and lowercase (ix) roman numerals.
  • upper-greek and lower-greekThese number list items using the Greek alphabet.
  • And several others, including Chinese, Japanese, Armenian, and Georgian language options.

list-style-image

We can specify a bullet image for list items using the list-style-image property, which takes a URL value as its value. It's increasingly common to use a background image as a bullet image, as this gives more precision when it comes to positioning the image than list-style-image. For example, we can use background-position to position an image on the background of an element, but there's no way of positioning a list-style-image.

  • + Share This
  • 🔖 Save To Your Account