1. Layout using CSS

2. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is intended to be displayed in italic.

3. The goal

4. Part 1: Layout

5. The concept Use tags to structure the blocks of the page. (content) Define a style for tags to achieve the desired output. (presentation)

6. 1. Basic properties width (default is 100%) padding (ex: padding: 10px;) background (ex: background: #ffffff;) etc

7. 2. Floating elements Enables blocks to be aligned Property: – float: left; – float: right; – float: none;

8. 2. Floating elements, example Three divs in a page, with following style: div.title{ float:left; border:1px solid gray; padding:10px; } Output: layoutb.html

9. 2. Floating elements, example Three divs in a page, with following style: div.title{ width:200px; float:left; border:1px solid gray; padding:10px; } Output: layoutc.html

10. 3. Positioning Elements can be positioned at any coordinates in the page Property: – position: static; – position: relative; – position: absolute;

11. Positioning example Three divs in a page, with following style: div.title{ width:200px; position: absolute; top: [100,200,300]px; left: [100,200,300]px; border:1px solid gray; padding:10px; } Output: layoutd.html

12. 1. no layout Page Title This is the first block. This is still the first block. This is the second block. layout1.html

13. Output

14. 2. Three sections (1) Page Title...

15. 2. Three sections (2)... This is the first block This is still the first block....

16. 2. Three sections (3)... This is the second block.

17. Output

18. 2. Three “ typed ” sections (1) Page Title...

19. 2. Three sections (2)... This is the first block This is still the first block....

20. 2. Three sections (3)... This is the second block.

21. Output

22. 3. Writing a style (1) div.title{ border:1px solid gray; padding:10px; }...

23. 3. Writing a style (2)... div.part1{ border:1px solid gray; padding:10px; }...

24. 3. Writing a style (3)... div.part2{ border:1px solid gray; padding:10px; } layout2.html

25. Output

26. 4. Two column layout v1 - right column has variable width

27. 4. Two column layout v1

28. 4. Two column layout v1 (1) div.title{ border:1px solid gray; padding:10px; }...

29. 4. Two column layout v1 (2)... div.part1{ float: left; width:200px; border:1px solid gray; padding:10px; }...

30. 4. Two column layout v1 (3)... div.part2{ margin-left:222px; border:1px solid gray; padding:10px; }

31. Output As required Right column has variable width layout2col1.html

32. 5. Two column layout v2 – left column has variable size

33. 5. Two column layout v2

34. 5. Two column layout v2 (1) div.title{ border:1px solid gray; padding:10px; }...

35. 5. Two column layout v2 (2)... div.part1{ margin-right:222px; border:1px solid gray; padding:10px; }...

36. 5. Two column layout v2 (3)... div.part2{ float:right; width:200px; border:1px solid gray; padding:10px; }

37. Output As required Left column has variable width In Body of document, part1 and part2 have been swapped, otherwise doesn't work At home, try to swap them back and see what happens... There's a way to make the layout work without swapping. See three column example further on... layout2col2.html

38. 6. Three column layout v1 – Right column has variable width

39. 6. Three column layout v1

40. 6. Change in the document body... layout3col1.html

41. 6. Three column layout v1 (1)... div.part1{ float: left; width:200px; border:1px solid gray; padding:10px; }...

42. 6. Three column layout v1 (2)... div.part3{ float: left; width:200px; border:1px solid gray; padding:10px; }...

43. 6. Two column layout v1 (3)... div.part2{ margin-left:444px; border:1px solid gray; padding:10px; }

44. 8. Three column layout v3 – All three columns have variable widths

45. 8. Three column layout v3

46. 8. Three column layout v3 (1)... div.part1 { float: left; width:20%; border:1px solid gray; }... layout3col3.html

47. 8. Three column layout v3 (2)... div.part3 { float:left; width:58%; border:1px solid gray; }...

48. 8. Three column layout v3 (3)... div.part2 { float:left; width:20%; background:#ffffff; border:1px solid gray; }