HTML5 and CSS3, Second Edition
CHAPTER 4 Styling Content and Interfaces For far too long, we developers have hacked around CSS to get the effects we need in ou ...
:first-of-type [p:first-of-type{color:blue;}] Finds the first element of the given type. [C2, F3.5, S3, IE9, O9.5, iOS3, A2] :la ...
Tip 10 Styling Tables with Pseudoclasses A pseudoclass in CSS is a way to select elements based on information that lies outside ...
<th>Quantity</th> <th>Total</th> </tr> <tr> <td>Coffeemug</td> <td>$10.00& ...
css3_advanced_selectors/stylesheets/style.css th{ background-color:#000; color:#fff; } Apply that style, and the table looks lik ...
So, this selector says, “Find me every even table row and color it. Then find every odd row and color that, too.” That takes car ...
If you wanted every third row, you’d use 3n. You can also use the offset so that you can start further down the table. This sele ...
css3_advanced_selectors/stylesheets/style.css tr:last-child{ font-weight:bolder; } Let’s do the same thing with the last column ...
Here we’re specifying a specific child, the second to the last. There’s one more thing we should do with this table, though. Ear ...
out Internet Explorer 8 users. Of course, there’s another technique if doing nothing isn’t the right approach for you. Change th ...
Figure 10—Our table looks great in Internet Explorer. Although this will require the user to have JavaScript turned on, the tabl ...
Tip 11 Making Links Printable with :after and content CSS can style existing elements, but it can also inject content into a doc ...
Creating a Printer-Only Style Sheet When we add a style sheet to a page, we can specify the media type that the styles apply to. ...
This syntax isn’t supported in many browsers, so the specification calls on browser vendors to support both the single- and doub ...
Tip 12 Building Mobile Interfaces with Media Queries We’ve been able to define media-specific style sheets for quite a while, bu ...
Our current blog is a two-column layout, with a main content region and a sidebar. The easiest way to make this more readable on ...
Figure 11—Our blog page on the iPhone Falling Back Media queries are supported in Firefox, Chrome, Safari, Opera, and Internet E ...
Tip 13 Creating Multicolumn Layouts The print industry has had columns for years, and web designers have looked at those publica ...
The new director of communications, who has a background in print publica- tions, has decided that she would like the newsletter ...
<div> <p> Loremipsumdolorsit amet... </p> </div> </article> <articleid="birthdays"> <head ...
«
1
2
3
4
5
6
7
8
9
10
»
Free download pdf