tailieunhanh - The CSS Anthology: 101 Essential Tips, Tricks & Hacks- P4

The CSS Anthology: 101 Essential Tips, Tricks & Hacks- P4:Apart from writing books like this one, I write code. I make my living by building web sites and applications as, I’m sure, many readers of this book do. I use CSS to complete jobs every day, and I know what it’s like to struggle to make CSS work when the project needs to be finished the next morning. | Text Styling and Other Basics 37 of the set. One way to achieve this would be to assign a class to the first item and style that class differently from other items however there s a more elegant way to create this effect in modern browsers using the pseudo-class selector first-child. Solution Here s a simple list of items marked up as an unordered list excerpt ul li Brie li li Cheddar li li Red Leicester li li Shropshire Blue li ul Using first-child To change the color of the first item in the list without affecting its neighbors we can use the first-child selector. This allows us to target the first element within the ul element as shown in Figure chapter02 excerpt li first-child color red Brie Cheddar Red Leicester Shropshire Blue Figure . Displaying the first list item in red text Unfortunately first-child is unsupported by Internet Explorer 6. So if you still need to fully support it until the number of visitors using this browser to view your Download at 38 The CSS Anthology site becomes negligible you ll need to find another method to create this effect. One such method is to use a class selector. Using a Class Selector To create this effect in IE6 we add a class or id attribute to the element that we wish to style differently. For this example let s use a class excerpt ul li class unusual Brie li li Cheddar li li Red Leicester li li Shropshire Blue li ul Once this in place we create a style rule to implement the desired effect chapter02 excerpt color red How do I add a background color to a heading CSS allows us to add a background color to any element including a heading. Solution Below I ve created a CSS rule for all the level-one headings in a document chapter02 excerpt h1 background-color ADD8E6 color 256579 Download at Text Styling and Other Basics 39 font Verdana Geneva Arial Helvetica