css for development
DESCRIPTION
TRANSCRIPT
![Page 1: Css for Development](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7de5e4a79592a5d8b459d/html5/thumbnails/1.jpg)
![Page 2: Css for Development](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7de5e4a79592a5d8b459d/html5/thumbnails/2.jpg)
Herman 2003 - 2004 Hermes Telenet
Delphi Developer
2003 - 2004 Palm Mas AsriDatabase Admin
2005 - 2006 Bina Nusantara UniversityWeb Designer
2006 - 2007 LytoWeb Designer
2007 - 2009 E-Motion EntertainmentWeb Analyst & SEO Specialist
2007 - 2011 Bina Nusantara Group Electronic Media Specialist
![Page 3: Css for Development](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7de5e4a79592a5d8b459d/html5/thumbnails/3.jpg)
3
Agenda Refreshing: XHTML CSS Introduction Writing CSS Basic Styling Box Model Positioning CSS for Development Current Standards at BINUS
![Page 4: Css for Development](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7de5e4a79592a5d8b459d/html5/thumbnails/4.jpg)
4
Technical Issue XHTML CSS 2.1
Adobe Dreamweaver Komodo Activestate
![Page 5: Css for Development](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7de5e4a79592a5d8b459d/html5/thumbnails/5.jpg)
5
Refreshing: XHTML
![Page 6: Css for Development](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7de5e4a79592a5d8b459d/html5/thumbnails/6.jpg)
6
Displaying Text<h1> . . . </h1><h6> . . . </h6><p> . . . </p><strong> . </strong><em> . . . </em><br /><img src=“ . . . ” /><a href=“ . . . ” >your link</a>
![Page 7: Css for Development](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7de5e4a79592a5d8b459d/html5/thumbnails/7.jpg)
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>
![Page 8: Css for Development](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7de5e4a79592a5d8b459d/html5/thumbnails/8.jpg)
8
Displaying Table<table>
<tr><th> . . </th><th> . . </th>
</tr><tr>
<td> . . </td><td> . . </td>
</tr></table>
![Page 9: Css for Development](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7de5e4a79592a5d8b459d/html5/thumbnails/9.jpg)
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>
![Page 10: Css for Development](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7de5e4a79592a5d8b459d/html5/thumbnails/10.jpg)
10
CSS Introduction
![Page 11: Css for Development](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7de5e4a79592a5d8b459d/html5/thumbnails/11.jpg)
11
CaseChange the font color, please?
Modify the layout, please?
![Page 12: Css for Development](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7de5e4a79592a5d8b459d/html5/thumbnails/12.jpg)
12
CaseChange the font color, please?
Modify the layout, please?
Skinning without touching the HTML code, please?
I’m coding, change the design, please?
![Page 13: Css for Development](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7de5e4a79592a5d8b459d/html5/thumbnails/13.jpg)
13
Solution
CSS
HTML
![Page 14: Css for Development](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7de5e4a79592a5d8b459d/html5/thumbnails/14.jpg)
14
Why CSS?
Clean HTML Reduced file sizes
<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”>
![Page 15: Css for Development](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7de5e4a79592a5d8b459d/html5/thumbnails/15.jpg)
15
Why CSS?
Separated presentation and design layer Frameworks for different projects
![Page 16: Css for Development](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7de5e4a79592a5d8b459d/html5/thumbnails/16.jpg)
16
Why CSS?
Reduced development (and maintenance) costs Separated development
![Page 17: Css for Development](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7de5e4a79592a5d8b459d/html5/thumbnails/17.jpg)
Problem!
17
Internet Explorer, Safari, Firefox, Chrome, Opera
![Page 18: Css for Development](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7de5e4a79592a5d8b459d/html5/thumbnails/18.jpg)
18
Writing CSS
![Page 19: Css for Development](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7de5e4a79592a5d8b459d/html5/thumbnails/19.jpg)
19
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>
![Page 20: Css for Development](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7de5e4a79592a5d8b459d/html5/thumbnails/20.jpg)
20
CSS Standards.css-style{
color:red;}
margin-left : 20px;margin-top : 10px;margin-right : 15px;margin-bottom: 25px;margin: 20px 10px 15px 25px;
![Page 21: Css for Development](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7de5e4a79592a5d8b459d/html5/thumbnails/21.jpg)
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
![Page 22: Css for Development](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7de5e4a79592a5d8b459d/html5/thumbnails/22.jpg)
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>
![Page 23: Css for Development](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7de5e4a79592a5d8b459d/html5/thumbnails/23.jpg)
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>
![Page 24: Css for Development](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7de5e4a79592a5d8b459d/html5/thumbnails/24.jpg)
24
Another UseNested Style
p .red { … }.red p { … }
Pseudo
a:hover { … }input:focus { … }li:last-child { … }
![Page 25: Css for Development](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7de5e4a79592a5d8b459d/html5/thumbnails/25.jpg)
25
Basic Stylingfont-sizetext-decorationfont-stylefont-weightfont-familycolorbackground-colorborder
![Page 26: Css for Development](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7de5e4a79592a5d8b459d/html5/thumbnails/26.jpg)
26
CSS Box Model
marginpadding
![Page 27: Css for Development](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7de5e4a79592a5d8b459d/html5/thumbnails/27.jpg)
27
CSS For Position
float & clear
![Page 28: Css for Development](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7de5e4a79592a5d8b459d/html5/thumbnails/28.jpg)
28
Try This Out!
![Page 29: Css for Development](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7de5e4a79592a5d8b459d/html5/thumbnails/29.jpg)
29
CSS ForDevelopment
![Page 30: Css for Development](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7de5e4a79592a5d8b459d/html5/thumbnails/30.jpg)
30
CSS Framework Reset CSS Function CSS Layout CSS Additional 1 CSS Additional 2 CSS Additional N CSS
![Page 31: Css for Development](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7de5e4a79592a5d8b459d/html5/thumbnails/31.jpg)
31
CSS Framework Reset CSS Function CSS Layout CSS Additional 1 CSS Additional 2 CSS Additional N CSS
![Page 32: Css for Development](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7de5e4a79592a5d8b459d/html5/thumbnails/32.jpg)
32
Reset & Function CSS
Reset CSS Function CSS
Standarize style betweendifferent browsers
Most used style for different projects
body{ …}p{…}a{…}
.clearfloat{…}
.warningmessage{…}
.tableforstock{…}
![Page 33: Css for Development](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7de5e4a79592a5d8b459d/html5/thumbnails/33.jpg)
33
Layout & Additional CSS
Layout CSS Additional CSS
CSS for web layouting purposesAdditional CSS to support the layout
• Main layout• Layout for Homepage• Layout for Content Page
• Drop down menu layout• Homepage Feature
![Page 34: Css for Development](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7de5e4a79592a5d8b459d/html5/thumbnails/34.jpg)
34
CSS Layering: Method 1
Index.css basic.css
layout.css
reset.css
function.css
reset.css
function.css
![Page 35: Css for Development](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7de5e4a79592a5d8b459d/html5/thumbnails/35.jpg)
35
CSS Layering: Method 2
Index.css
basic.css
layout.css
![Page 36: Css for Development](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7de5e4a79592a5d8b459d/html5/thumbnails/36.jpg)
36
Current StandardsAt BINUS
![Page 37: Css for Development](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7de5e4a79592a5d8b459d/html5/thumbnails/37.jpg)
37
CSS Framework reset.css basicstyle.css framework.css menu.css additional.css
![Page 38: Css for Development](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7de5e4a79592a5d8b459d/html5/thumbnails/38.jpg)
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>
![Page 39: Css for Development](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7de5e4a79592a5d8b459d/html5/thumbnails/39.jpg)
39
HTML Standards: Basic<div id=“header”></div>
<div id=“menu”></div>
<div id=“content”></div>
<div id=“footer”></div>
![Page 40: Css for Development](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7de5e4a79592a5d8b459d/html5/thumbnails/40.jpg)
40
HTML Standards: Content
<div id=“content”><div id=“leftcontent”>
. . . . .</div><div id=“rightcontent”>
. . . . .</div>
</div>
![Page 41: Css for Development](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7de5e4a79592a5d8b459d/html5/thumbnails/41.jpg)
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>
![Page 42: Css for Development](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7de5e4a79592a5d8b459d/html5/thumbnails/42.jpg)
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>
![Page 43: Css for Development](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7de5e4a79592a5d8b459d/html5/thumbnails/43.jpg)
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>
![Page 44: Css for Development](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7de5e4a79592a5d8b459d/html5/thumbnails/44.jpg)
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>
![Page 45: Css for Development](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7de5e4a79592a5d8b459d/html5/thumbnails/45.jpg)
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>
![Page 46: Css for Development](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7de5e4a79592a5d8b459d/html5/thumbnails/46.jpg)
46
Learning Resources
![Page 47: Css for Development](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7de5e4a79592a5d8b459d/html5/thumbnails/47.jpg)
47
Learning Resources w3schools.com css-tricks.com cssplay.co.uk