1. Cascaded Style Sheets Implementing web pages using only html/xhtml is tedious and awkward With CSS, you can design a component to be used in a web page (or multiple pages) and reuse that component as desired – The advantages of CSS are that they have better control for individual typography and for page layout, the style can be separated from the structure to be stored, reused and easily maintained There are four forms of CSS – Inline styles – Embedded styles – External styles – Imported styles We will explore these in chapter 3 with specific emphasis on controlling color and formatting text

2. CSS Syntax Unlike html syntax which is all tags, css syntax tends to be definitional in structure – A CSS rule contains a selector and a declaration body {color: blue} Here, the selector is body, the portion of the document from which the rule will take effect The declaration is that the property, color, will have the value, blue – A rule that effects one area can have multiple declarations, separated by ; body { color: blue; background-color: yellow; } – Properties include font-family, font-size, font-style, font- weight, line-height, margin, margin-left, margin-right, text-align, text-decoration and width We cover these in more detail in a bit

3. Colors There are 140 named colors supported by all web browsers – You can specify colors by name – But you can also specify colors by the RGB value for the color or by specifying a color from the color palette RGB values will consist of three integers (amount of red, amount of green, amount of blue), each from 0-255 (but in 2- digit hexadecimal) where 0 means none of that color and 255 means all of that color You can specify the color by using the notation rgb(#, #, #) where the # are numbers from 0 to 255 But more commonly we specify these color using the notation #rrbbgg where rr, bb and gg are pairs of hexadecimal digits (see the next slide) – There are 216 different “safe” colors available Other colors may be supported but there is no guarantee – The two attributes for color are color – font color and background color – the color behind the font

4. Hexadecimal Values Hexadecimal is base 16 – In any numeric base, the legal digits are 0, 1, 2, … base-1, for instance in base 8, we have digits 0..7 – But we do not have digits for numbers 10, 11, 12, 13, 14, 15 (since hexadecimal is base 16, the last digit will be 15) so we substitute A, B, C, D, E, F for these 6 values The number AF means A in the 16’s column and F in the 1’s column, which means 10*16 + 15*1 or 175 10 – What is 5C2? 5 in the 16 2 column, C (12) in the 16 column, 2 in the 1s column, or 1474 For colors, we really don’t have to fully understand the hex values, just understand that 00 means 0 and FF means 255 and have an estimate of other values such as 33, 66, 99, CC – Now we specify a color as #33CCFF (33/FF for red, CC/FF for green, FF/FF for blue) – Safe colors always use 00, 33, 66, 99, CC, FF for each of red, green and blue although there are other safe colors as well if your color contains pairs of the same digit (e.g., 66), you can omit one digit, as in #3CF instead of #33CCFF

5. The Web-Safe Palette Shown to the right is one half of the web-safe palette along with the hex values that define each color The full palette is shown at http://webdevfoundations.net/color http://webdevfoundations.net/color

6. Inline CSS Commands Inline commands are meant to be carried out from within the scope of a tag (e.g., from to ) by defining a style parameter for the tag – Example: … – Unlike a typical CSS rule, we are placing the rule inside the tag, so the selector is already known – In the style part, we specify the rest of the rule or the declaration part, which is the attribute:value pair – If you want multiple attribute:value pairs, separate them with a ; The style attribute can also be used in heading tags h1, h2, …, h6 Here are some examples: – A red heading – smaller red heading with grey background – A paragraph with an inline style of white text on green background.

7. Embedded CSS Commands An alternative is to place a style command in the document’s.. section Here, any styles defined will control the style of that particular tag throughout the entire document – The style is placed in a tag – For each selector, use selectortype { attribute: value; attribute: value; … } You can have as many selectortype {…} rules and you can list as many attributes as you like in the { } Selectors include all of the html tags, for instance,,, …,, The style tag requires a type attribute of “text/css” – Here is are some examples: body { background-color: #000000; color: #FFFFFF; } body { color: #CCCCCC;} h1 { color: #FFFFFF;} h2 { color: #FF00FF;} p { color: #FFCCFF; } ul { color: #CCFFFF; }

8. Text Properties So far we have only considered color and background-color as properties, here we look at properties for text – font-style: normal, italic, oblique – like using or – font-size: you can use either a numeric value or a text value text values are xx-small, x-small, small, medium, large, x-large and xx-large numeric values can be specified using px (pixels), pt (points), percentage, or em values (see the table on the next slide) – font-family: this selects the font typeface (if the specified font is not available for someone’s web browser, a default font is used instead) You can either specify a font family (serif, sans-serif, monospace, cursive, fantasy) or a specific type (see the table on the next slide)

9. Font Sizes and Types

10. Continued Additional properties: – font-weight – defines the boldness of the text using a numeric value from 100 to 900 or one of these terms: normal, bold, bolder, lighter example: … – text-align: left (default), right, center or justify – text-decoration: none, underline, overline, line-through, blink none allows you to turn off the line underneath a link (although that is not recommended) – line-height: spacing allowed for a line given in percentage format, for instance, 200% is double spacing – width: the width of an element, indicated by px, em, percentage or the word auto (default) – margin, margin-left, margin-right: allows you to configure the size of both margins, or more specifically the left or right margin, specified using px, em or auto

11. Example // introductory tags body { color: #FF3399; font-align: justify } h { color: #CCFFCC; font-align: left font-family: Arial, Verdana, sans-serif; } p { color: #CCCCFF; font-align: left font-family: Georgia, “Times new Roman”, serif; } … This will impact all headings This will impact all paragraphs

12. Class and Id selections Rather than tying a style to a given tag, you can also define styles for a given section of the webpage – You can do this by defining a section using class=“name” and then defining in your embedded CSS code a.name entry just as previously we defined code for body, h1, h2, p, ul, or h – First, define the style section in the header by adding an entry whose name starts with. as in.mysection – Next, in your body, add where … is the name you gave in the style section but without the. As an alternative approach, you can define in your embedded style definition, an entry #name – the # is known as an ID and #name is the ID’s selector – Again, define in the style section the style for this section – In your body, add where … is the name given in the style section but again without the # before the name What’s the difference between them? – The id selector is usually used for a single area whereas the class definition is used to define a class of objects that you want to style in a particular way

13. Example … p {…}.image_list {…}.name_list {…} #footer {…} // normal text goes here … // formatted using the first style definition // an image list goes here // a text list goes here … // formatted using the first style definition // another image list goes here // another text list goes here … // formatted using the first style definition // footer info here

14. and These tags are used to define regions of a webpage that can have their own CSS formatting – The tag defines a division of a page that is separated from other areas by line breaks – The tag defines an area that is not separated The idea is that you can use similar to, but with its own formatting defines a division but the division can take affect inside of a block of text, so it is more like an inline style command – Both the and tags can have class attributes so that you are using a pre-defined format for the given section In your header, you have defined –.foo {…} And in body, you have – …

15. Example.foo { font-weight: bold; font-size: 1.0em; }.bar { font-style: Chicago, sans; font-weight: normal; font-size:.75em; } Here is some basic text And now, we enter the text for section foo. But right in the middle of our foo section, we enter a bar section. The bar section does not include a line break. But the div section does cause a line break. As we see here.

16. Text Alignment/Spacing HTML offers a means of centering text in a or tag using align=center as in – But this is an old approach and not efficient The preferred way is to use the text-align property in CSS for instance by doing – h1 { text-align: center; } This will align the text in a heading, but what if you want the entire page centered? – Use margin-left and margin-right, setting both to auto – The following code will create a page 700 pixels wide and centered on the browser #wrapper { width: 700px; margin-left: auto; margin-right: auto; } … page contents go here

17. External Style Sheets You can also place definitions in other files and load them into the current page – This allows you to define a style that will be used across many pages and then use that one definition in all of those pages – The defined styles are placed into a.css file To load an external style sheet, use the command with the href attribute as in – – The link tag is placed in the … portion of the document – The.css file will contain definitions similar to the types we have been looking at with the exception that the … tags are omitted because the file contains nothing but definitions that go into the style section

18. Example: Trillium Technologies body { background-color: #E6E6FA; color: #191970; font-family: Arial, Verdana, sans-serif; } h1 { background-color: #191970; color: #E6E6FA; line-height: 200%; font-family: Georgia, "Times New Roman", serif; } h2 { background-color: #AEAED4; color: #191970; font-family: Geogria, "Times New Roman", serif; } p {font-size:.90em; } ul {font-weight: bold; }.nav {font-weight: bold; font-size: 1.25em; } #footer { font-size:.75em; font-style: italic; }.companyname { font-weight:bold; font-family: Georgia, "Times New Roman", serif; font-size: 1.25em; } The file trillium.css Notice no tag present

19. Continued <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Trillium Media Design Trillium Media Design Home Services Contact New Media and Web Design Trillium Media Design will bring your company's Web presence to the next level. We offer a comprehensive range of services: Web Site Design Interactive Animation E-Commerce Solutions Usability Studies Search Engine Optimization Meeting Your Business Needs Our expert designers are creative and eager to work with you. Take advantage of the power of Web 2.0! Copyright © 2007 Your Name Here

20. Trillium Web Page

21. Troubleshooting CSS As with testing xhtml pages you can also upload your css files to be verified using http://jigsaw.w3.org/css-validator http://jigsaw.w3.org/css-validator Other tips – Make sure you are using : and ; appropriately – Check that you are not using = signs instead of : – Verify that { } are placed properly and that for every{ there is a } – Check the syntax of your selectors Did you use the correct property? Did you use a legal value for the property? – If part of your css is working but not all of it, find the first rule that is not being applied and see if the previous block was properly closed