Type selectors select any of the elements on a page that match the selector. For example, the selector
em selects any
<em> elements on the page (that is any element marked up as
<em>...</em>. Similarly, the
p selector selects every paragraph, that is every element marked up as
<p>...</p>. These are the most straightforward of all the CSS selectors, and we've already dealt with them quite a bit in the introduction, so we're not going to labour the point here.
The form of a type selector is simple, it is just the tag that you use to mark up an element on an HTML page, minus the "<" and ">". Any HTML element can be used in this way.
Some more examples are
liselects any elements marked up as
and so on.
Using a type selector, you can change the appearance of any or every element on your page. If you have correctly marked up a page using standards-based structural HTML, to use this type of selector you never have to edit your HTML again. It's a good type of selector to practice with when you first start using style sheets to get up to speed quickly with the different properties and values, and their level of support.
When people first learn about style sheets, they generally think that they are restricted to one kind of selector, this one. But that is far from the case. Once you're confident with HTML element selectors don't be afraid to start looking at all the others.
While we're talking about the selectors which select HTML elements, a quick word about the nature of these elements might be a good idea.
Many web developers may not be aware that the elements they use to create their web pages belong to three different types. Each type of element displays in a different way, as explained below. This is why CSS has a
display property. With the display property you can, theoretically, redefine the display type of an element. In practice, browsers may (and version 4 browsers did) ignore any attempt to redefine the display type of an element. Instead, they use the display type as specified by the W3C's HTML recommendation. See the browser compatibility information for the display property for information about current browsers in this regard.
The different types of display are:
- list item
Block elements are separated from surrounding elements in the flow of the HTML page. Browsers generally give block elements a standard margin to the top and bottom. With cascading style sheets, you can redefine the margin around block elements. Examples of block elements are
Inline elements are not separated from surrounding elements in the flow, but rather follow directly on from their adjacent elements. Inline elements display just as text does on a page. Examples of inline elements are
List item elements display similarly to block elements, but in addition, a marker (a bullet, or an alpha numeric character) is added to the left of the element, and the element is indented with respect to its parent element. With style sheets an image can be specified as the marker, and different types of marker, in addition to the common disc and square, can be specified. The obvious example of a list item element is
<li>. Note that both
<ol> are in fact just block elements. Which makes sense if you think about it.
There are other display types related to tables, and for generated content. These are very specialized, and for more, see our discussion of the display property.
Empowering your Markup for Web 2.0
Style Master developer John Allsopp tells you all you need to know about this exciting new approach to web development