CSS: Formatting Text Robert A. Fulkerson College of Information Science and Technology http://www.ist.unomaha.edu/ University of Nebraska at Omaha http://www.unomaha.edu/ CSS for text processing: font-family font-family Using the font-family property, you can specify which font you would like to use in your site or in specific portions of your site. There are only a handful of commonly available fonts across different platforms: Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Trebuchet MS, Times New Roman and Verdana. The font-family property allows you to specify a single font or a list of desired fonts in preferred order. Surround multi-word font names with quotes. You can also specify generic font names as the final font: serif, sans-serif, cursive, fantasy or monospace. Slide #2 CSS for text processing: font-family 3. href="css/ff.css" /></head><body> 2. body { 3. font-family: 'Times New Roman', serif; 5. h1 { 6. font-family: 'Comic Sans MS', sans-serif; 7. } ff.css Slide #3 1
CSS for text processing: font-style font-style Using the font-style property, you can change the font to italics if it normally wouldn t be, such as with a cite, em or i HTML5 tag. The font-style property has four values that can be specified: normal italic oblique inherit Slide #4 CSS for text processing: font-style 3. href="css/fs.css" /></head><body> 2. body { 3. font-family: 'Times New Roman', serif; 5. h1, small { 6. font-style: italic; 7. } fs.css Slide #5 CSS for text processing: font-weight font-weight Using the font-weight property, you can change the bold text that wouldn t normally be bolded such as with an h1-h6 tag or with a strong or b tag in HTML5. The font-weight property has the following values: 100, 200, 300, 400, 500, 600, 700, 800, 900 normal bold lighter bolder Slide #6 2
CSS for text processing: font-weight 3. href="css/fw.css" /></head><body> 2. body { 3. font-family: 'Times New Roman', serif; 5. small { 6. font-style: italic; 7. font-weight: bold; fw.css Slide #7 CSS for text processing: font-size font-size Using the font-size property, you can change the size of the font being displayed. You can either specify an exact size, usually in pixels (px) or as a relative size compared to the default size for that element. Exact sizes are specified using the px notation, such as 16px. Relative sizes are usually either specified as a percentage (such as 112.5%) or as an em (such as 1.125em). Remember that 1em is the natural size of text. Most systems and browsers display default text at 16px. If you want your text to be 24px, 24/16 = 1.5, so you would style the text at 1.5em or 150%. Slide #8 CSS for text processing: font-size 3. href="css/fsize.css" /></head><body> 2. small { 3. font-size: 50%; 5. p { 6. font-size: 1.5em; 7. font-weight: bold; fsize.css Slide #9 3
CSS for text processing: font-variant font-variant Using the font-variant property, you can specify if the font being displayed will be displayed in small capital letters or not. The three values you can specify are: normal small-caps inherit Slide #10 CSS for text processing: font-variant 3. href="css/fv.css" /></head><body> 2. h1, small { 3. font-variant: small-caps; 5. p { 6. font-size: 1.153em; 7. font-weight: 700; fv.css Slide #11 CSS for text processing: setting all font properties at once font Using the font property, you can set all of the properties for the font at once. To do this, you need to at least specify the font size as well as the font family. You can optionally specify the style, weight and variant. The format of the font specification is as follows, with optional values in italics: font: style weight variant size families; Slide #12 4
CSS for text processing: setting all font properties at once 3. href="css/f.css" /></head><body> 2. p { 3. font: italic bold small-caps 75% "Times New Roman", serif; 5. small { 6. font: 0.7em "Comic Sans MS"; 7. } f.css Slide #13 CSS for text processing: color color Using the color property, you can change the color of elements on your page. The most common color that is changed is the color of the font. Recall that you can change the color in one of a number of ways: Using one of the 16 predefined color name values. Using the #rrggbb hexadecimal notation. Using the rgb(r,g,b) notation. Using the rgba(r,g,b,a) notation to specify a transparency percentage for a between 0 and 1. Slide #14 CSS for text processing: color 3. href="css/c.css" /></head><body> 2. h1 { 3. font-variant: small-caps; 4. color: red; // or #ff0000 or rgb(255,0,0) or rgba(255,0,0,1) 5. } 6. p { 7. color: rgba(0,0,255,0.7); c.css Slide #15 5
Constructing id and class selectors You can modify more than just specific types of HTML5 tags. Since you can give nearly every tag an id and/or a class, you can directly address those elements, also. Constructing a selector for an id or a class simply requires you to place a period (.) before the class name or a pound sign (#) before the id name:.classname { color: red; } #idname { color: green; } section.classname { color: teal; } article#idname { color: yellow; } In the HTML code itself, you leave off the period or pound sign. Slide #16 CSS for text processing: color 1. <!DOCTYPE html><html lang="en"><head><title>links!</title><meta 2. charset="utf-8" /><link rel="stylesheet" type="text/css" 3. href="css/c2.css" /></head> 4. <body><section class="favesites"><p>here 5. are some sites I like to visit: 6. <a href="http://ist.unomaha.edu">the IS&T website</a>, 7. <a href="http://facebook.com/">facebook</a> and 8. <a href="http://twitter.com/">twitter</a>.</p></section></body> 9. </html> 2..favesites { // or section.favesites 3. color: teal; c2.css Slide #17 Constructing selectors by context You can also specify that specific tags or classes contained within other tags should be selected. To do this, you specify from left-to-right the containing and contained elements/classes: section p { color : silver; } article.classname span { color: yellow; } Slide #18 6
CSS for text processing: color 1. <!DOCTYPE html><html lang="en"><head><title>links!</title><meta 2. charset="utf-8" /><link rel="stylesheet" type="text/css" 3. href="css/c3.css" /></head> 4. <body><section class="favesites"><p>here are some sites I like to 5. visit:</p><a href="http://ist.unomaha.edu">the IS&T 6. website</a>, <a href="http://facebook.com/">facebook</a> and 7. <a href="http://twitter.com/">twitter</a>.<ol><li>list 8. item!</li></ol></section><p>an extra paragraph goes here for 9. example purposes.</p></body></html> 2. section.favesites p { 3. color: red; 5. section ol { 6. color: teal; 7. } c3.css Slide #19 CSS for text processing: background background Using the background property, you can change the background color of elements on your page. Changing the color is similar to changing the text color seen before: Using one of the 16 predefined color name values. Using the #rrggbb hexadecimal notation. Using the rgb(r,g,b) notation. Using the rgba(r,g,b,a) notation to specify a transparency percentage for a between 0 and 1. Slide #20 CSS for text processing: background 3. href="css/b.css" /></head><body> 2. body { 3. background: red; 5. section p { 6. background: rgba(0,0,255,0.7); 7. color: yellow; b.css Slide #21 7
Constructing pseudo-class selectors There are some classes known as pseudo-classes built-in to HTML5. These pseudo-classes don t need to be defined in your HTML explicitly because they already exist in your document without having to do anything special. The most common pseudo-classes to modify are for links: a:link {color:#ff0000;} /* unvisited link */ a:visited {color:#00ff00;} /* visited link */ a:hover {color:#ff00ff;} /* mouse over link */ a:active {color:#0000ff;} /* selected link */ Slide #22 CSS for text processing: color 1. <!DOCTYPE html><html lang="en"><head><title>links!</title><meta 2. charset="utf-8" /><link rel="stylesheet" type="text/css" 3. href="css/b2.css" /></head> 4. <body><section class="favesites"><p>here 5. are some sites I like to visit: 6. <a href="http://ist.unomaha.edu">the IS&T website</a>, 7. <a href="http://facebook.com/">facebook</a> and 8. <a href="http://twitter.com/">twitter</a>.</p></section></body> 9. </html> 2. a:link { background: #FF0000; } /* unvisited link */ 3. a:visited { background: #00FF00; } /* visited link */ 4. a:hover { background: #FF00FF; } /* mouse over link */ 5. a:active { background: #0000FF; } /* selected link */ b2.css Slide #23 CSS for text processing: text-align text-align Using the text-align property, you can change the justification of your text in an element There are four predefined values you can choose from: left right center justify Slide #24 8
CSS for text processing: text-align 3. href="css/ta.css" /></head><body> 2. h1 { 3. text-align: right; 5. section { 6. text-align: justify; 7. color: rgba (255,0,0,0.5); ta.css Slide #25 Other text formatting CSS properties of interest line-height allows you to change how tall a particular line of text is. background for changing background images of elements. word-spacing and letter-spacing to change the tracking and kerning of text. text-indent to indent the first line of paragraphs. white-space changes how to process white spaces. text-transform to capitalize, lowercase or uppercase letters. text-decoration allows you to underline, overline or put lines through text. Slide #26 9