2024: Domino Containers - The Next Step. News from the Domino Container commu...
Css for Development
1.
2. 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
3. Agenda
Refreshing: XHTML
CSS Introduction
Writing CSS
Basic Styling
Box Model
Positioning
CSS for Development
Current Standards at BINUS
3
12. 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
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
21
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>
22
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>
23
24. Another Use
Nested Style
p .red { … }
.red p { … }
Pseudo
a:hover { … }
input:focus { … }
li:last-child{ … }
24
32. 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
33. 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