SlideShare a Scribd company logo

Css for Development

•Download as PPTX, PDF•
•
T
tsengsite

The document contains a presentation on CSS (Cascading Style Sheets) given by Herman. The presentation covers the basics of CSS including how it separates design from HTML, writing CSS selectors for tags, classes and IDs, basic styling properties, the box model, positioning, CSS frameworks, and standards used at Bina Nusantara University.

Related slideshows

SMACSS Workshop
SMACSS WorkshopSMACSS Workshop
SMACSS Workshop
 
CSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and moreCSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and more
 
CSS3 Introduction
CSS3 IntroductionCSS3 Introduction
CSS3 Introduction
 
1 of 47
Css for Development
Herman  2003 - 2004 Hermes Telenet Delphi Developer  2003 - 2004 Palm Mas Asri Database Admin  2005 - 2006 Bina Nusantara University Web Designer  2006 - 2007 Lyto Web Designer  2007 - 2009 E-Motion Entertainment Web Analyst & SEO Specialist  2007 - 2011 Bina Nusantara Group Electronic Media Specialist
Agenda  Refreshing: XHTML  CSS Introduction  Writing CSS  Basic Styling  Box Model  Positioning  CSS for Development  Current Standards at BINUS 3
Technical Issue  XHTML  CSS 2.1  Adobe Dreamweaver  Komodo Activestate 4
Refreshing: XHTML 5
Displaying Text <h1> . . . </h1> <h6> . . . </h6> <p> . . . </p> <strong> . </strong> <em> . . . </em> <br /> <img src=“ . . . ” /> <a href=“ . . . ” >your link</a> 6
Displaying Lists <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> <ol> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ol> 7
Displaying Table <table> <tr> <th> . . </th> <th> . . </th> </tr> <tr> <td> . . </td> <td> . . </td> </tr> </table> 8
Displaying Form <form action=“#” method=“post”> <input type=“text” /> <input type=“password” /> <input type=“file” /> <input type=“radio” /> <input type=“checkbox” /> <input type=“submit” /> <textarea></textarea> <select> <option> . . </option> <option> . . </option> </select> </form> 9
CSS Introduction 10
Case Change the font color, please? Modify the layout, please? 11
Case Change the font color, please? Modify the layout, please? Skinning without touching the HTML code, please? I’m coding, change the design, please? 12
Solution CSS HTML 13
Why CSS? <p><font color=“red” size=“3”>Aye Sir!</font></p> <p class=“redsmall”>Aye Sir! </p> <table border=“1” bordercolor=“red” width=“100%” cellpadding=“0” cellspacing=“0”> <table class=“customtable”>  Clean HTML  Reduced file sizes 14
Why CSS?  Separated presentation and design layer  Frameworks for different projects 15
Why CSS?  Reduced development (and maintenance) costs  Separated development 16
Problem! Internet Explorer, Safari, Firefox, Chrome, Opera 17
Writing CSS 18
Applying CSS External Stylesheet <link rel=“stylesheet” type=“text/css” href=“css.css” /> Internal Stylesheet <style type=“text/css”> body { background:yellow; } </style> Tag Stylesheet <p style=“color:red;”>Hello World</p> 19
CSS Standards .css-style{ color:red; } margin-left : 20px; margin-top : 10px; margin-right : 15px; margin-bottom: 25px; margin: 20px 10px 15px 25px; 20
Writing CSS: Styling a Tag Writing on stylesheet body{ background:green; } How to use it <body>Hello World!</body> How to this tag style when  Applying default style to a tag 21
Writing CSS: Styling a Class Writing on stylesheet .unique{ background:yellow; } How to use it <p class=“unique”>Hello World!</p> <a href=“index.aspx”class=“unique”>Home</a> How to this class when  Using the style more than once  Combining a style with another style <p class=“small red box”>Hello World!</p> 22
Writing CSS: Styling an ID Writing on stylesheet #head{ background:red; } How to use it <p id=“haed”>Hello World!</p> How to this ID when  Using the style once  Emphasizing a class <p class=“box” id=“head”>Hello World!</p> <p class=“box”>Hello World!</p> <p class=“box” id=“head”>Hello World!</p> 23
Another Use Nested Style p .red { … } .red p { … } Pseudo a:hover { … } input:focus { … } li:last-child{ … } 24
Basic Styling font-size text-decoration font-style font-weight font-family color background-color border 25
CSS Box Model margin padding 26
CSS For Position float & clear 27
Try This Out! 28
CSS For Development 29
CSS Framework  Reset CSS  Function CSS  Layout CSS  Additional 1 CSS  Additional 2 CSS  Additional N CSS 30
CSS Framework  Reset CSS  Function CSS  Layout CSS  Additional 1 CSS  Additional 2 CSS  Additional N CSS 31
Reset & Function CSS Reset CSS Function CSS Standarize style between Most used style for different different browsers projects .clearfloat{…} body{ …} .warningmessage{…} p{…} .tableforstock{…} a{…} 32
Layout & Additional CSS Layout CSS Additional CSS Additional CSS to support the CSS for web layouting purposes layout • Main layout • Drop down menu layout • Layout for Homepage • Homepage Feature • Layout for Content Page 33
CSS Layering: Method 1 reset.css function.css Index.css basic.css reset.css layout.css function.css 34
CSS Layering: Method 2 basic.css Index.css layout.css 35
Current Standards At BINUS 36
CSS Framework  reset.css  basicstyle.css  framework.css  menu.css  additional.css 37
HTML Standards: Header & Menu <div id=“header”> <h1 id=“logo”> <a href=“#”> <span>XXXX</span> </a> </h1> </div> <div id=“menu”> <ul> <li> XXXXX <ul> <li>XXXX</li> <li>XXXX</li> </ul> </li> </ul> </div> 38
HTML Standards: Basic <div id=“header”> </div> <div id=“menu”> </div> <div id=“content”> </div> <div id=“footer”> </div> 39
HTML Standards: Content <div id=“content”> <div id=“leftcontent”> . . . . . </div> <div id=“rightcontent”> . . . . . </div> </div> 40
HTML Standards: Left Content <div id=“leftcontent”> <h2> . . . </h2> <div class=“headsectionbig”> <h3> . . . </h3> </div> <div class=“contentsectionbig”> . . . </div> <div class=“headsectionbig”> . . . </div> <div class=“contentsectionbig”> . . . </div> </div> 41
HTML Standards: Right Content <div id=“rightcontent”> <div id=“rightform”> <div class=“rightform”> . . . </div> <div class=“rightform”> . . . </div> </div> <div class=“headsectionsmall”> <h3> . . . </h3> </div> <div class=“contentsectionsmall”> . . . </div> </div> 42
HTML Standards: Table <table class=“tablewithborder” width=“100%”> <tr> <th> . . . </th> <th> . . . </th> </tr> <tr> <td> . . . </td> <td> . . . </td> <td> . . . </td> </tr> <tr> <td> . . . </td> <td> . . . </td> <td> . . . </td> </tr> </div> 43
HTML Standards: Form Layout <div class=“row”> <label></label> <div id=“rowwrap”> . . . </div> </div> <div class=“row”> <label></label> <div id=“rowwrap”> . . . </div> </div> 44
HTML Standards: Form Layout <div class=“row”> <label></label> <div id=“rowwrap”> . . . </div> </div> <div class=“row”> <label></label> <div id=“rowwrap”> . . . </div> </div> 45
Learning Resources 46
Learning Resources  w3schools.com  css-tricks.com  cssplay.co.uk 47

More Related Content

Css for Development

  • 2. Herman  2003 - 2004 Hermes Telenet Delphi Developer  2003 - 2004 Palm Mas Asri Database Admin  2005 - 2006 Bina Nusantara University Web Designer  2006 - 2007 Lyto Web Designer  2007 - 2009 E-Motion Entertainment Web Analyst & SEO Specialist  2007 - 2011 Bina Nusantara Group Electronic Media Specialist
  • 3. Agenda  Refreshing: XHTML  CSS Introduction  Writing CSS  Basic Styling  Box Model  Positioning  CSS for Development  Current Standards at BINUS 3
  • 4. Technical Issue  XHTML  CSS 2.1  Adobe Dreamweaver  Komodo Activestate 4
  • 6. Displaying Text <h1> . . . </h1> <h6> . . . </h6> <p> . . . </p> <strong> . </strong> <em> . . . </em> <br /> <img src=“ . . . ” /> <a href=“ . . . ” >your link</a> 6
  • 7. Displaying Lists <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> <ol> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ol> 7
  • 8. Displaying Table <table> <tr> <th> . . </th> <th> . . </th> </tr> <tr> <td> . . </td> <td> . . </td> </tr> </table> 8
  • 9. Displaying Form <form action=“#” method=“post”> <input type=“text” /> <input type=“password” /> <input type=“file” /> <input type=“radio” /> <input type=“checkbox” /> <input type=“submit” /> <textarea></textarea> <select> <option> . . </option> <option> . . </option> </select> </form> 9
  • 11. Case Change the font color, please? Modify the layout, please? 11
  • 12. Case Change the font color, please? Modify the layout, please? Skinning without touching the HTML code, please? I’m coding, change the design, please? 12
  • 13. Solution CSS HTML 13
  • 14. Why CSS? <p><font color=“red” size=“3”>Aye Sir!</font></p> <p class=“redsmall”>Aye Sir! </p> <table border=“1” bordercolor=“red” width=“100%” cellpadding=“0” cellspacing=“0”> <table class=“customtable”>  Clean HTML  Reduced file sizes 14
  • 15. Why CSS?  Separated presentation and design layer  Frameworks for different projects 15
  • 16. Why CSS?  Reduced development (and maintenance) costs  Separated development 16
  • 17. Problem! Internet Explorer, Safari, Firefox, Chrome, Opera 17
  • 19. Applying CSS External Stylesheet <link rel=“stylesheet” type=“text/css” href=“css.css” /> Internal Stylesheet <style type=“text/css”> body { background:yellow; } </style> Tag Stylesheet <p style=“color:red;”>Hello World</p> 19
  • 20. CSS Standards .css-style{ color:red; } margin-left : 20px; margin-top : 10px; margin-right : 15px; margin-bottom: 25px; margin: 20px 10px 15px 25px; 20
  • 21. Writing CSS: Styling a Tag Writing on stylesheet body{ background:green; } How to use it <body>Hello World!</body> How to this tag style when  Applying default style to a tag 21
  • 22. Writing CSS: Styling a Class Writing on stylesheet .unique{ background:yellow; } How to use it <p class=“unique”>Hello World!</p> <a href=“index.aspx”class=“unique”>Home</a> How to this class when  Using the style more than once  Combining a style with another style <p class=“small red box”>Hello World!</p> 22
  • 23. Writing CSS: Styling an ID Writing on stylesheet #head{ background:red; } How to use it <p id=“haed”>Hello World!</p> How to this ID when  Using the style once  Emphasizing a class <p class=“box” id=“head”>Hello World!</p> <p class=“box”>Hello World!</p> <p class=“box” id=“head”>Hello World!</p> 23
  • 24. Another Use Nested Style p .red { … } .red p { … } Pseudo a:hover { … } input:focus { … } li:last-child{ … } 24
  • 26. CSS Box Model margin padding 26
  • 27. CSS For Position float & clear 27
  • 30. CSS Framework  Reset CSS  Function CSS  Layout CSS  Additional 1 CSS  Additional 2 CSS  Additional N CSS 30
  • 31. CSS Framework  Reset CSS  Function CSS  Layout CSS  Additional 1 CSS  Additional 2 CSS  Additional N CSS 31
  • 32. Reset & Function CSS Reset CSS Function CSS Standarize style between Most used style for different different browsers projects .clearfloat{…} body{ …} .warningmessage{…} p{…} .tableforstock{…} a{…} 32
  • 33. Layout & Additional CSS Layout CSS Additional CSS Additional CSS to support the CSS for web layouting purposes layout • Main layout • Drop down menu layout • Layout for Homepage • Homepage Feature • Layout for Content Page 33
  • 34. CSS Layering: Method 1 reset.css function.css Index.css basic.css reset.css layout.css function.css 34
  • 35. CSS Layering: Method 2 basic.css Index.css layout.css 35
  • 37. CSS Framework  reset.css  basicstyle.css  framework.css  menu.css  additional.css 37
  • 38. HTML Standards: Header & Menu <div id=“header”> <h1 id=“logo”> <a href=“#”> <span>XXXX</span> </a> </h1> </div> <div id=“menu”> <ul> <li> XXXXX <ul> <li>XXXX</li> <li>XXXX</li> </ul> </li> </ul> </div> 38
  • 39. HTML Standards: Basic <div id=“header”> </div> <div id=“menu”> </div> <div id=“content”> </div> <div id=“footer”> </div> 39
  • 40. HTML Standards: Content <div id=“content”> <div id=“leftcontent”> . . . . . </div> <div id=“rightcontent”> . . . . . </div> </div> 40
  • 41. HTML Standards: Left Content <div id=“leftcontent”> <h2> . . . </h2> <div class=“headsectionbig”> <h3> . . . </h3> </div> <div class=“contentsectionbig”> . . . </div> <div class=“headsectionbig”> . . . </div> <div class=“contentsectionbig”> . . . </div> </div> 41
  • 42. HTML Standards: Right Content <div id=“rightcontent”> <div id=“rightform”> <div class=“rightform”> . . . </div> <div class=“rightform”> . . . </div> </div> <div class=“headsectionsmall”> <h3> . . . </h3> </div> <div class=“contentsectionsmall”> . . . </div> </div> 42
  • 43. HTML Standards: Table <table class=“tablewithborder” width=“100%”> <tr> <th> . . . </th> <th> . . . </th> </tr> <tr> <td> . . . </td> <td> . . . </td> <td> . . . </td> </tr> <tr> <td> . . . </td> <td> . . . </td> <td> . . . </td> </tr> </div> 43
  • 44. HTML Standards: Form Layout <div class=“row”> <label></label> <div id=“rowwrap”> . . . </div> </div> <div class=“row”> <label></label> <div id=“rowwrap”> . . . </div> </div> 44
  • 45. HTML Standards: Form Layout <div class=“row”> <label></label> <div id=“rowwrap”> . . . </div> </div> <div class=“row”> <label></label> <div id=“rowwrap”> . . . </div> </div> 45
  • 47. Learning Resources  w3schools.com  css-tricks.com  cssplay.co.uk 47