XHTML and CSS - Style More Than One Element
Style More Than One Element
In this tutorial I'm going to be showing you how to style more then one element with one block of CSS. First let's add some normal text, a paragraph and a header tag.
<html> <head> <title> This is the title. </title> <style type="text/css"> </style> </head> <body> This is some random text. <h1>This is a header tag.<h1/> <p>This is a paragraph.</p> </body> </html>
Say we wanted the paragraph and the header elements to have a red background and white text, before we would style these elements separately, setting the paragraph element to a red background and white text and then setting our header element to a red background and white text etc. There is a much faster way of doing this by specifying multiple elements, you can specify multiple elements for one rule by separating each element with a coma like in this example below.
<html> <head> <title> This is the title. </title> <style type="text/css"> h1, p { background-color: red; color: white; } </style> </head> <body> This is some random text. <h1>This is a header tag.<h1/> <p>This is a paragraph.</p> </body> </html>
You'll see when you view this in your browser that the header element and the paragraph element have a red background and white text from the one rule, while the normal text is normal.

Page generated in 0.0025 seconds.