css for development

47

Upload: tsengsite

Post on 28-Jan-2015

114 views

Category:

Technology


2 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Css for Development
Page 2: 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

Page 3: Css for Development

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

4

Technical Issue XHTML CSS 2.1

Adobe Dreamweaver Komodo Activestate

Page 5: Css for Development

5

Refreshing: XHTML

Page 6: Css for Development

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

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

8

Displaying Table<table>

<tr><th> . . </th><th> . . </th>

</tr><tr>

<td> . . </td><td> . . </td>

</tr></table>

Page 9: Css for Development

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

10

CSS Introduction

Page 11: Css for Development

11

CaseChange the font color, please?

Modify the layout, please?

Page 12: Css for Development

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

13

Solution

CSS

HTML

Page 14: Css for Development

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

15

Why CSS?

Separated presentation and design layer Frameworks for different projects

Page 16: Css for Development

16

Why CSS?

Reduced development (and maintenance) costs Separated development

Page 17: Css for Development

Problem!

17

Internet Explorer, Safari, Firefox, Chrome, Opera

Page 18: Css for Development

18

Writing CSS

Page 19: Css for Development

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

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

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

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

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

24

Another UseNested Style

p .red { … }.red p { … }

Pseudo

a:hover { … }input:focus { … }li:last-child { … }

Page 25: Css for Development

25

Basic Stylingfont-sizetext-decorationfont-stylefont-weightfont-familycolorbackground-colorborder

Page 26: Css for Development

26

CSS Box Model

marginpadding

Page 27: Css for Development

27

CSS For Position

float & clear

Page 28: Css for Development

28

Try This Out!

Page 29: Css for Development

29

CSS ForDevelopment

Page 30: Css for Development

30

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

Page 31: Css for Development

31

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

Page 32: Css for Development

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

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

34

CSS Layering: Method 1

Index.css basic.css

layout.css

reset.css

function.css

reset.css

function.css

Page 35: Css for Development

35

CSS Layering: Method 2

Index.css

basic.css

layout.css

Page 36: Css for Development

36

Current StandardsAt BINUS

Page 37: Css for Development

37

CSS Framework reset.css basicstyle.css framework.css menu.css additional.css

Page 38: Css for Development

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

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

40

HTML Standards: Content

<div id=“content”><div id=“leftcontent”>

. . . . .</div><div id=“rightcontent”>

. . . . .</div>

</div>

Page 41: Css for Development

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

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

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

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

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

46

Learning Resources

Page 47: Css for Development

47

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