1. Exploring Office 2003 – Grauer and Barber Enhancing the Web Page Chapter 3 BCIS 1405 Session 15

2. Formatting with Cascading Style Sheets Styles pre-define formats Allows changes to be made quickly All styles are defined in one place Makes for Global Formatting  Changes made in one place affects all Best to put Style tag in HEAD section

3. Cascading Styles Example:  All Body text to be centered Body {text-align: center} etc …

4. Defining a CLASS for Style Class used in two places  In HEAD Style definition  In Body text HEAD EXAMPLE: P {font-style: normal} P.it {font-style: italics} P.color {color: red}

5. Defining a CLASS for Style (Continued) Class used in two places  In HEAD Style definition  In Body text BODY Text EXAMPLE: This text will be in italics This text is not affected This text is red This text is not affected

6. HTML to Show Use of Classes

7. RESULTING WEB PAGE

8. Mixing Classes with Other Tags Adding a Bold Tag

9. BOLD HAS BEEN ADDED

10. Adding a Horizontal Line Placing a line or ruler across the page Use the tag  No closing tag  Can change width and length of the line  Used to divide a page

11. Example: HR {height:10; color: blue}

12. Result of Adding a Horizontal Line 10 Point Blue Line inserted

13. Inserting Pictures / Graphics Can include universal formats .JPG(best for photographs) .GIF(most browsers accept this format) Use  Must use SRC=“filename” attribute for source  EXAMPLE:  No closing tag

14. Inserting Pictures / Graphics Can use ALT= alternate attribute to display EXAMPLE: This will display “Company CEO” rather than the file name (“A:\picturename.jpg”) Other attributes available are HEIGHT, WIDTH, FLOAT (causes browser to load quicker)  Height & Width are measured in pixels  Float defines position (Left, Right, Center)

15. Inserting Pictures / Graphics EXAMPLE using Height, Width, Float <IMG SRC=“A:\picturename.jpg” ALT=“Company CEO” HEIGHT= “200” Width = “40”> Better to use Classes for each image size IMG.ceoPic1 {width: 40; height: 200; float: center} … body text … <IMG SRC=“A:\picturename.jpg” class=“ceoPic1” ALT=“Company CEO”>

16. Adding Background Color Add a STYLE that applies to the BODY tag EXAMPLE: BODY {background-color: #0000FF} This will create a blue background

17. Common Colors COLORHEX EQUIVALENT Red #FF0000 Green#00FF00 Blue#0000FF Black#000000 White#FFFFFF Tan#DEB887 Turquoise#19CCDF Magenta#FF00FF Yellow#FFFF00

18. Using a Graphic as Background Use image as background (instead of color) EXAMPLE for BODY background BODY {background-image: url (A:\classroom2.jpg)} Image should be light in color for better reading of page

19. RESULT of Classroom as background

20. Result of using a small picture as a background (Browser tiles the image and repeats it to cover background)

21. Changing Text Color Can change color of different text types  ,, etc. Can change color of hypertext links Can change color of visited links Can change color of active links

22. Changing Text Color BODY Colors EXAMPLE of White Text with Blue Background <STYLE type=“text/css” BODY {color: #FFFFFF; background-color: #0000FF}

23. Applied to previous Web Page

24. To Insert Special Characters You can use Name or Code CHARACTERNAMECODE ©©© ®®® ÈÈÈ ¥&yen¥ £££ >>> <&LT;< &&& Must use Name or Code for “<“ because HTML uses that for start of a tag IF A < B would be coded: IF A &LT; B or IF A < B

25. Inline Styles Used rarely – Single style definition is preferable Used when a style is to be used only once How it works: L ove Would produce: L ove

26. Using Tables To better organize data for user Columns and rows (intersection is a cell) Data placed in cells Table contents are between: and tags

27. Table Syntax Start each row with: tag End each row with: tag Everything between these tags will appear in one row

28. Table Syntax … text in First row … text in Second row

29. Table Syntax Use the and tags for column head  Will make contents BOLD for Col. Headings  EXAMPLE: Qty Price Cost Will create:Qty Price Cost

30. Table Syntax Use the and tags for column data Qty Price Cost 2 $10.00 $40.00

31. Table Syntax Adding a Border Use the and tags for column data Qty Price Cost 2 $10.00 $40.00

32. Result of Adding a Table to our Example Web Page

33. Table Syntax Wider Border & More Spacing Use the and tags for column data Qty Price Cost 2 $10.00 $40.00 Wider Border More space between cells

35. ASSIGNMENT See online assignment for Session 15 Due at beginning of next class