1. AGENDA Introduction Syntax How to use style specifications. Styles CSS Tutorial Miftahul Huda Speech Signal Processing Research Group Digital Signal Processing Laboratory EEPIS

2. Introduction Introduction Applying multiple sheets to a single document

3. Introduction Introduction WARNING Don't go there!

4. Introduction Introduction.warning {color:#ff0000} h1.warning {text-decoration:underline} p.warning {font-weight:bold} WARNING Don't go there!

5. Syntax Syntax selector {property: value} Examples: body {color: black} p {font-family: "sans serif"} p {text-align:center;color:red}

6. How to... - External Style Sheet Styles are specified in an external file. This is the most common and useful way of using style specifications. <link rel="stylesheet" type="text/css" href="mystyle.css">... relationship

7. How to... - Internal Style Sheet Styles are specified inside the header of the HTML document. hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")}...

8. How to... - Inline styles A style is applied to only one occurrence of an element. This is a paragraph Use this method sparingly!

9. Follow a demonstration

10. Working with the Box Model The box model is an element composed of four sections: –Margin –Border –Padding –content

12. Rounded corners in CSS

13. .roundcont { width: 250px; background-color: #f90; color: #fff; }.roundcont p { margin: 0 10px; }.roundtop { background: url(tr.gif) no-repeat top right; }.roundbottom { background: url(br.gif) no-repeat top right; } img.corner { width: 15px; height: 15px; border: none; display: block !important; }

14. <img src="tl.gif" alt="" width="15" height="15" class="corner" style="display: none" /> Teks isi <img src="bl.gif" alt="" width="15" height="15" class="corner" style="display: none" />