Cascading Style Sheets Part 2

1. Cascading Style SheetsPart 2 Modified by Linda Kenney April 5, 2011

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.

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.

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.

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.

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;}

7. The Web Color Palette (and names) • A collection of 216 colors that display the same on both the Mac and PC platforms. • Some colors can be referred to by their names. • However, be aware that the W3C does not recommend the use of color names (use hexadecimal values instead). • See the Color Chart at http://webdevfoundations.net/color/index.htm

8. 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.

9. 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. WHY? h1 {background-color: #000066; color: #FFFF66;} body {background-color: #FFFF66; color: #000066;}

10. 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

11. 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

12. 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.

13. 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.

14. 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.

15. 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

16. 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;}

17. 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;}

18. 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.

19. 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;}

20. 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;}

21. The font-size property • 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.

22. 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;}

23. 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

24. 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%;}

25. 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.

26. The font property (cont.) 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. 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;}

27. 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;}

28. 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.

29. text-align property examples h1, h2, h3, h4 {text-align: left;} .address{text-align: right;} p {text-align: justify;} #footer {text-align: center;}

30. 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

31. 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;}

32. 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;}

33. 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.

34. 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.

35. 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);}

36. 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;}

37. 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;}

38. 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;}

39. 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 .

40. 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%;}

41. 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;}

42. 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%;}

43. XHTML elements presented class attribute <div>…</div> id attribute <link /> <span>…</span> style attribute <style>…</style>

44. CSS properties presented in parts 2 and 3see text p. 78, Appendix C, p. 612 for details 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 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 width

45. Thanks to Mike Gildersleeve for sharing information from his Summer, 2006 CS403 PowerPoint. • Information also used from: Web Developer & Design Foundations with XHTML by Terry Felke-Morris