Kanida Sinmai ksinmai@hotmail.com http://mis.csit.sci.tsu.ac.th/kanida CSS – Cascading Style Sheets Kanida Sinmai ksinmai@hotmail.com http://mis.csit.sci.tsu.ac.th/kanida
Inline CSS Inline CSS uses style attribute e.g. <h1 style="color:blue">This is a Blue Heading</h1>
Internal CSS Internal styling is defined in the <head> section of an HTML page, using a <style> element. <!DOCTYPE html> <html> <head> <style> body {background-color:lightgrey} h1 {color:blue} p {color:green} </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
Example: styles.css body { background-color: lightblue; } h1 { color: navy; margin-left: 20px;
CSS background background-color background-image background-repeat background-position
background-color: With CSS, a color is most often specified by: a HEX value - like "#ff0000" an RGB value - like "rgb(255,0,0)" a color name - like "red" h1 { background-color: #6495ed; } p { background-color: rgb(255,0,0); div { background-color: green; See - http://www.w3schools.com/cssref/css_colornames.asp for further information
Background-image body { background-image: url("paper.gif"); }
Background Image - Repeat Horizontally or Vertically body { background-image: url("gradient_bg.png"); background-repeat: repeat-x; } To repeat an image vertically set background-repeat: repeat-y; To show image only once set background-repeat: no-repeat;
background-position body { background-image: url("img_tree.png"); background-repeat: no-repeat; background-position: right top; margin-right: 200px; } Values: left top left center left bottom right top right center right bottom center top center center center bottom
CSS Font p { font-family: "Times New Roman", Times, serif; }
Font style p { font-style: normal; } p.italic { font-style: italic;
Font Size h1 { font-size: 40px; } h2 { font-size: 30px; p { font-size: 14px;
CSS Links a:link { text-decoration: none; background-color: #B2FF99; } a:visited { background-color: #FFFF85; a:hover { text-decoration: underline; background-color: #FF704D; a:active {
CSS Lists <p>Example of unordered lists:</p> <ul class="a"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ul class="b"> <p>Example of ordered lists:</p> <ol class="c"> </ol> <ol class="d"> ul.a { list-style-type: circle; } ul.b { list-style-type: square; ol.c { list-style-type: upper-roman; ol.d { list-style-type: lower-alpha;
CSS Lists - image ul { list-style-image: url('sqpurple.gif'); } <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul>
CSS Table: border table, th, td { border: 1px solid black; } <tr> <th>Firstname</th> <th>Lastname</th> </tr> <td>Peter</td> <td>Griffin</td> <td>Lois</td> </table>