- A Short History of Style for the Web
- What Is CSS?
- How Is CSS Used?
- Basic CSS Syntax
- The Basics of Selectors
- Basic Properties: Font Styles
- Inheritance
- Getting Specific: class and id Selectors
- Common Text Layout Properties
- Combinators: Descendant and Child Selectors
- Common Background Properties
- Dynamic Selectors
- Basic Page Layout
- Advanced Page Layout
- Positioning
- Advanced Selectors
- Display Types
- More Properties
- Media Types
- Importing Style Sheets
- Quality Assurance
- Specific Challenges and Techniques
This chapter is from the book
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.
- decimal—This numbers each list item sequentially, starting with 1.
- upper-roman and lower-roman—This numbers each list item using uppercase (such as IX) and lowercase (ix) roman numerals.
- upper-greek and lower-greek—These 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.