LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE HTML and CSS 8th Edition Chapter 10: Formatting Text with Styles

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Objectives Format text with CSS styles. Choose a font family. Specify alternate fonts. Apply italics and bold formatting. Set the font size and the line height. Set all font values at once. Set the text color and change the text’s background. Control spacing with tracking and kerning. Add indents and set white space properties.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Formatting Text with Styles With CSS, you can: –Change font, size, weight, slant, line height. –Change foreground and background color. –Change spacing and alignment of text. –Decide whether to underline or strike through text. –Convert text to all uppercase, all lowercase, or small caps. –Apply changes to entire document or entire site in just a handful of lines of code.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Before and After

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Choosing a Font Family Choose a font for the body and headlines on your site. –Not every system supports the same fonts by default, so you define alternate fonts as fallbacks. To set the font family: –After the desired selector in your style sheet, type font- family: name Name is your first choice of font.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Fonts and Operating Systems Geneva and Gill Sans on OS X Times New Roman is the default for Windows

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Specifying Alternate Fonts Font-family property includes alternate fonts if a browser doesn’t have the first one installed. –The browser will use the first listed font that’s available on the visitor’s system. Font stack is a list of fonts that includes at least three fonts: the preferred font, one or more alternates, and a generic standard font, in case the systems don’t support the others you listed.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Specify Alternate Fonts Type font-family: name –Name is your first choice of font. Type, name2 –Name2 is your second font choice. –Separate each choice with a comma and a space. Repeat step 2 as desired. Finish list of fonts with a generic font name (serif, sans-serif, cursive, fantasy, or monospace).

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Default Fonts Shared by Mac OS and Windows Default fonts shared by Mac OS and Windows: –Arial, Comic Sans MS, Courier New, Georgia, Impact, Trebuchet MS, Times New Roman, and Verdana. Both Mac OS and Windows have more system fonts for use in font stacks. Web fonts: Increasingly common to load a font that systems don’t have by default. Use font-family: sans-serif; to show Arial on Windows and Helvetica on OS X.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Creating Italics Italics set off quotations, emphasized text, foreign words, scientific names, and movie titles. CSS font-style property can italicize any element. By default, browsers italicize cite, em, and i.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Create or Remove Italics To create italics: –Type font-style: –After the colon (:), type italic for italic text, or oblique for oblique text. Might not notice a difference with oblique in all instances. To remove italics: –Type font-style: normal.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Real Italics vs. Faux Italics, Plus Oblique Text True italic is not a slanted version of normal text; includes differences appropriate to the form. –Palatino Linotype has a true italic font face. Faux italic slants the normal font. –Geneva doesn’t have a true italic version. Oblique is the normal letters slanted, with adjustments to spacing, but with the same letters.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Real Italics and Faux Italics

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Applying Bold Formatting Bold formatting is the most common and effective way to make text stand out. Browsers typically style the h1–h6 headings in bold by default. Just as with italics, you may style any text in bold or turn it off.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Apply Bold Formatting Type font-weight:. Type bold to give a regular bold weight to the text. –Or type a multiple of 100 between 100 and 900. Or type bolder or lighter to use a value relative to the current weight. To remove bold: –type font-weight: normal.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Bold Formatting

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Setting the Font Size Two basic ways to set the font size for text in webpage: –Mandate that a specific size be used. –Have size be relative to element’s parent font size by using percentage, em, or rem values. Relative units have become even more valuable with the explosion of devices of various sizes.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Understanding em and Percentage Font Sizes With relative font sizes, establish a baseline on the body element, by declaring body { font-size: 100%; } To figure out what em values to specify: –1em is equal to default size, in this case 16px. –Determine the em (or percentage) values via division. Desired size / parent’s size = value If user overrides default in browser settings, your page respects this and sizes the rest of the text accordingly.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Font Sizes Displayed in Browser The different heading font sizes reflect the hierarchy of information.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Sizing Fonts with Rem Rem, short for root em, is like em, but it sizes everything relative to the root (HTML element) instead of to the parent element. New formula: desired size / root size = value Internet Explorer didn’t support it until version 9.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Mandate a Specific Font Size Type font-size:. Type a specific size after the colon (:). Or use a keyword to specify the size: –xx-small, x-small, small, medium, large, x-large, or xx-large.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Size that Depends on the Parent or Root Element’s Size To set a size that depends on the parent element's size: –Type font-size:. –Type the relative value following the colon (:). –Or use a relative keyword: larger or smaller. To set a size that depends on the root element’s size: –Type font-size:. –Type the root relative value following the colon (:)

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Setting the Line Height Line height refers to a paragraph’s leading. Leading is the amount of space between each line in paragraph. Using a large line height can sometimes make body text easier to read. A small line height for headings with more than one line makes them look more stylish.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Set the Line Height Type line-height:. Type n –Where n is a number to be multiplied by element’s font size to obtain the desired line height. Most common approach, just a number with no unit. Or type a, where a is a value in ems, pixels, or points. –Use points only for print. Or type p% –Where p% is a percentage of the font size.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Spacing Lines with Line-Height Spacing out lines with line-height can make them easier to read.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Setting All Font Values at Once Setting the font style, weight, variant, size, line height, and family all at once keeps style sheets lean.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Set All Font Values at Once Type font:. –Option: type normal, italic, or oblique to set the font style. –Option: type normal, bold, bolder, lighter, or a multiple of 100 (up to 900) to set the font weight. –Option: type normal or small-caps to remove or set small caps. Type the desired font size. –Option: type line-height. Where line-height is amount of space between lines. Type space followed by desired font family or families in order of preference, separated by commas.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Setting the Color Can change the color of the elements on webpage. Use color names, hexadecimals, or RGB, HSL, RGBA, or HSLA values to define your colors.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Set the Color Type color:. Type colorname –Colorname is one of the predefined colors. Or type #rrggbb –rrggbb is color’s hexadecimal representation. –Most common way to specify colors. Or type rgb(r, g, b) –r, g, and b are integers from 0–255 that specify amount of red, green, and blue, respectively, in the desired color.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Set the Color Or type rgb(r%, g%, b%) –Where r, g, and b give percentage of red, green, and blue in the desired color. Or type hsl(h, s, l) –Where h is integer from 0–360 that specifies hue –Where s and l are percentages from 0 to 100 that specify amount of saturation and lightness, respectively, in the desired color. Generally better to use hex or RGB for non-transparent colors.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Set the Color Or type rgba(r, g, b, a) –Where r, g, and b are integers from 0–255 that specify amount of red, green, and blue. –Where a is a decimal from 0 to 1 that specifies the amount of alpha transparency in the desired color. Or type hsla(h, s, l, a) –Where h is an integer from 0–360 that specifies hue, –Where s and l are percentages from 0 to 100 that specify the amount of saturation and lightness. –Where a is a decimal from 0 to 1 that specifies amount of alpha transparency in desired color.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Setting the Background Set the background of individual elements, the whole page, or any combination of the two. You can change the background of just a few paragraphs or words, links in their different states, sections of content, and more. To change the background color: –Type background-color:. –Type transparent or color Where color is a color name or a hex, RGB, RGBA, HSL, or HSLA color value.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Background Color The entire page has a light blue background. The white fills out the content area.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Use a Background Image Type background- image:. Then type url(image.png) –image.png is the location and file name of the background image relative to location of style sheet. –Or type none to use no image at all.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Repeat a Background Image Type background- repeat: direction –direction is either repeat to tile the image both horizontally and vertically, repeat-x to tile the image only horizontally, repeat-y to tile the image only vertically, or no-repeat to not tile the image at all.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Control Whether the Background Image is Attached Type background-attachment:. Then type: –fixed to stick the background image to the browser window, –scroll to let it move when the visitor scrolls the whole page, –local so it scrolls only when the visitor scrolls its element. –Leaving out background-attachment defaults to scroll.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Background Image— Fixed Versus Scroll

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Specify the Position of an Element’s Background Image Type background- position: x y. –Where x and y can be expressed as a percentage or as an absolute distance, such as 20px 147px (negative values are also allowed). –Or use the values left, center, or right for x and top, center, or bottom for y.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Change All the Background Properties at Once Type background:. Specify any of the accepted background property values in any order.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Controlling Spacing Tracking: Add or reduce spacing between words. To specify tracking: –Type word-spacing: length Where length is a number with units, as in 0.4em or 5px. Kerning: Add or reduces spacing between letters. To specify kerning: –Type letter-spacing: length Where length is a number with units, as in 0.4em or 5px.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Spacing The letters in all headings now have more space between them.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Adding Indents Text-indent property determines how much space should precede the first line of a paragraph. To add indents: –Type text-indent: length. Where length is a number with units.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Indenting Our Page The first line in each paragraph is indented 30 pixels.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Aligning Text Set text to always aligns right, left, center, or justified, as desired. To align text: –Type text-align: –Type left to align the text to the left. Or type right to align the text to the right. Or type center to center the text in the middle of the screen. Or type justify to align the text on both the right and the left.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Aligning Text in Page After the changes, the headings and.subhead paragraph are centered, while all other paragraph text is justified. The text-indent value set on paragraphs earlier remains.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Changing the Text Case Text-transform property defines text case for a style. Displays text with initial capital letters, with all capital letters, with all lowercase letters, or as typed. To change the text case: –Type text-transform:. –Type capitalize after the colon (:) to put the first character of each word in uppercase. –Or type uppercase to change all the letters to uppercase. –Or type lowercase to change all the letters to lowercase. –Or type none to leave the text as is (possibly canceling out an inherited value).

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Text Case of Page Now the main heading really stands out. The h2 headings are unchanged.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Using Small Caps Many fonts have a small caps variant that includes uppercase versions of the letters proportionately reduced to small caps size. Invoke small caps variant with font-variant property. –Don’t forget the hyphen in both font-variant and small-caps. Rendering small caps may vary a tiny bit from browser to browser.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Using and Removing a Small Caps Font To use a small caps font: –Type font-variant: small-caps. To remove small caps: –Type font-variant: none.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Decorating Text Text-decoration property lets you adorn text with underlines and other types of lines. –Most common use is for styling link states. To decorate text: –Type text-decoration: –Type underline after the colon (:) to underline text. Or type overline for a line above the text. Or type line-through to strike out the text. To get rid of decorations: –Type text-decoration: none;

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Decorating Text No underline in default state. Link is underlined when hovered over.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Setting White Space Properties White-space property displays extra spaces and returns. –By default, multiple spaces and returns in HTML document are either displayed as a single space or ignored. To set white space properties: –Type white-space:. –Type pre to have browsers display all the spaces and returns in the original text. Or type nowrap to treat all spaces as non-breaking. Or type normal to treat white space as usual.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE A Horizontal Scrollbar Appears