Uploaded byJussi Pohjolainen
CSS and Layout
The document discusses CSS layout and elements. It explains that div and span elements are used to group XHTML elements and define layout, but do nothing without CSS. CSS is then used to style these elements and control positioning. The document provides examples of using div to lay out page sections like headers, navigation, content, and footers. It also explains CSS box model properties for layout like margins, padding, borders, and widths.
CSS and Layout
- 1. CSS and Layout Jussi Pohjolainen Tampere University of Applied Sciences
- 2. XHTML Related CSS Elements • You can group XHTML – page using div and span elements • div and span elements do not do anything, unless they are connected to css • xhtml: – <p>Text text text <span class="important">text text</span>. Text text text.</p> • CSS: – span.important { color: RGB(255,0,0); }
- 3. span and div? • By using div, you can divide xhtml – page in to logical pieces. The posiKon of these are defined in CSS – Example: navigaKon, header, footer, contents • Span is used to give layout for text
- 4. span and div <div class="header"> <h1>Title</h1> </div> <div class="contents"> <p>Contents: <span class="highlight">this is different</span></p> </div> <div class="footer"> <p>Copyright 2008</p> </div>
- 5. Layout Basics • XHTML page is divided into “boxes” by using the div-‐element • Box consists of – Content – Padding – Border – Marginal
- 6.
- 7. CSS Box Model p.leipateksti { border: 1px solid black; }
- 8. CSS Box Model p.leipateksti { border: 1px solid black; width: 50%; }
- 9. CSS Box Model p.leipateksti { border: 1px solid black; padding: 20px; }
- 10. CSS Box Model p.leipateksti { border: 1px solid black; margin: 20px; }
- 11. Features • Margins – margin-top – margin-bottom – margin-left – margin-right – All together: margin • Padding – padding-‐top – padding-‐boRom – padding-‐leS – padding-‐right – All together: padding
- 12. Features • Borders – border-top-width – border-bottom-width – border-right-width – border-left-width – border-width – border-color – border-style (none, dotted, solid, double, groove, ridge, inset, outset) • CombinaKons – border-top – border-right – border-bottom – border-left • All together – border
- 13. Features • width • height • float (none, left, right)
- 14. h1 { Example font-family: Arial, Helvetica, sans-serif; color: RGB(0,0,255); background-color: RGB(200,200,200); border: 2px dotted RGB(0,0,0); padding: 10px; text-align: center; }
- 15. Example: Layout <html> <head><title>Otsikko</title></head> <body> <!– whole page inside one div --> <div id="wholepage"> </div> </body> </html>
- 16. Example: Layout <html> <head><title>Otsikko</title></head> <body> <div id="wholepage"> <div id="header"> <!– Title --> </div> <div id="navigation"> <!– Navigation --> </div> <div id="contents"> <!– Contents --> </div> <div id="footer"> <!– Footer --> </div> </div> </body> </html>
- 17. Example: Layout #wholepage { width: 100%; background-color: RGB(255,255,255); color: RGB(0,0,0); border: 1px solid RGB(100,100,100); }
- 18. Example: Layout #header { padding: 10px; background-color: RGB(220,220,220); border-bottom: 1px solid RGB(100,100,100); } #navigation { float: left; width: 160px; margin: 0; padding: 10px; }
- 19. Example: Layout #contents { margin-left: 200px; border-left: 1px solid RGB(100,100,100); padding: 10px; max-width: 600px; } #footer { padding: 10px; color: RGB(100,100,100); background-color: RGB(220,220,220); border-top: 1px solid RGB(100,100,100); }
- 20.