1. CSS Cascading Style Sheets

2. “Cascading”

3. Example (inline style) HTML <img src=“flag.jpg" align="left" hspace="20" vspace="10"> The image aligns left and allows text to wrap around with a small gap CSS <img src=“flag.jpg" style="float: left; margin-top: 10px; margin-right: 20px; margin-bottom: 10px"> The image aligns left and allows text to wrap around with a small gap

4. Example (header style) H1 { Font-Size: 76pt; color: teal; background-color: turquoise; border: thick indigo solid; padding: 20px; } Presentation Subjects with strong contrasts between light and shadow generally look more interesting (but avoid too extreme shadows and contrast unless really necessary). Subjects Subjects with strong contrasts between light and shadow are more 3-dimensional and have depth. Look for back lighting combined with a fill in flash to light subject from back and front to avoid distracting/deep shadows (see close up of heads below). Props Appropriate props can make subject look more compelling, natural and composed in their surroundings (e.g. books, clipboard, stethoscope, etc.)

6. Advantage of CSS More control over formatting and layout Can make changes easily Consistency Used widely Good for creating a “brand” look The preferred choice The use is encouraged by w3.org

7. Example (External Styles) mystyles.css H1 { Font-Size: 40pt; color: teal; padding: 20px; } P { Font-Size: 40pt; color: teal; } Link mystyles.css to web page: Insert tags - styles applied automatically: composition photography is important to web page design

8. WYSIWYG editors Dreamweaver and Expression Web allow styles to be changed either by: typing directly in the source code (the code is prompted as you type) using the CSS panel/window

9. Dreamweaver CSS Window

10. Expression Web CSS Window

11. Formatting using CSS Exercise - style a restaurant menu

12. 1.Start Dreamweaver 2.Create a new blank web page (File > New > Blank page) 3.Click on the blank page (design window, not source) 4.Click File > Import > Word document and find indianmenu.docx Dreamweaver can import Word documents with formatting intact, saving you time Importing a restaurant menu from MS Word

13. 1.Click anywhere inside the table. 2.Click in the bottom left: 3.In the Properties window (along bottom), find the border setting and change it to 0. (if Property window is not visible, click Window > Properties). This turns off the border. Also set the table width (W) to 700 pixels. The table helps position the content. Table width can be in pixels (fixed width) or % (percentage width, e.g. 90% = 90% of the available screen) Modifying and setting up table layouts

14. 1.Click underneath Soups and before the word “MULLIGATAWNY” then click Insert > Table. Create a 2 row, 3 column table, width 700px and border=0 2.Drag the soup dishes into the table cells: 3.Under the Side Dishes create another table with 3 rows, 3 columns and move the dishes into the table cells Inserting more tables

15. 1.Here is a picture of the resulting page so far. Modifying table column widths

16. 1.Click anywhere in the top table, then select table in the bottom left: 2.Click View > Visual Aids and check Table Widths 3.Drag the columns to get exact measurements: 4.Repeat steps for other tables Modifying table column widths

17. 1.All the tables should be matching: Modifying table column widths

18. Changing the text formats 1.Format the text using,, etc. to get implicit coding. 2.Select the heading “Restaurant Menu” and change to Heading 1 using the Properties window. 3.Select Appetisers, Soups and Side Dishes and change these to Heading 2 4.The text in the table has the or paragraph text format. This is as it should be

19. Comparing code and design 1.Highlight Restaurant and Appetizers 2.See how the and tags have been added 3.It is important to use header tags as the convey meaning and structure (they are semantic). They can be restyled using CSS later on

20. Comparing code and design 1.Highlight Restaurant and Appetizers 2.See how the and tags have been added 3.It is important to use header tags as the convey meaning and structure (they are semantic). They can be restyled using CSS later on

21. Adding CSS to change and 1.Click on the main heading Restaurant Menu. 2.Click on the CSS button (1) in the bottom left of the Properties panel, then click the Edit Rule button (2) 3.In the New CSS Rule panel, click the drop down menu and select Tag. 4.In the box underneath it should have h1 (because you clicked text): 5.Click Ok to get another window

22. 1.Change the font name, the size, colour, and any settings. Click Apply to see changes as you experiment. 2.Click OK when done. 3.If you use again anywhere, it will have the settings you made. This is CSS! You will see some CSS like this in the section in the code view: 4.On the page, click a Header 2 sub-heading, e.g. Appetizers 5.Repeat the same steps as before to change the style of the tag Adding CSS to change and

23. H1 and H2 tags re-styled

24. Style 1.Click inside a cell 2.Click Edit Rule 3.Select Tag from the dropdown: 4.Make sure the selector name is p. 5.Click Ok 6.Change the settings for the p selector:

25. Style 1.Click inside any cell. 2.Select the tag either in the source code or in the properties window 3.click the CSS and Edit Rule buttons 4.As before, select the Tag from the drop down 5.Then change any of the properties

26. Other styles, e.g. 1.Add a fixed background image with no repeat to the body tag (create a folder called images, find an image and save to the folder first, then add the CSS as before:

27. Tidy up 1.When viewed in a web browser, the page may extend across the screen. To squeeze it together so there are spaces either side (centred layout), change the CSS for the. Click this example: webdesign.about.com to see what a centred layout looks like.webdesign.about.com 2.The width 700px is the width of the table 3.The auto margins helps centre the body of the page

28. Tidy up - change colours Let’s say the colours are cold and not hot and spicy enough for the menu. Change the colours using CSS: Remove the colour for the style: 1.Click in table cell, then click in bottom left. This selects the tag 2.On the right select the CSS Styles panel. You can change the styles here as well. You may need to move things around to find the panel and settings for td 3.Remove the background colour of the cells

29. Final page Change the background colour and body text colour. 1.Click Body in the bottom left 2.On the right find the body style 3.Find the color style 4.Click the colour square 5.Move the cursor and notice there is an eye dropper 6.Choose a colour from the background image 7.The colour of the bacground should change. 8.Change the font colour too, e.g. white

30. Tidy up - change colours Lighten the image if the text is difficult to read. Generally placing images behind text is not good practice as it makes the text harder to read (accessibility).

31. Classes Classes (denoted by a period or “.”) are styles which can be applied anywhere, more than once e.g.. red { color:red; }. shade { background-color: #C9C9AE; } You then apply them to any specific tag, e.g. the DIV or SPAN tag is a generic tag with no properties of its own, used for defining formats without the need to use tags such as

32. Classes Add a class to define the font for a single word. Use the DIV tag to place it around the word. 1.Highlight the words Onion Bhajia 2.Select New CSS Rule from the CSS panel properties below 3.Click Edit Rule 4.Select Class from the drop down 5.Name it onion and change the background colour, e.g. red span class="onion">ONION BHAJIA

33. Classes Apply the class elsewhere. You can apply a class anywhere. For example: 1.Click Coconut Soup 2.Select the class from the CSS properties 3.It should reformat. Look at the HTML 4.Experiment with more classes

34. Finishing The bottom two tables may have missed the tag for the contents, therefore the style for is not applied there. Click the cells and choose Paragraph from the properties window.

35. IDs IDs (denoted by a gate symbol or “#”) are styles which can be applied anywhere, once e.g. # choice1 { color:red; } #choice2 { color:blue; } You then apply them to a tag, e.g.

36. Units Examples % relative, e.g. 120% of default size emrelative, e.g. 1.2em = 120% of size of letter “m” px absolute, e.g. 100px pt absolute, e.g. 36pt = ½ inch, 72pt = 1 inch mm, cm, in absolute, e.g. 20mm, 1in pc absolute, e.g. 2 pc = 2 picas or 12pt The % or em example is the best choice

37. Links to resources You can find “cheat sheets” listing CSS examples. Use Google to search. Some websites can generate small snippets of CSS. You then copy and paste it into your pages More resources: http://tv.adobe.com/videos/css/ http://webdesign.about.com/od/dreamweaverhowtos/ss/aadwcss_6.htm http://www.w3schools.com/css/default.asp