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

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
.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
#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

CSS For
Development

29

CSS Framework
 Reset CSS
 Function CSS
 Layout CSS
 Additional 1 CSS
 Additional N CSS

30

CSS Framework
 Reset CSS
 Function CSS
 Layout 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>

<label></label>
. . .
</div>
</div>

44

HTML Standards: Form
Layout
<label></label>
. . .
</div>
</div>

<label></label>
. . .
</div>
</div>

45

Learning
Resources

46

Learning Resources
 w3schools.com
 css-tricks.com
 cssplay.co.uk

47

Css for Development

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Css for Development

Similar to Css for Development (20)

Recently uploaded

Recently uploaded (20)

Css for Development