Formatting text with Styles (Chapter 10)

With CSS, you can change the font, size, weight, slant, line height, foreground and background color, and spacing and alignment of text. You can decide whether it should be underlined or struck through, and you can convert it to all uppercase, all lowercase, or small caps. And you can apply those changes to an entire document or an entire site in just a handful of lines of code.

One of the most important choices you’ll make for yor Web site is the font for the body and headlines. not every system supports the same fonts by default, so you should define alternate fonts as fallbacks. But first let’s see how to define a single font family and the ramifications of not providing the alternates. Although you can specify whichever font you want, your visitors will see that font only if they have it installed on their computer. So, it’s best to use fonts that you can reasonably expect them to have.

In traditional publishing, italics are often used to set off quotations, emphasized text, words that are foreign relative to a language, some scientific names, movie titles, and much more. Sometimes you’ll want to make something italic, but it isn`t appropriate to mark up the content with one of the elements that also happens to render italic text. The CSS font-style property allows you to do this to any element. Bold formatting is probable the most common and effective way to make text stand out. For instance, browsers typically style the h1-h6 headings in bold by default. You may style any text in bold or turn it off. Style sheets five you a lot of flexibility with bold text, providing relative values.

Setting the font size there are two basic ways to do this, you can mandate that a specific size be used or you can have the size be relative to the element’s parent font size. Setting the size relative to the parent takes a little getting used to: you need to understand how the browser treats these units relative to their parents. If you set the font size with pixels, visitors using internet Explorer will not be able to make the text bigger or smaller with the browser’s text option. that’s one argument for sizing your fonts with ems or percentages. Beginning with IE7, visitors can zoom the entire page in and out.which is an improvement over IE6.

Setting all font values at once this is the way to go whenever possible so you can keep your style sheets lean. Just type font, optionally type normal, italic or oblique to set the font style, type the desired font size and if desired, type /line-height, where this is the amount of space there should be between lines, type a space followed by the desired font family or families in order of preference, separated by commas. And there are a lot of more options to change for the formatting text like the backgrounds for the text, or the color,  adding indents or controlling the spacing. Very interesting to apply to our website.

Book Summary of HTML 5 and CSS 3 (Seventh Edition)
http://www.bruceontheloose.com/htmlcss/table-of-contents.php#chapter-10

Leave a comment