Download - Css for Development
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
3
Agenda Refreshing: XHTML CSS Introduction Writing CSS Basic Styling Box Model Positioning CSS for Development Current Standards at BINUS
4
Technical Issue XHTML CSS 2.1
Adobe Dreamweaver Komodo Activestate
5
Refreshing: XHTML
6
Displaying Text<h1> . . . </h1><h6> . . . </h6><p> . . . </p><strong> . </strong><em> . . . </em><br /><img src=“ . . . ” /><a href=“ . . . ” >your link</a>
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>
8
Displaying Table<table>
<tr><th> . . </th><th> . . </th>
</tr><tr>
<td> . . </td><td> . . </td>
</tr></table>
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>
10
CSS Introduction
11
CaseChange the font color, please?
Modify the layout, please?
12
CaseChange the font color, please?
Modify the layout, please?
Skinning without touching the HTML code, please?
I’m coding, change the design, please?
13
Solution
CSS
HTML
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”>
15
Why CSS?
Separated presentation and design layer Frameworks for different projects
16
Why CSS?
Reduced development (and maintenance) costs Separated development
Problem!
17
Internet Explorer, Safari, Firefox, Chrome, Opera
18
Writing CSS
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>
20
CSS Standards.css-style{
color:red;}
margin-left : 20px;margin-top : 10px;margin-right : 15px;margin-bottom: 25px;margin: 20px 10px 15px 25px;
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
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>
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>
24
Another UseNested Style
p .red { … }.red p { … }
Pseudo
a:hover { … }input:focus { … }li:last-child { … }
25
Basic Stylingfont-sizetext-decorationfont-stylefont-weightfont-familycolorbackground-colorborder
26
CSS Box Model
marginpadding
27
CSS For Position
float & clear
28
Try This Out!
29
CSS ForDevelopment
30
CSS Framework Reset CSS Function CSS Layout CSS Additional 1 CSS Additional 2 CSS Additional N CSS
31
CSS Framework Reset CSS Function CSS Layout CSS Additional 1 CSS Additional 2 CSS Additional N CSS
32
Reset & Function CSS
Reset CSS Function CSS
Standarize style betweendifferent browsers
Most used style for different projects
body{ …}p{…}a{…}
.clearfloat{…}
.warningmessage{…}
.tableforstock{…}
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
34
CSS Layering: Method 1
Index.css basic.css
layout.css
reset.css
function.css
reset.css
function.css
35
CSS Layering: Method 2
Index.css
basic.css
layout.css
36
Current StandardsAt BINUS
37
CSS Framework reset.css basicstyle.css framework.css menu.css additional.css
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>
39
HTML Standards: Basic<div id=“header”></div>
<div id=“menu”></div>
<div id=“content”></div>
<div id=“footer”></div>
40
HTML Standards: Content
<div id=“content”><div id=“leftcontent”>
. . . . .</div><div id=“rightcontent”>
. . . . .</div>
</div>
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>
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>
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>
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
HTML Standards: Form Layout
<div class=“row”><label></label><div id=“rowwrap”>
. . .</div>
</div>
<div class=“row”><label></label><div id=“rowwrap”>
. . .</div>
</div>
46
Learning Resources
47
Learning Resources w3schools.com css-tricks.com cssplay.co.uk