CS403: Online Network Exploration

1. CS403: Online Network Exploration Cascading Style Sheets Part 2 Fall, 2007 Modified by Linda Kenney Oct. 24, 2007 CS403 Introduction

2. CSS properties • You should have a good understanding of the basic syntax of CSS and know how to associate CSS with XHTML in a variety of ways. • The declarations that appear within style rules and inline styles consist of properties and their associated values. • To use CSS effectively, we need to know what properties are available, which values they can accept and to which XHTML elements they may be applied. CS403 Cascading Style Sheets

3. Color names • Many of our examples so far have used the color property with a color name as its value. • However, this is not how Web authors typically use the color property. • There are only sixteen color names that are mentioned in the CSS standard. • These color names are white, black, gray, silver, red, blue, green, fuchsia, purple, maroon, aqua, navy, teal, lime, olive and yellow. • While browsers may recognize other color names of their own choosing, these sixteen are the only ones you can reasonably expect all browsers to recognize. • And since the standard doesn’t specifically define what colors these names should apply to, they won’t necessarily result in the same colors in every browser. CS403 Cascading Style Sheets

4. Web authors seldom use these color names and instead use other means of specifying colors in CSS. • A more efficient (and more common) way of specifying RGB colors is using a single number in the hexadecimal number system. CS403 Cascading Style Sheets

5. The hexadecimal number system • The hexadecimal number system is a base 16 system with 16 digits: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E and F • The beauty of the hexadecimal system is that the largest six-digit value in this system is FFFFFF, which represents 16,777,216. • What is the smallest? • This makes a six-digit hex value an ideal, if somewhat odd-looking, way to specify a color. CS403 Cascading Style Sheets

6. Colors using hexadecimal notation • When using a six-digit hex value to specify a color in CSS, it must begin with a number sign (#). • This gives the browser a way to easily distinguish between color names and color numbers, since a six-digit hex value may consist of six letters. • Forgetting the number sign may cause some browsers to ignore the color property altogether. • The letters acting as digits in a hex value may be either uppercase or lowercase. h1 {color: #56F3B4;} h1 {color: #BADCAB;} h1 {color: #B48;}h1 {color: #BB4488;} CS403 Cascading Style Sheets

7. The Web Color Palette • A collection of 216 colors that display the same on both the Mac and PC platforms. • See the Color Chart at http://webdevfoundations.net/color/index.htm CS403 Cascading Style Sheets

8. Color names • Some colors can be referred to by their names. • A chart for these is shown below. http://webdevfoundations.net/color/index.htm • However, be aware that the W3C does not recommend the use of color names (use hexadecimal values instead). CS403 Cascading Style Sheets

9. Accessibility and color • Not all users can distinguish all colors. • See: http://www.vischeck.com/vischeck/vischeckURL.php • It’s best to choose background colors with a high amount of contrast. • Avoid using the following colors next to each other – red, green, brown, gray, purple. • White, black and shades of blue and yellow are easier to differentiate. CS403 Cascading Style Sheets

10. The background-color property • The background-color property is used to set the background color of an element. • When setting an element’s background-color property, you should always set a contrasting value for the color property as well. h1 {background-color: #000066; color: #FFFF66;} body {background-color: #FFFF66; color: #000066;} CS403 Cascading Style Sheets

11. Fonts • A font, or typeface, is a description of what characters should look like. • Consider the following examples showing the same text in a variety of different fonts CS403 Cascading Style Sheets

12. Fonts (cont.) Notice the different types of contrast these fonts create. • Some are subtle, others assertive • Some are heavy, others are light • Some are formal, others are informal • Some look like print, others look like handwriting • Some spread the text out, others condense it • Some are easy to read on the screen, others are more difficult CS403 Cascading Style Sheets

13. Fonts on the Web • Fonts present special challenges on the Web. • Most importantly, a Web author must remember that a browser only has access to the fonts installed on the computer where it is running. Different computers have different fonts installed. • Another issue is that most fonts were designed for use on the printed page, not the computer screen. • As a result, care must be used to select fonts that are not only likely to be available, but also likely to be readable on the screen. CS403 Cascading Style Sheets

14. Fonts on the Web (cont.) • If you ask the browser to use a font that it does not have access to, it will be unable to comply with your request. • It will still show the text, but in a font of its own choosing. • Therefore, when telling browsers what font to use, it’s always best to give them a prioritized list of options. • That allows the browser to look for each font in the order they’re specified and use the first one it finds. • If it exhausts the list without finding any of the requested fonts, it uses a font of its own choosing. • If the list ends with the name of generic font family, the browser is free to look for any font it has available that falls into that family if it can’t find any of the others specified. CS403 Cascading Style Sheets

15. Generic font families • There are five generic font families recognized by CSS. • Fonts in the serif family have serifs at the ends of many of the strokes used to make the letters. • These tend to be the more formal, conservative fonts best suited to large blocks of body text. • Fonts in the sans-serif family do not have serifs • These tend to be somewhat less formal, but “cleaner,” fonts well suited to short text such as headings and captions. • Fonts in the cursive family tend to look like handwriting. • These can range from formal to informal, but are useful when trying to convey a personal touch. • Fonts in the fantasy family can be pretty much anything that doesn’t fit nicely in the other families. • Since the results are very hard to predict, it is difficult to use this generic font family effectively. • Fonts in the monospace family have characters guaranteed to be all the same width • These are typically the least attractive fonts and are often used only when predictable character widths are desired. CS403 Cascading Style Sheets

16. The font-family property • The font-family property can be used to set the font that the browser will use to present the text within an element. • The value of the font-family property should be a comma-separated list of font names. • Put the preferred fonts earlier in the list and less ideal fonts later in the list. • It’s recommended that you end the list with the name of a generic font family. • Font names that contains spaces should be quoted with single or double quotes. • Single quotes are useful in inline styles, since they must be inside a quoted attribute value CS403 Cascading Style Sheets

17. The following examples demonstrate some common font lists body {font-family: "times new roman", times, serif;} h1 {font-family: verdana, arial, helvetica, sans-serif;} h2 {font-family: arial, helvetica, sans-serif;} p {font-family: georgia, "times new roman", times, serif;}code {font-family: "courier new", courier, monaco, monospace;} .signature{font-family: "zapf chancery", cursive;} CS403 Cascading Style Sheets

18. The font-weight property • When text is made bold, typographers think of that as having increased the weight of the text. • To increase the weight of text with CSS, use the font-weight property. • The most commonly used value for the font-weight property is bold. • Values of normal, bolder and lighter are also acceptable. em {font-weight: bold;}.aside {font-weight: lighter;}.important {font-weight: bolder;}h4, h5, h6 {font-weight: normal;} CS403 Cascading Style Sheets

19. The font-style property • The font-style property is used to select a particular style of text. • It accepts one of three values. • The most commonly used value is italic. • The value oblique is also available, but it is not as commonly used. • In some cases, oblique text and italic text will look the same.. • In other cases, they will look different • Oblique fonts will typically appear simply as slanted versions of the base font, while italic fonts are likely to be more stylized versions of the base font. • A value of normal is available to specify “regular” text. • This is useful for over-riding inherited font-style properties or ensuring that an element is not rendered in italic or oblique text due to a browser’s default presentation. CS403 Cascading Style Sheets

20. Font-style property examples em {font-weight: bold; font-style: normal;} .slanted {font-style: oblique;} .title{font-style: italic;} h1, h2, h3 {font-weight: normal; font-style: italic;} CS403 Cascading Style Sheets

21. The font-variant property • The font-variant property can be used to select variants of the specified font-family. • A value of small-caps instructs the browser to search the specified font family for a small caps variant. • All letters in a small caps font look like uppercase. • A value of normal instructs the browser to choose a font that is not a small caps variant. • This value is useful for over-riding inherited values. h1, h2, h3 {font-variant: small-caps;} CS403 Cascading Style Sheets

22. The font-size property (see p. 89) • The font-size property is used to specify the size of the font used to present an element. • It can accept several types of value. • It can accept a length value like em , the width of a capital M of the current font. • It can also accept one of seven absolute sizing keywords • They are xx-small, x-small, small, medium, large, x-large and xx-large. • It can also accept one of two relative sizing keywords. • They are larger and smaller. Both are relative to the font size of the parent element • Or it can accept a percentage value • Percentages are relative to the font size of the parent element. CS403 Cascading Style Sheets

23. font-size property examples p {font-size: 12pt;} .caption {font-size: 10px;} #footer{font-size: 0.75em;} h1 {font-size: 200%;} h2 {font-size: x-large;} h3 {font-size: larger;} CS403 Cascading Style Sheets

24. The line-height property • The line-height property is used to set the spacing between the baselines of adjacent lines of text.. • When used in conjunction with font size, this property effectively controls line spacing • The line-height property can accept several types of values. • It can accept length values, like em • It can accept percentage values • It can accept a numerical value (with no unit or percent sign) • Such a value is used as a multiplier applied to the font size of the current element • For example, a value of 2 would produce double-spacing and a value of 1.5 would produce space-and-a-half spacing CS403 Cascading Style Sheets

25. line-height property examples p {line-height: 1.5;} body {line-height: 1.2em;} #footer {font-size: 9pt; line-height: 10pt;} .fineprint {font-size: 8pt; line-height: 105%;} CS403 Cascading Style Sheets

26. The font property • Since it’s common to use several of these font related properties together, there is a single font shorthand property that lets you specify several values at once. • The font property can accept a value comprised of a combination of legal values for the font-style, font-variant, font-weight, font-size, line-height and/or font-family properties. CS403 Cascading Style Sheets

27. The font property (cont.) • If both font-size and line-height properties are used, they must be in that order and separated by a slash. • The example above is equivalent to the example below. • If there are not explicit values for every font related property provided, the font property sets those values left unspecified to their defaults. • The example above is equivalent to the example below. p {font: bold small-caps italic 12pt/14pt arial, helvetica, sans-serif;} p {font-weight: bold; font-variant: small-caps; font-style: italic; font-size: 12pt; line-height: 14pt; font-family: arial, helvetica, sans-serif;} body {font: 75% arial, helvetica, sans-serif;} body {font-weight: normal; font-variant: normal; font-style: normal; font-size: 75%; line-height: normal; font-family: arial, helvetica, sans-serif;} CS403 Cascading Style Sheets

28. The text-indent property • The text-indent property is used to specify how far to indent the first line of a block of text. • It can accept length values or percentages. • In this case, percentages are relative to the width of the parent element. • The default value is 0. h2 {text-indent: 2.5%;}h3 {text-indent: 5.0%;}h4 {text-indent: 7.5%;}p {text-indent: 3em;}blockquote {text-indent: 0.5in;} CS403 Cascading Style Sheets

29. The text-align property • The text-align property is used to determine how text is aligned within an element. • It can accept one of four values. • A value of left aligns the text so that each line of text begins at the left edge of the element. • A value of right aligns the text so that each line of text ends at the right edge of the element.. • A value of center aligns the text so that each line of text is centered between the left and right edge of the element • A value of justify aligns the text so that each line is precisely long enough to begin at the left edge of the element and end at the right edge. • The effect of the text-align property also applies to items within an element that are treated as text, such as images and tables. • From a design perspective it’s generally advisable to keep English text aligned to the left or justified. CS403 Cascading Style Sheets

30. text-align property examples h1, h2, h3, h4 {text-align: left;} .address{text-align: right;} p {text-align: justify;} #footer {text-align: center;} CS403 Cascading Style Sheets

31. The text-decoration property • The text-decoration property is used to apply various types of decoration to text. • It takes one of five values. • A value of line-through instructs the browser to draw a line through the mid-line of the text. • This might be useful for indicating text that is being deleted during a revision • A value of overline instructs the browser to draw a line over the top of the text. • This might be useful in certain mathematical and scientific formulas • A value of underline instructs the browser to draw a line underneath the text. • This is seldom useful and not recommended since users generally associate underlined text with links • A value of none is useful for over-riding inherited values and browser defaults. • Setting this value is often used when authors wish to remove the default underlines beneath link labels CS403 Cascading Style Sheets

32. text-decoration property examples .delete {color: #FF0000; text-decoration: line-through;} .length {text-decoration: overline;} .badidea {color: #00F; text-decoration: underline;} .a:link, a:visited {text-decoration: none;} CS403 Cascading Style Sheets

33. The text-transform property • The text-transform property is used to transform the case of text. • It takes one of four values. • A value of uppercase instructs the browser to display all characters of the text as uppercase. • A value of lowercase instructs the browser to display all characters of the text as lowercase. • A value of capitalize instructs the browser to display the first character of each word in the text as uppercase. • A value of none is useful for overriding inherited values. .upper {text-transform: uppercase;}.lower {text-transform: lowercase;}h1, h2, h3 {text-transform: capitalize;}.astyped {text-transform: none;} CS403 Cascading Style Sheets

34. Word and letter spacing • There are two properties available to increase the spacing between words and between the letters within words. • Use the word-spacing property to specify a length value that will be added to the spaces between words. • Use the letter-spacing property to specify a length value that will be added to the spaces between letters. • Typographers refer to the spacing between letters as kerning • Both may accept a value of normal to override inherited values and revert an element to the use of normal spacing .expanded {word-spacing: 0.25em;} .expanded {letter-spacing: 3pt;} CS403 Cascading Style Sheets

35. Controlling list item markers • List items are traditionally preceded by a marker of some sort. CSS offers properties to control these markers. • The list-style-image property is used to specify an image that should be displayed as a list item marker. • Its value must be either a URL in functional notation or the keyword none • The list-style-type property is used to specify more traditional list item markers. • Its value may be one of the following nine keyword values: disc, circle, square, decimal, upper-alpha, lower-alpha, upper-roman, lower-roman and none. • If list-style-image is also specified with a value other than none, the image will be used in place of the specified list-style-type, if it is available. CS403 Cascading Style Sheets

36. Controlling list item markers (cont.) • The list-style-position property is used to specify how the marker is displayed in relation to the list items. • Its value may be either inside or outside. • The default value is outside, which leaves the marker hanging out to the left of the list item text • A value of inside causes the marker to move into the list, acting almost like an indentation • The list-style property is a shorthand property that can accept a space separated list consisting of up to one value from each of the previously mentioned list-related properties. • Each of these properties is applicable to any element whose display property has a value of list-item and they are all inherited • They are therefore applicable to <li> elements, but are most commonly applied to <ol> and <ul> elements and inherited by the <li> elements they contain. CS403 Cascading Style Sheets

37. The background-image property • The background-image property allows you to set a background image to be used for an element. • It takes as its value either the URL of the image to use or the word none (which is the default). • URLs in CSS are specified using functional notation. • Note the lowercase url followed by the actual URL enclosed in parentheses. • In external style sheets, use absolute URLs even for local resources. body {background-image:url(../images/texture.jpeg);} CS403 Cascading Style Sheets

38. The background-image property (cont.) • Choose images that are relatively homogeneous and tile nicely for background images. • A relatively homogeneous image will contain mostly similar colors, making it easier to choose foreground colors that remain uniformly visible against it. • An image tiles nicely when it can be placed adjacent to a copy of itself without any visible seam. • When setting a background image, always set foreground and background colors as well. • Set foreground colors that will contrast well against the background image so text remains easy to see and read. • Set a background color that approximates the effect of the background image. The background image will be shown over the background color whenever possible. body {background-color: #FFFF66; background-image: url(../images/texture.jpeg); color: #000066;} CS403 Cascading Style Sheets

39. The background-repeat property • If you don’t specify otherwise, a browser will repeat a background image in as many rows and columns as needed to fill the background area of the element. • This process is commonly referred to a tiling, since it is similar to covering a wall with ceramic tiles. • The background-repeat property lets you specify exactly how the background image should be repeated. • Using a value of repeat instructs the browser to use as many rows and columns as it needs to fill the background area. • Using a value of no-repeat instructs the browser to simply show the background image once. • Using a value of repeat-x instructs the browser to use as many copies of the image as needed to span across the background area but only in a single row. • Using a value of repeat-y instructs the browser to use as many copies of the images as needed to span down the background area but only in a single column. • If no background image has been specified, this property has no effect. body {background-color: #FFFF66; background-image: url(../images/texture.jpeg);background-repeat: repeat-x; color: #000066;} CS403 Cascading Style Sheets

40. The background-attachment property • Unless you specify otherwise, a background image scrolls along with the page on which it is displayed. • But you can use the background-attachment property to control whether the background image scrolls with the page or remains in a fixed position. • Use a value of scroll to instruct the browser to scroll the background with the page. • Use a value of fixed to instruct the browser to leave the background in its original position and allow the page to scroll “over” it. • If no background image has been specified, this property has no effect. body {background-color: #FFFF66; background-image: url(../images/texture.jpeg); background-repeat: repeat-x;background-attachment: fixed; color: #000066;} CS403 Cascading Style Sheets

41. The background-position property • By default, the first copy of a background image is displayed with its upper left corner at the upper left corner of the background area of the element to which it’s applied. • The background-position property can be used to control precisely where the first copy of the background image gets displayed. • Any tiling needed then proceeds from that initial copy towards the right and/or bottom. • This property can accept a variety of value types, but there are typically two values separated by a space. • The first value represents the horizontal position desired. • The second value represents the vertical position desired. • It’s fairly common for the values to be percentages. • Commonly used percentages have keywords associated with them. • And absolute length units are also acceptable . CS403 Cascading Style Sheets

42. Background positioning by percentage • When using the background-position property, percentages are relative to the background area which the image will be used to fill. • They are also relative to the dimensions of the background image itself • The example below positions the upper left corner of the initial background image in the upper left corner of the background area • This example positions the lower right corner of the initial background image in the lower right corner of the background area • This example positions the center of the initial background image in the center of the background area • And this last example positions the point 23% of the way across and 38% of the way down the initial background image 23% of the way across and 38% of the way down the background area body {color: #000066; background-color: #FFFF66; background-image: url(../images/watermark.jpeg); background-repeat: no-repeat; background-attachment: fixed;background-position: 0% 0%;} body {color: #000066; background-color: #FFFF66; background-image: url(../images/watermark.jpeg); background-repeat: no-repeat; background-attachment: fixed;background-position: 100% 100%;} body {color: #000066; background-color: #FFFF66; background-image: url(../images/watermark.jpeg); background-repeat: no-repeat; background-attachment: fixed;background-position: 50% 50%;} body {color: #000066; background-color: #FFFF66; background-image: url(../images/watermark.jpeg); background-repeat: no-repeat; background-attachment: fixed;background-position: 23% 38%;} CS403 Cascading Style Sheets

43. Background positioning by keyword • It’s also possible to use keywords instead of commonly used percentages as values of the background-position property. • The keywords left, center and right are equivalent to horizontal positions of 0%, 50% and 100%, respectively • The keywords top, center and bottom are equivalent to vertical positions of 0%, 50% and 100%, respectively • The keywords may be used in any combination with one another • But keywords cannot be combined with percentages or length units body {color: #000066; background-color: #FFFF66; background-image: url(../images/watermark.jpeg); background-repeat: no-repeat; background-attachment: fixed;background-position: left center;} body {color: #000066; background-color: #FFFF66; background-image: url(../images/watermark.jpeg); background-repeat: no-repeat; background-attachment: fixed;background-position: center top;} CS403 Cascading Style Sheets

44. The background property • Since it’s common to use several of these background related properties together, there is a single background property that lets you specify several values at once. • Such properties are often referred to as shorthand properties. • The background property can accept a value comprised of any combination of legal values for the other background related properties. • The example above is equivalent to the example below • If there are not explicit values for every background related property provided, the background property sets those values left unspecified to their defaults • The example above is equivalent to the example below body {color: #000066; background: #FFFF66 url(../images/watermark.jpeg) no-repeat fixed center center;} body {color: #000066; background-color: #FFFF66; background-image: url(../images/watermark.jpeg); background-repeat: no-repeat; background-attachment: fixed; background-position: center center;} body {color: #000066; background: #FFFF66 url(../images/watermark.jpeg);} body {color: #000066; background-color: #FFFF66; background-image: url(../images/watermark.jpeg); background-repeat: repeat; background-attachment: scroll; background-position: 0% 0%;} CS403 Cascading Style Sheets

45. Review questions • Distinguish between structure and presentation and explain how each is addressed on the Web. • What does it mean when something is deprecated? • What is Cascading Style Sheets (CSS) and how does it related to XHTML? • What are the advantages of using one language for structural purposes and a separate language for presentational purposes? • Compare and contrast a CSS file with an XHTML file. • What is a style rule, and what roles do the selector and the declaration play in it? • Explain the basic syntax requirements of an external style sheet. (In other words, what rules must you follow when writing one?) • Write a simple external style sheet and the code that you would place in your XHTML page in order to use it. • What is the purpose of a selector in CSS and why are there several different types? • Explain the different types of selector we have discussed in class and the circumstances under which each type might be useful. • Explain the concept of a parent element and a child element. Why is this important to inheritance in CSS? • Compare and contrast the class attribute and the id attribute. • Write a sample external style sheet and an associated XHTML file that use a variety of element name selectors, class selectors and ID selectors. • Explain how CSS selectors can be combined and why you would do so. Give two examples. • Explain pseudo-classes and pseudo-elements and why they are necessary. Give some examples. CS403 Cascading Style Sheets

46. Review questions • What is a contextual selector and under what circumstances might it be useful? Give some examples. • Explain the grouping of selectors in CSS. Why would this technique be used? • What is an internal style sheet? What are its advantages and disadvantages when compared to an external style sheet? • All other things being equal, what determines whether rules in internal style sheets take precedence of conflicting rules in external style sheets? • Convert one of your external style sheet examples into an internal style sheet example. • What is an inline style? What are the advantages and disadvantages of using an inline style versus an internal style sheet? What about versus an external style sheet? • What must you do in the <head> of a document that uses inline styles? Why? • Add some examples of inline styles to a previous example. • Explain why conflicts between styles are common in CSS. How are they resolved? • Discuss the use of the <div> and <span> elements in the context of CSS. • Why are color names insufficient for most Web designers? What is the most commonly used alternative and why? • Summarize the RGB color model and explain at least three different ways of utilizing it in CSS. Give specific examples of some colors. • Summarize the hexadecimal number system and explain why it is used to specify colors in CSS. • Write a sample style sheet and the associated XHTML file that sets different colors for various parts of the text and the links in each of their four states. Specify a background color and a background image. Make the background image fixed at the center of the screen and non-repeating. CS403 Cascading Style Sheets

47. Review questions • Explain the difference between relative length units and absolute length units in CSS. List and explain the three relative length units. What is each one relative to? What are points and picas? • What is the purpose of a shorthand property in CSS? Give two examples. • What it typography and how is contrast involved in it? What role do fonts play in typography? • Why does CSS provide several generic font families? How are they typically used? • Write a sample style sheet and the associated XHTML file that sets different fonts for various parts of the text. Utilize both specific font choices and generic font families. Use different font weights, font styles, font variants, font sizes, and line heights. Try using the individual properties first, then try to do the same thing with the shorthand font property. • Write a sample style sheet and the associated XHTML file that sets various text indentation levels and alignments (both horizontal and vertical) for the elements on the page. Try adding some different text decorations and text transformations. Adjust both the word and the letter spacing. • Explain the CSS box model, including the concepts of the content area, the padding, the border and the margin. How might you use these features in your work? • Write a sample style sheet and the associated XHTML file that utilizes the box model to control the space around various components of the page. • Explain the float and clear properties and how you might use them. Write a sample style sheet and the associated XHTML file that demonstrates both. Add code that demonstrates control over white space handling and the display type of different elements. • Write a sample style sheet and the associated XHTML file that demonstrates the control that CSS provides over list item markers. CS403 Cascading Style Sheets

48. Key terms Absolute length value Border Cascade, the Child element Class selector Color name Content area Contextual selector Contrast CSS Declaration Deprecated Descendent element Element name selector Embedded style sheet External style sheet Font Functional notation Generic font family Hex Hexadecimal number system ID selector Inheritance Inline style Internal style sheet Kerning Leading M-height Margin Negative space Padding Parent element Pica Pixel Point Positive space Presentation Property Pseudo-class selector Pseudo-element selector Relative length value Selector Shorthand property Specificity Structure Style rule Typeface Typography Value Weight X-height CS403 Cascading Style Sheets

49. XHTML elements presented class attribute <div>…</div> id attribute <link /> <span>…</span> style attribute <style>…</style> CS403 Cascading Style Sheets

50. CSS properties presented in parts 2 and 3 background background-attachment background-color background-image background-position background-repeat border border-bottom border-bottom-width border-color border-left border-left-width border-right border-right-width border-style border-top border-top-width border-width clear color display float font font-family font-size font-style font-variant font-weight height letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-bottom margin-left margin-right margin-top padding padding-bottom padding-left padding-right padding-top text-align text-decoration text-indent text-transform vertical-align white-space width word-spacing CS403 Cascading Style Sheets