Monday 7 March 2016

CSS LAYOUT

CSS layout is easy to design. We can use CSS layout to design our web page such as home page, contact us, about us etc.
There are 3 ways to design layout of a web page:
  1. HTML Div with CSS: fast and widely used now.
  2. HTML Table: slow and less preferred.
  3. HTML Frameset: deprecated now.
A CSS layout can have header, footer, left pane, right pane and body part. Let's see a simple example of CSS layout.

CSS layout example


  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. .header{margin:-8px -8px 0px;background:linear-gradient(blue,skyblue);color:white;text-align:center;padding:10px;}  
  6. .container{width:100%}  
  7. .left{width:15%;float:left;}  
  8. .body{width:65%;float:left;background-color:pink;padding:5px;}  
  9. .right{width:15%;float:left;}  
  10. .footer{margin:-8px;clear:both;background:linear-gradient(blue,skyblue);color:white;text-align:center;padding:10px;}  
  11. </style>  
  12. </head>  
  13. <body>  
  14. <div class="header"><h2>JavaTpoint</h2></div>  
  15.   
  16. <div class="container">  
  17. <div class="left">  
  18. <p>Left Page</p>  
  19. </div>  
  20. <div class="body">  
  21. <h1>Body Page</h1>  
  22. <p>Page Content goes here</p><p>Page Content goes here</p><p>Page Content goes here</p>  
  23. <p>Page Content goes here</p><p>Page Content goes here</p><p>Page Content goes here</p>  
  24. <p>Page Content goes here</p><p>Page Content goes here</p><p>Page Content goes here</p>  
  25. <p>Page Content goes here</p><p>Page Content goes here</p><p>Page Content goes here</p>  
  26. <p>Page Content goes here</p>  
  27. </div>  
  28. <div class="right">  
  29. <p>Right Page</p>  
  30. </div>  
  31. </div>  
  32.   
  33. <div class="footer">  
  34. <p>Footer</p>  
  35. </div>  
  36.   
  37. </body>  
  38. </html>  

CSS Table

We can apply style on HTML tables for better look and feel. There are some CSS properties that are widely used in designing table using CSS:
  • border
  • border-collapse
  • padding
  • width
  • height
  • text-align
  • color
  • background-color

CSS Table Border

We can set border for the table, th and td tags using the CSS border property.

  1. <style>  
  2. table, th, td {  
  3.     border: 1px solid black;  
  4. }  
  5. </style>  


CSS Table Border Collapse

By the help of border-collapse property, we can collapse all borders in one border only.

  1. <style>  
  2. table, th, td {  
  3.     border: 2px solid black;  
  4.     border-collapse: collapse;  
  5. }  
  6. </style>  



CSS Table Padding

We can specify padding for table header and table data using the CSS padding property.

  1. <style>  
  2. table, th, td {  
  3.     border: 1px solid black;  
  4.     border-collapse: collapse;  
  5. }  
  6. th, td {  
  7.     padding: 10px;  
  8. }  
  9. </style>  


CSS Table: Styling even and odd cells

We can style even and odd table cells for better look and feel. In this code, we are displaying different background colors on even and odd cells. Moreover, we have changed the background-color and color of <th> tag.
CSS code:

  1. <style>  
  2. table, th, td {  
  3.     border: 1px solid black;  
  4.     border-collapse: collapse;  
  5. }  
  6. th, td {  
  7.     padding: 10px;  
  8. }  
  9. table#alter tr:nth-child(even) {  
  10.     background-color: #eee;  
  11. }  
  12. table#alter tr:nth-child(odd) {  
  13.     background-color: #fff;  
  14. }  
  15. table#alter th {  
  16.     color: white;  
  17.     background-color: gray;  
  18. }  
  19. </style>  
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)