layout using css. using multiple classes in the...
TRANSCRIPT
![Page 1: Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is](https://reader035.vdocument.in/reader035/viewer/2022062423/56649c7c5503460f94930a06/html5/thumbnails/1.jpg)
Layout using CSS
![Page 2: Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is](https://reader035.vdocument.in/reader035/viewer/2022062423/56649c7c5503460f94930a06/html5/thumbnails/2.jpg)
Using multiple classes
In the head:<style type="text/css" >
.important{font-style:italic;}
.title{color:red;}
</style>
In the body:<p class="title important">Here's a type of paragraph that is intended to be displayed in italic.</p>
![Page 3: Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is](https://reader035.vdocument.in/reader035/viewer/2022062423/56649c7c5503460f94930a06/html5/thumbnails/3.jpg)
The goal
![Page 4: Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is](https://reader035.vdocument.in/reader035/viewer/2022062423/56649c7c5503460f94930a06/html5/thumbnails/4.jpg)
Part 1: Layout
![Page 5: Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is](https://reader035.vdocument.in/reader035/viewer/2022062423/56649c7c5503460f94930a06/html5/thumbnails/5.jpg)
The concept
• Use <div> tags to structure the blocks of the page. (content)
• Define a style for <div> tags to achieve the desired output. (presentation)
![Page 6: Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is](https://reader035.vdocument.in/reader035/viewer/2022062423/56649c7c5503460f94930a06/html5/thumbnails/6.jpg)
1. Basic properties
• width (default is 100%)• padding (ex: padding: 10px;)• background (ex: background: #ffffff;)• etc
![Page 7: Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is](https://reader035.vdocument.in/reader035/viewer/2022062423/56649c7c5503460f94930a06/html5/thumbnails/7.jpg)
2. Floating elements
• Enables blocks to be aligned• Property:– float: left;– float: right;– float: none;
![Page 8: Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is](https://reader035.vdocument.in/reader035/viewer/2022062423/56649c7c5503460f94930a06/html5/thumbnails/8.jpg)
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
![Page 9: Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is](https://reader035.vdocument.in/reader035/viewer/2022062423/56649c7c5503460f94930a06/html5/thumbnails/9.jpg)
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
![Page 10: Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is](https://reader035.vdocument.in/reader035/viewer/2022062423/56649c7c5503460f94930a06/html5/thumbnails/10.jpg)
3. Positioning
• Elements can be positioned at any coordinates in the page
• Property:– position: static;– position: relative;– position: absolute;
![Page 11: Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is](https://reader035.vdocument.in/reader035/viewer/2022062423/56649c7c5503460f94930a06/html5/thumbnails/11.jpg)
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
![Page 12: Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is](https://reader035.vdocument.in/reader035/viewer/2022062423/56649c7c5503460f94930a06/html5/thumbnails/12.jpg)
1. no layout
<body><h1>Page Title</h1><p>This is the first block.</p><p>This is still the first block.</p>
<p>This is the second block.</p></body>
layout1.html
![Page 13: Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is](https://reader035.vdocument.in/reader035/viewer/2022062423/56649c7c5503460f94930a06/html5/thumbnails/13.jpg)
Output
![Page 14: Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is](https://reader035.vdocument.in/reader035/viewer/2022062423/56649c7c5503460f94930a06/html5/thumbnails/14.jpg)
2. Three sections (1)
<body><div> <h1>Page Title</h1></div>...</body>
![Page 15: Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is](https://reader035.vdocument.in/reader035/viewer/2022062423/56649c7c5503460f94930a06/html5/thumbnails/15.jpg)
2. Three sections (2)<body>...<div> <p>This is the first block</p> <p>This is still the first block.</p>
</div>...</body>
![Page 16: Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is](https://reader035.vdocument.in/reader035/viewer/2022062423/56649c7c5503460f94930a06/html5/thumbnails/16.jpg)
2. Three sections (3)
<body>...<div> <p>This is the second block.</p>
</div></body>
![Page 17: Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is](https://reader035.vdocument.in/reader035/viewer/2022062423/56649c7c5503460f94930a06/html5/thumbnails/17.jpg)
Output
![Page 18: Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is](https://reader035.vdocument.in/reader035/viewer/2022062423/56649c7c5503460f94930a06/html5/thumbnails/18.jpg)
2. Three “typed” sections (1)
<body><div class=”title”> <h1>Page Title</h1></div>...</body>
![Page 19: Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is](https://reader035.vdocument.in/reader035/viewer/2022062423/56649c7c5503460f94930a06/html5/thumbnails/19.jpg)
2. Three sections (2)<body>...<div class=”part1”> <p>This is the first block</p> <p>This is still the first block.</p>
</div>...</body>
![Page 20: Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is](https://reader035.vdocument.in/reader035/viewer/2022062423/56649c7c5503460f94930a06/html5/thumbnails/20.jpg)
2. Three sections (3)
<body>...<div class=”part2”> <p>This is the second block.</p>
</div></body>
![Page 21: Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is](https://reader035.vdocument.in/reader035/viewer/2022062423/56649c7c5503460f94930a06/html5/thumbnails/21.jpg)
Output
![Page 22: Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is](https://reader035.vdocument.in/reader035/viewer/2022062423/56649c7c5503460f94930a06/html5/thumbnails/22.jpg)
3. Writing a style (1)
<style>div.title{ border:1px solid gray; padding:10px;}...</style>
![Page 23: Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is](https://reader035.vdocument.in/reader035/viewer/2022062423/56649c7c5503460f94930a06/html5/thumbnails/23.jpg)
3. Writing a style (2)
<style>...div.part1{ border:1px solid gray; padding:10px;}...</style>
![Page 24: Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is](https://reader035.vdocument.in/reader035/viewer/2022062423/56649c7c5503460f94930a06/html5/thumbnails/24.jpg)
3. Writing a style (3)
<style>...div.part2{ border:1px solid gray; padding:10px;}</style>
layout2.html
![Page 25: Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is](https://reader035.vdocument.in/reader035/viewer/2022062423/56649c7c5503460f94930a06/html5/thumbnails/25.jpg)
Output
![Page 26: Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is](https://reader035.vdocument.in/reader035/viewer/2022062423/56649c7c5503460f94930a06/html5/thumbnails/26.jpg)
4. Two column layoutv1 - right column has variable width
![Page 27: Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is](https://reader035.vdocument.in/reader035/viewer/2022062423/56649c7c5503460f94930a06/html5/thumbnails/27.jpg)
4. Two column layout v1
![Page 28: Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is](https://reader035.vdocument.in/reader035/viewer/2022062423/56649c7c5503460f94930a06/html5/thumbnails/28.jpg)
4. Two column layout v1 (1)
<style>div.title{ border:1px solid gray; padding:10px;}...</style>
![Page 29: Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is](https://reader035.vdocument.in/reader035/viewer/2022062423/56649c7c5503460f94930a06/html5/thumbnails/29.jpg)
4. Two column layout v1 (2)
<style>...div.part1{float: left;width:200px;border:1px solid gray;padding:10px;}...</style>
![Page 30: Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is](https://reader035.vdocument.in/reader035/viewer/2022062423/56649c7c5503460f94930a06/html5/thumbnails/30.jpg)
4. Two column layout v1 (3)
<style>...div.part2{margin-left:222px;border:1px solid gray;padding:10px;}</style>
![Page 31: Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is](https://reader035.vdocument.in/reader035/viewer/2022062423/56649c7c5503460f94930a06/html5/thumbnails/31.jpg)
Output
• As required• Right column has variable width
• layout2col1.html
![Page 32: Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is](https://reader035.vdocument.in/reader035/viewer/2022062423/56649c7c5503460f94930a06/html5/thumbnails/32.jpg)
5. Two column layoutv2 – left column has variable size
![Page 33: Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is](https://reader035.vdocument.in/reader035/viewer/2022062423/56649c7c5503460f94930a06/html5/thumbnails/33.jpg)
5. Two column layout v2
![Page 34: Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is](https://reader035.vdocument.in/reader035/viewer/2022062423/56649c7c5503460f94930a06/html5/thumbnails/34.jpg)
5. Two column layout v2 (1)
<style>div.title{ border:1px solid gray; padding:10px;}...</style>
![Page 35: Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is](https://reader035.vdocument.in/reader035/viewer/2022062423/56649c7c5503460f94930a06/html5/thumbnails/35.jpg)
5. Two column layout v2 (2)
<style>...div.part1{margin-right:222px;border:1px solid gray;padding:10px;}...</style>
![Page 36: Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is](https://reader035.vdocument.in/reader035/viewer/2022062423/56649c7c5503460f94930a06/html5/thumbnails/36.jpg)
5. Two column layout v2 (3)<style>...div.part2{float:right;width:200px;border:1px solid gray;padding:10px;}</style>
![Page 37: Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is](https://reader035.vdocument.in/reader035/viewer/2022062423/56649c7c5503460f94930a06/html5/thumbnails/37.jpg)
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
![Page 38: Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is](https://reader035.vdocument.in/reader035/viewer/2022062423/56649c7c5503460f94930a06/html5/thumbnails/38.jpg)
6. Three column layoutv1 – Right column has variable width
![Page 39: Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is](https://reader035.vdocument.in/reader035/viewer/2022062423/56649c7c5503460f94930a06/html5/thumbnails/39.jpg)
6. Three column layout v1
![Page 40: Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is](https://reader035.vdocument.in/reader035/viewer/2022062423/56649c7c5503460f94930a06/html5/thumbnails/40.jpg)
6. Change in the document body
<body><div class=”part1”>...</div><div class=”part3”>...</div><div class=”part2”>...</div></body>
layout3col1.html
![Page 41: Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is](https://reader035.vdocument.in/reader035/viewer/2022062423/56649c7c5503460f94930a06/html5/thumbnails/41.jpg)
6. Three column layout v1 (1)
<style>...div.part1{float: left;width:200px;border:1px solid gray;padding:10px;}...</style>
![Page 42: Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is](https://reader035.vdocument.in/reader035/viewer/2022062423/56649c7c5503460f94930a06/html5/thumbnails/42.jpg)
6. Three column layout v1 (2)
<style>...div.part3{float: left;width:200px;border:1px solid gray;padding:10px;}...</style>
![Page 43: Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is](https://reader035.vdocument.in/reader035/viewer/2022062423/56649c7c5503460f94930a06/html5/thumbnails/43.jpg)
6. Two column layout v1 (3)
<style>...div.part2{margin-left:444px;border:1px solid gray;padding:10px;}</style>
![Page 44: Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is](https://reader035.vdocument.in/reader035/viewer/2022062423/56649c7c5503460f94930a06/html5/thumbnails/44.jpg)
8. Three column layoutv3 – All three columns have variable widths
![Page 45: Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is](https://reader035.vdocument.in/reader035/viewer/2022062423/56649c7c5503460f94930a06/html5/thumbnails/45.jpg)
8. Three column layout v3
![Page 46: Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is](https://reader035.vdocument.in/reader035/viewer/2022062423/56649c7c5503460f94930a06/html5/thumbnails/46.jpg)
8. Three column layout v3 (1)
<style>...div.part1 {float: left;width:20%;border:1px solid gray;}...</style>
layout3col3.html
![Page 47: Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is](https://reader035.vdocument.in/reader035/viewer/2022062423/56649c7c5503460f94930a06/html5/thumbnails/47.jpg)
8. Three column layout v3 (2)
<style>...div.part3 {float:left;width:58%;border:1px solid gray;}...</style>
![Page 48: Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is](https://reader035.vdocument.in/reader035/viewer/2022062423/56649c7c5503460f94930a06/html5/thumbnails/48.jpg)
8. Three column layout v3 (3)
<style>...div.part2 {float:left;width:20%;background:#ffffff;border:1px solid gray;}</style>