CSS Cookbook, 2nd Edition

2017-07-07 02:10:07

Problem

You want to indent entire paragraphs, turning Figure 2-28 into Figure 2-29.

Solution

To achieve the desired effect, use class selectors:

p.normal { padding: 0; margin-left: 0; margin-right: 0; } p.large { margin-left: 33%; margin-right: 5%; } p.medium { margin-left: 15%; margin-right: 33%; }

Figure 2-28. The paragraphs as the browser usually renders them

Figure 2-29. Indented paragraphs

Then place the appropriate attribute in the markup:

<p >Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna al iquam erat volutpat.</p> <p >Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.</p> <p >Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium</p>

Discussion

Class selectors pick any HTML element that uses the class attribute. The difference between class and type selectors is that type selectors pick out every instance of the HTML element. In the following two CSS rules, the first selector is a type selector that signifies all content marked as h2 be displayed as red while the following CSS rule, a class selector, sets the padding of an element to 33%:

h2 { color: red; } .largeIndent { padding-left: 33%; }

Combining both type and class selectors on one element gains greater specificity over the styling of elements. In the following markup, the third element is set to red and also has padding on the left set to 33%:

<h2>This is red.</h2> <h3 >This has a rather large indent.</h3> <h2 >This is both red and indented.</h2>

Another solution that can be used instead of class selectors is to apply the indent, using margins, and then use adjacent sibling selectors to apply the style to the paragraphs:

p, p+p+p+p { padding: 0; margin-left: 0; margin-right: 0; } p+p, p+p+p+p+p { margin-left: 33%; margin-right: 5%; } p+p+p, p+p+p+p+p+p { margin-left: 15%; margin-right: 33%; }

This method takes advantage of the adjacent sibling selectors, which are represented by two or more regular selectors separated by plus sign(s). For example, the H2+p selector stylizes the paragraph immediately following an H2 element.

For this recipe we want to stylize certain paragraphs in the order in which they appear on-screen. For example, p+p selects the paragraph element that follows another paragraph. However, when there are more than two paragraphs, the third paragraph (as well as others after the third paragraph) is rendered in the same style as the second paragraph. This occurs because the third paragraph is immediately followed by a paragraph.

To separate the styles from the second and third paragraphs, set up another CSS rule for the third paragraph that selects three paragraphs that follow each other:

p+p+p { margin-left: 15%; margin-right: 33%; }

Then, build off of these CSS rules by grouping the selectors. Instead of writing two CSS rules to stylize the third and sixth paragraphs, separate the selectors by a comma and a space:

p+p+p, p+p+p+p+p+p { margin-left: 15%; margin-right: 33%; }

The main problem with adjacent sibling selectors is that they aren't supported by all versions of Internet Explorer for Windows. Therefore, these users will not see the paragraphs indented. Adjacent sibling selectors are supported in Safari, Firefox, Netscape Navigator 6+, and Opera 5+.