SlideShare a Scribd company logo
1 of 47
Download to read offline
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
Writing CSS




              18
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
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
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
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
Try This Out!




                28
CSS For
Development



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




                       30
CSS Framework
   Reset CSS
   Function CSS
   Layout CSS
   Additional 1 CSS
   Additional 2 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>

<div class=“row”>
   <label></label>
   <div id=“rowwrap”>
       . . .
   </div>
</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
Learning
 Resources



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




                     47

More Related Content

What's hot (20)

SMACSS Workshop
SMACSS WorkshopSMACSS Workshop
SMACSS Workshop
 
CSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and moreCSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and more
 
CSS3 Introduction
CSS3 IntroductionCSS3 Introduction
CSS3 Introduction
 
CSS Introduction
CSS IntroductionCSS Introduction
CSS Introduction
 
TIBCO General Interface - CSS Guide
TIBCO General Interface - CSS GuideTIBCO General Interface - CSS Guide
TIBCO General Interface - CSS Guide
 
CSS3: Simply Responsive
CSS3: Simply ResponsiveCSS3: Simply Responsive
CSS3: Simply Responsive
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
 
Material design
Material designMaterial design
Material design
 
CSS3: Ripe and Ready to Respond
CSS3: Ripe and Ready to RespondCSS3: Ripe and Ready to Respond
CSS3: Ripe and Ready to Respond
 
Pfnp slides
Pfnp slidesPfnp slides
Pfnp slides
 
HTML and CSS Coding Standards
HTML and CSS Coding StandardsHTML and CSS Coding Standards
HTML and CSS Coding Standards
 
Html css
Html cssHtml css
Html css
 
CSS Overview
CSS OverviewCSS Overview
CSS Overview
 
Colors In CSS3
Colors In CSS3Colors In CSS3
Colors In CSS3
 
Ict 8 css
Ict 8 cssIct 8 css
Ict 8 css
 
CSS3 Media Queries
CSS3 Media QueriesCSS3 Media Queries
CSS3 Media Queries
 
HTML 5
HTML 5HTML 5
HTML 5
 
Css
CssCss
Css
 
Concept of CSS unit3
Concept of CSS unit3Concept of CSS unit3
Concept of CSS unit3
 
Css siva
Css sivaCss siva
Css siva
 

Similar to Css for Development

Advanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & EfficiencyAdvanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & EfficiencyDenise Jacobs
 
Intermediate Web Design
Intermediate Web DesignIntermediate Web Design
Intermediate Web Designmlincol2
 
Advanced CSS Troubleshooting
Advanced CSS TroubleshootingAdvanced CSS Troubleshooting
Advanced CSS TroubleshootingDenise Jacobs
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucksTim Wright
 
Intro to CSS Selectors in Drupal
Intro to CSS Selectors in DrupalIntro to CSS Selectors in Drupal
Intro to CSS Selectors in Drupalcgmonroe
 
Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS
Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSSObject-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS
Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSSLi-Wei Lu
 
Be nice to your designers
Be nice to your designersBe nice to your designers
Be nice to your designersPai-Cheng Tao
 
Highly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSSHighly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSSZoe Gillenwater
 
Future-proof styling in Drupal (8)
Future-proof styling in Drupal (8)Future-proof styling in Drupal (8)
Future-proof styling in Drupal (8)Hajas Tamás
 
Workflow Essentials for Web Development
Workflow Essentials for Web DevelopmentWorkflow Essentials for Web Development
Workflow Essentials for Web DevelopmentXavier Porter
 
An Introduction to CSS Frameworks
An Introduction to CSS FrameworksAn Introduction to CSS Frameworks
An Introduction to CSS FrameworksAdrian Westlake
 
Web design-workflow
Web design-workflowWeb design-workflow
Web design-workflowPeter Kaizer
 

Similar to Css for Development (20)

Advanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & EfficiencyAdvanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & Efficiency
 
Intermediate Web Design
Intermediate Web DesignIntermediate Web Design
Intermediate Web Design
 
Web
WebWeb
Web
 
Advanced CSS Troubleshooting
Advanced CSS TroubleshootingAdvanced CSS Troubleshooting
Advanced CSS Troubleshooting
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucks
 
Css
CssCss
Css
 
Intro to CSS Selectors in Drupal
Intro to CSS Selectors in DrupalIntro to CSS Selectors in Drupal
Intro to CSS Selectors in Drupal
 
6 css week12 2020 2021 for g10
6 css week12 2020 2021 for g106 css week12 2020 2021 for g10
6 css week12 2020 2021 for g10
 
Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS
Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSSObject-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS
Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS
 
Be nice to your designers
Be nice to your designersBe nice to your designers
Be nice to your designers
 
Highly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSSHighly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSS
 
Fewd week2 slides
Fewd week2 slidesFewd week2 slides
Fewd week2 slides
 
Future-proof styling in Drupal (8)
Future-proof styling in Drupal (8)Future-proof styling in Drupal (8)
Future-proof styling in Drupal (8)
 
HTML & CSS 2017
HTML & CSS 2017HTML & CSS 2017
HTML & CSS 2017
 
HowTo_CSS
HowTo_CSSHowTo_CSS
HowTo_CSS
 
HowTo_CSS
HowTo_CSSHowTo_CSS
HowTo_CSS
 
Workflow Essentials for Web Development
Workflow Essentials for Web DevelopmentWorkflow Essentials for Web Development
Workflow Essentials for Web Development
 
An Introduction to CSS Frameworks
An Introduction to CSS FrameworksAn Introduction to CSS Frameworks
An Introduction to CSS Frameworks
 
Web design-workflow
Web design-workflowWeb design-workflow
Web design-workflow
 
HTML News Packages Lesson
HTML News Packages LessonHTML News Packages Lesson
HTML News Packages Lesson
 

Recently uploaded

UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 

Recently uploaded (20)

UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 

Css for Development

  • 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
  • 4. Technical Issue  XHTML  CSS 2.1  Adobe Dreamweaver  Komodo Activestate 4
  • 6. Displaying Text <h1> . . . </h1> <h6> . . . </h6> <p> . . . </p> <strong> . </strong> <em> . . . </em> <br /> <img src=“ . . . ” /> <a href=“ . . . ” >your link</a> 6
  • 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> 7
  • 8. Displaying Table <table> <tr> <th> . . </th> <th> . . </th> </tr> <tr> <td> . . </td> <td> . . </td> </tr> </table> 8
  • 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> 9
  • 11. Case Change the font color, please? Modify the layout, please? 11
  • 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
  • 13. Solution CSS HTML 13
  • 14. 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
  • 15. Why CSS?  Separated presentation and design layer  Frameworks for different projects 15
  • 16. Why CSS?  Reduced development (and maintenance) costs  Separated development 16
  • 17. Problem! Internet Explorer, Safari, Firefox, Chrome, Opera 17
  • 19. 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
  • 20. CSS Standards .css-style{ color:red; } margin-left : 20px; margin-top : 10px; margin-right : 15px; margin-bottom: 25px; margin: 20px 10px 15px 25px; 20
  • 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
  • 26. CSS Box Model margin padding 26
  • 27. CSS For Position float & clear 27
  • 30. CSS Framework  Reset CSS  Function CSS  Layout CSS  Additional 1 CSS  Additional 2 CSS  Additional N CSS 30
  • 31. CSS Framework  Reset CSS  Function CSS  Layout CSS  Additional 1 CSS  Additional 2 CSS  Additional N CSS 31
  • 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
  • 34. CSS Layering: Method 1 reset.css function.css Index.css basic.css reset.css layout.css function.css 34
  • 35. CSS Layering: Method 2 basic.css Index.css layout.css 35
  • 37. CSS Framework  reset.css  basicstyle.css  framework.css  menu.css  additional.css 37
  • 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> 38
  • 39. HTML Standards: Basic <div id=“header”> </div> <div id=“menu”> </div> <div id=“content”> </div> <div id=“footer”> </div> 39
  • 40. HTML Standards: Content <div id=“content”> <div id=“leftcontent”> . . . . . </div> <div id=“rightcontent”> . . . . . </div> </div> 40
  • 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> 41
  • 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> 42
  • 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> 43
  • 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> 44
  • 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> 45
  • 47. Learning Resources  w3schools.com  css-tricks.com  cssplay.co.uk 47