1. MA10126 Further HTML and Web design Gavin Shaddick www.bath.ac.uk/~masgs/ma10126.html

2. A touch of style Cascading style sheets (CSS) A simple mechanism for adding style (e.g. fonts, colours, spacing) to Web documents. Separate format from content http://www.w3.org/Style/CSS/

3. Example: setting the colour of the text and the background Purple text, sludge green background – body { color: purple; background- color: #d8da3d } –The stuff between the and is written in special notation for style rules. Each rule starts with a tag name followed by a list of style properties bracketed by { and }. In this example, the rule matches the body tag. As you will see, the body tag provides the basis for setting the overall look and feel of your Web page.

4. More style… Each style property starts with the property's name, then a colon and lastly the value for this property. When there is more than one style property in the list, you need to use a semicolon between each of them to delimit one property from the next. In this example, there are two properties - "color" which sets the colour of the text, and "background" which sets the colour of the page background.

5. Colours Colours can be given as names or as numerical values, for instance rgb(255, 204, 204) which is a fleshy pink. The 3 numbers correspond to red, green and blue respectively in the range 0 to 255. You can also use a hexadecimal notation, the same color can also be written as #FFCCCC.

6. Hexidecimal (colours) The hexadecimal number breaks down into three pairs –the first pair of digits give the red value –the second pair the green value –the last pair the blue value Each pair can go from 00 to FF, which in regular base-ten numbering works out to the range 0-255.

7. More on hexidecimal (colours) C0--> 75% red A2--> 63% green 80--> 50% blue How do you get the percentages ? –Red: C0 hex --> 192 decimal 192/256 = 0.75 (in other words, 75%) In order to figure out the hexadecimal value of a given percentage, simply divide it by 100, multiply that by 256, and convert the result to hexadecimal notation. As an example: –55% red would be 55/100 = 0.55 0.55 * 256 = 140.8 (round to 141) 141 decimal --> 8D hex

8. Thankfully - an easier way Common colours can be named, rather than using hexadecimal numbers. – Black = "#000000" Maroon = "#800000" –Green = "#008000" »Navy = "#000080" »Silver = "#C0C0C0" »Red = "#FF0000" »Lime = "#00FF00" »Blue = "#0000FF" »Gray = "#808080" »Purple = "#800080" »Olive = "#808000" »Teal = "#008080" »White = "#FFFFFF" »Fuchsia = "#FF00FF" »Yellow = "#FFFF00" »Aqua = "#00FFFF"

9. Different colours Different computers/browsers can display a given colour code differently. This is true for all graphics, but it can be more noticeable with a solid-color background. –the code representing brown on a Macintosh will show PC users a colour other than brown, and vice versa Keep in mind is that what you see on your screen won't necessarily be what others see on theirs.

10. Cool colours ? Truly ugly pages are now within anyone's reach!Truly ugly pages are now within anyone's reach! Suppose you set a page up so that all the links, both active and visited, are coloured black, the same as the normal text. –Therefore, when a user reads the page, they have no way of seeing at a glance where the links are.

11. Carrying on… http://www.w3.org/Style/Examples/011/firstcss http://www.w3.org/MarkUp/Guide/Style.html http://www.w3.org/Style/CSS/ Validation –http://jigsaw.w3.org/css-validator/http://jigsaw.w3.org/css-validator/ Fancy! –http://www.csszengarden.com/http://www.csszengarden.com/

12. More information on HTML See the BUCS web information webpage –http://internal.bath.ac.uk/web/about/http://internal.bath.ac.uk/web/about/ An introduction to HTML and more… –http://www.cwru.edu/help/introHTML/toc.htmlhttp://www.cwru.edu/help/introHTML/toc.html –http://www.htmlhelp.com/ Very comprehensive site with a great name http://freespace.virgin.net/sizzling.jalfrezi/

13. Easy loading Remember that the more images and fancy backgrounds you use, the longer it will take your pages to load Not everybody is logging on from a network, can be very slow Try not to use browser specific plug-ins –Extra pieces of software required to perform animation, effects etc….Extra pieces of software required to perform animation, effects etc….