Formatting Text in CSS

Formatting Text in CSS Files you will need ... Black Goose Bistro Summer Menu

Core Web Fonts from Microsoft Serif – Georgia, Times New Roman Sans Serif – Arial, Arial Black, Trebuchet MS, Verdana Monospace – Courier New, Andale Mono Miscellaneous – Comic Sans, Impact, Webdings

Formatting the Summer Menu We are going to use an embedded style sheet for this exercise. <head> <title> Black Goose Bistro </title> <style type=“text/css”> </style> </head>

Formatting the Summer Menucontinued... Lets have all the text on the page to appear in Verdana or some other sans-serif font. Instead of writing a rule for every element in the document, we will write one rule for the body element. <style type=“text/css”> body {font-family: Verdana, sans-serif; } </style>

Formatting the Summer Menu continued... It would be nice if the body text for the document appear smaller than the common 16 pixel default. We will set the size of the body to small, which renders approximately 12 pixels. body {font-family: Verdana, sans-serif; font-size: small}

Formatting the Summer Menu continued... Now, lets get the giant h1 under control. Lets make it one and a half times larger than the body text size with the em measurement. h1 { font-size; 1.5em; }

Formatting the Summer Menu continued... Lets make all of the menu item names to be in bold text. dt { font-weight: bold; } Because the menu items are now bold, lets make the strong elements stand out by being italic. strong { font-style: itazlic; }

Formatting the Summer Menu continued... Now lets change the first level headings (h1) to small caps so we can try the font-variant property. h1 { font-size: 1.5em; font-variant: small-caps;}

Formatting the Summer Menu continued... Lets make h2 headings bold, Georgia (serif) typeface to stand out from the surrounding text. We also want it to be 1.2 times larger than the body font. h2 { font: bold 1.2em Georgia, serif; }

Formatting the Summer Menu continued... Add some color to the “new item” elements next to certain menu item names. strong { color: maroon; } That works, but now the strong element “very spicy” in the description is maroon too. dtstrong { color: maroon; }

Formatting the Summer Menu continued... Look at the document source and you will see that the content has been divided into three unique divs: header, appetizers, and entrees. We can use the divs to our advantage when it comes to styling. Change the text in the header to be teal. #header { color: teal; } To get a little fancier, we can make the paragraph inside the header italic. #header p { font-style: italic; }

Formatting the Summer Menu continued... Now we want to give special treatment to all of the prices on the menu. Luckily they have all been marked up as span elements. So now all we have to do is write a rule using a class selector to change the font to Georgia or some serif font and make them italic. .price { font-style: italic; font-family: Georgia, serif; }

Formatting the Summer Menu continued... Similarly, We can change the appearance of the text in the header that has been marked up as belonging to the “label” class to make them stand out. .label { font-weight: bold; font-variant: small-caps; font-style: normal; }

Formatting the Summer Menu continued... Finally, there is a warning at the bottom of the page that we want to make small and red. p.warning, sup{ font-size: x-small; color: red; }

Formatting the Summer Menu continued... We are going to make a few changes to the body element. body { font-family: Georgia, serif; font-size: small; line-height: 175%; }

Formatting the Summer Menu continued... We are also going to redesign the h1 element. We are going to delete some style elements and make some changes. #header { color: teal; } (delete) h1 { font-size: 1.5em; font-variant: small-caps; (delete) color: purple; } #header p { font-style: italic; color: gray; } #header, h2, #appetizers p, # entrees p { text-align: center; }

Formatting the Summer Menu continued... We are also going to make “Appetizer” and “Main Courses” kind of special. h2 { font: bold 1em Georgia, serif; text-transform: uppercase; letter-spacing: 8px; color: purple; } dt { font-weight: bold; color: olive; }

Formatting Text in CSS