Css for Development

2,222 views
1,862 views

Published on

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,222
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
49
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Css for Development

  1. 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
  2. Agenda Refreshing: XHTML CSS Introduction Writing CSS Basic Styling Box Model Positioning CSS for Development Current Standards at BINUS 3
  3. Technical Issue XHTML CSS 2.1 Adobe Dreamweaver Komodo Activestate 4
  4. Refreshing: XHTML 5
  5. Displaying Text<h1> . . . </h1><h6> . . . </h6><p> . . . </p><strong> . </strong><em> . . . </em><br /><img src=“ . . . ” /><a href=“ . . . ” >your link</a> 6
  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
  7. Displaying Table<table> <tr> <th> . . </th> <th> . . </th> </tr> <tr> <td> . . </td> <td> . . </td> </tr></table> 8
  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
  9. CSS Introduction 10
  10. CaseChange the font color, please?Modify the layout, please? 11
  11. CaseChange the font color, please?Modify the layout, please?Skinning without touching the HTML code, please?I’m coding, change the design, please? 12
  12. Solution CSS HTML 13
  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
  14. Why CSS? Separated presentation and design layer Frameworks for different projects 15
  15. Why CSS? Reduced development (and maintenance) costs Separated development 16
  16. Problem!Internet Explorer, Safari, Firefox, Chrome, Opera 17
  17. Writing CSS 18
  18. Applying CSSExternal 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
  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
  20. Writing CSS: Styling aTagWriting on stylesheetbody{ background:green; }How to use it<body>Hello World!</body>How to this tag style when Applying default style to a tag 21
  21. Writing CSS: Styling aClassWriting 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
  22. Writing CSS: Styling anIDWriting 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
  23. Another UseNested Stylep .red { … }.red p { … }Pseudoa:hover { … }input:focus { … }li:last-child{ … } 24
  24. Basic Stylingfont-sizetext-decorationfont-stylefont-weightfont-familycolorbackground-colorborder 25
  25. CSS Box Model margin padding 26
  26. CSS For Position float & clear 27
  27. Try This Out! 28
  28. CSS ForDevelopment 29
  29. CSS Framework Reset CSS Function CSS Layout CSS Additional 1 CSS Additional 2 CSS Additional N CSS 30
  30. CSS Framework Reset CSS Function CSS Layout CSS Additional 1 CSS Additional 2 CSS Additional N CSS 31
  31. Reset & Function CSSReset CSS Function CSSStandarize style between Most used style for differentdifferent browsers projects .clearfloat{…}body{ …} .warningmessage{…}p{…} .tableforstock{…}a{…} 32
  32. Layout & AdditionalCSSLayout CSS Additional CSS Additional CSS to support theCSS for web layouting purposes layout• Main layout • Drop down menu layout• Layout for Homepage • Homepage Feature• Layout for Content Page 33
  33. CSS Layering: Method 1 reset.css function.cssIndex.css basic.css reset.css layout.css function.css 34
  34. CSS Layering: Method 2 basic.css Index.css layout.css 35
  35. Current StandardsAt BINUS 36
  36. CSS Framework reset.css basicstyle.css framework.css menu.css additional.css 37
  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
  38. HTML Standards: Basic<div id=“header”></div><div id=“menu”></div><div id=“content”></div><div id=“footer”></div> 39
  39. HTML Standards:Content<div id=“content”> <div id=“leftcontent”> . . . . . </div> <div id=“rightcontent”> . . . . . </div></div> 40
  40. HTML Standards: LeftContent<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
  41. HTML Standards: RightContent<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
  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
  43. HTML Standards: FormLayout<div class=“row”> <label></label> <div id=“rowwrap”> . . . </div></div><div class=“row”> <label></label> <div id=“rowwrap”> . . . </div></div> 44
  44. HTML Standards: FormLayout<div class=“row”> <label></label> <div id=“rowwrap”> . . . </div></div><div class=“row”> <label></label> <div id=“rowwrap”> . . . </div></div> 45
  45. Learning Resources 46
  46. Learning Resources w3schools.com css-tricks.com cssplay.co.uk 47

×