Docstoc

Introduction to HTML

Document Sample
Introduction to HTML Powered By Docstoc
					                               CSS Basics




CS2240 - Fundamentals of IAD        CSS Basics   1
Contents

• Understanding CSS
• Making Professional Format for the Online
  Banking Application
     – Font Properties
     – Text Properties
     – Color & Background Properties
• Making Professional Looking Layouts for the
  Online Banking Application
     – Box Properties
• Validating Your CSS Page

CS2240 - Fundamentals of IAD   CSS Basics       2
                           Understanding CSS

  Cascading Style Sheets (CSS)
  Why use CSS?
  Versions of CSS
  How does CSS work?
  Origins of CSS
  Basic Syntax of a CSS Rule
  Where to put CSS rules?
  Inheritance of Styles
  Cascade-Order
  Style Sheet Strategies



CS2240 - Fundamentals of IAD        CSS Basics   3
Cascading Style Sheets (CSS)

• It controls the appearance of the content on HTML
  pages.
• It is not HTML. It is a separate code that enhances the
  abilities of HTML by allowing authors to redefine the
  way that existing tags display their content.

  Styles applied                  HTML tag                                   Document

Verdana, Arial
green                            <h1> … </h1>

24 pixels



CS2240 - Fundamentals of IAD                                CSS Basics                                                            4
                   Teague, J. C. (2007). CSS, DHTML & AJAX, 4th edition: Visual QuickStart Guide. Berkely: Peachpit Press. P. 6
Why use CSS?




                   HTML                                   CSS
                               Source : www.amazon.com

CS2240 - Fundamentals of IAD                 CSS Basics         5
Why use CSS?
•   It separates structure from appearance.
•   It creates consistent appearance.
•   It is ease of maintenance.
•   It increases accessibility.
•   It applies additional effects:-
     –   Add hover effect to links
     –   Remove underlines on links
     –   Add horizontal rule to headings
     –   Use for layout, instead of a table
     –   Control paragraph, line, and letter spacing



CS2240 - Fundamentals of IAD          CSS Basics       6
Versions of CSS
• CSS Level 1 (CSS1), 1996
     –   It concerned with applying simple styles to HTML elements, such as format
         text, set fonts, and set margins.
     –   http://www.w3.org/TR/CSS1
• CSS Level 2 (CSS2), 1998
     –   It put emphasis on the capability to specify media-specific CSS, such as visual
         browsers, aural devices, printers, Braille devices.
     –   http://www.w3.org/TR/REC-CSS2/
• CSS Level 2 Revision 1 (CSS 2.1), 2006
     –   It is derived from and is intended to replace CSS2.
     –   It incorporates all published CSS2 errata, removes CSS2 features which have
         been rejected by the CSS community, and adds a small amount of new
         property values.
     –   http://www.w3.org/TR/CSS21/
• CSS Level 3 (CSS3), 2000
     –   It is still under development.
     –   It focuses on various topics, or modules, including columns, web fonts, color
         profiles, user interface, and behaviors.
     –   http://www.w3.org/Style/CSS/current-work

CS2240 - Fundamentals of IAD                  CSS Basics                                   7
How does CSS work?
• When a visitor loads one of your web pages, the server sends the
  HTML file to the visitor’s computer along with any files linked to or
  embedded in the HTML file, such as images.
• The CSS code can be either embedded directly in the HTML file or
  linked to it.
• The visitor’s browser will interpret this code by using its particular
  rendering engine to apply the CSS to the HTML, and then display
  the page in the browser window.

    <HTML>                         Interpretation



                                         Render



    {CSS}
CS2240 - Fundamentals of IAD
                                   Interpretation Basics
                                                CSS                                                                           8
                        Teague, J. C. (2007). CSS, DHTML & AJAX, 4th edition: Visual QuickStart Guide. Berkely: Peachpit Press. P. 7
                               Origins of CSS

  User Agent Style
  User Style
  Author Style




CS2240 - Fundamentals of IAD          CSS Basics   9
Origins of CSS
• User Agent Style
     – It is the default CSS inside the browser a visitor is using.
Browsers               Default Browser Styling
IE/Win                 In a DLL file
Opera                  C:\Program Files\Opera\styles\user\
Mozilla                C:\Program Files\Mozilla Firefox\res\html.css


     – The visitor (the browser user) can customize font and color
       preferences.
Browsers               Default Browser Styling
IE/Win                 Tools  Internet Options  ‘General’ Tag  Colors / Fonts
Opera                  Tools  Preferences  ‘Web pages’ Tag
Mozilla                Tools  Options  ‘Content’ Tag  Fonts & Colours
CS2240 - Fundamentals of IAD                 CSS Basics                            10
Origins of CSS
•     User Agent Style - Demonstration
     –    Familiar with the browser default setting
          1.   Launch a IE Browser
          2.   Go to Google Search, www.google.com
          3.   Move your mouse to the link ‘Language Tools’
          4.   Find that the font color is blue (or change to red)
     –    Change the browser styling setting
          1. In the toolbar, Tools  Internet Options  ‘General’ Tag
          2. At the bottom of the Internet Options page, click the
             button ‘Colors’
                                                                        a
          3. In the Colors window
                a.   Check the checkbox ‘Use hover color’                        b
                b.   Uncheck the checkbox ‘Use Windows Colors’
                c.   Change the ‘Hover’ color from RED to GREEN
                d.   Click the button OK to save your settings
          4. Click the button OK to exit the Internet Options Page               c
          5. Move your mouse to the link ‘Language Tools’ again
          6. Find that the font color is changed to green.
CS2240 - Fundamentals of IAD                    CSS Basics                  11
Origins of CSS

• User Agent Style - Demonstration

                                   Original Hover Color: Red




 New - Fundamentals of IAD
CS2240 Hover Color: Green    CSS Basics                        12
Origins of CSS
• User Style
     –    It is created to fulfill visitor’s own needs.
Browsers               Specifying User Style Sheets
IE/Win                 Tools  Internet Options  Accessibility
Opera                  View  Style  Manage modes …
Mozilla                Save the User CSS as ‘userContent.css’ in the directory
                       C:\Program Files\Mozilla Firefox\defaults\profile\chrome\




CS2240 - Fundamentals of IAD                 CSS Basics                            13
                                                                    visitor.css
Origins of CSS
• User Style - Demonstration (Use visitor-defined
  style)
     1. Download a style sheet from
        http://www.cs.cityu.edu.hk/~cssamk/cs4281-
        3/Lec2/examples/styles/visitor.css and save it in
        the local directory c:\temp
     2. In the toolbar, Tools  Internet Options 
        ‘General’ Tag
     3. At the bottom of the Internet Options page, click
        the button ‘Accessibility’
     4. In the Accessibility window
          a. Check the checkbox ‘Format documents using my
             style sheet’
          b. In the textbox ‘Style sheet:’, locate your own style
             sheet’. For our example, it should be
             c:\temp\visitor.css.
          c. Click the button OK to save your settings
     5. Click the button OK to exit the Internet Options
        Page
CS2240 - Fundamentals of IAD                 CSS Basics                           14
 Origins of CSS
 • User Style - Demonstration
                                    The font color of links is changed
                                    (from blue to orange).
Original (Google)


                                  User Styling (Google)




 CS2240 - Fundamentals of IAD   CSS Basics                          15
Origins of CSS
                                             The background color, and font
                                             size and type are changed.
• User Style - Demonstration
                     Original (HSBC Web Page)

                                          User Styling (HSBC Web Page)




CS2240 - Fundamentals of IAD         CSS Basics                         16
Origins of CSS
• Author Style
     – It is designed by the web page designer / developer, to fit the site
       you are currently visiting.
Browsers               Ways to Switch Style Sheets
IE/Win                 Tools  Internet Options  Accessibility
Opera                  View  Style
Mozilla                View  Page Style

• Author Style - Demonstration (Back to Author or Browser Style)
     1. At the bottom of the Internet Options page, click the button
        ‘Accessibility’
     2. In the Accessibility window
           a. Uncheck the checkbox ‘Format documents using my style sheet’
           b. Click the button OK to save your settings
     3. Click the button OK to exit the Internet Options Page

CS2240 - Fundamentals of IAD                 CSS Basics                       17
                Basic Syntax of a CSS Rule

  Basic Selector
     (type, class, id, group)
  Contextual Selector
     (descendant, child, adjacent sibling, universal)
  Advanced Selector
     (attribute, pseudo-classes)

CS2240 - Fundamentals of IAD   CSS Basics               18
Basic Syntax of a CSS Rule
• A CSS rule specifics the HTML to which a style definition applies,
  and then defines the style.

                               Selector Property: Value

                                  h1 { color: red; }

• Selector
     – It starts each rule, appearing before the left curly brace.
• Declaration
     – It is surrounded by curly braces.
     – It is made up of a pair of property (to identify the style that is being
       defined) and value (to define its nature).


CS2240 - Fundamentals of IAD                CSS Basics                            19
Basic Syntax of a CSS Rule:
Basic Selectors
• Type Selector
    –   A type selector is used to match the name of a document language element
        type.
                                                           element_Type { … }
• Class Selector
    –   A class is a “free agent” that can be applied to any HTML tag.
    –   A class selector is used to match any element with a matching class attribute.

                         .class_name { … } or element_type.class_name { … }
• ID Selector
    –   An ID is unique to one element in an HTML/XHTML document.
    –   An ID selector is used to match an element with a matching ID attribute.

                                                   #id {… }   or element_type#id {… }
• Group Selector
    –   A group selector incorporates one or more selector types.
    –   It is used to define the same declarations to a list of selectors.
                                             CSS Basics
CS2240 - Fundamentals of IAD element_type1, element_type2, .class_name1, #id { … } 20
                                                 Document Tree
                                                      <h1>
                                                      <h2>




                                                ID: pageContent


                                       ID: billPayment

                                    Class: subHeader



                                            ID: autopay

                                    Class: subHeader



CS2240 - Fundamentals of IAD   CSS Basics                         21
                                                     1_BasicSelector.html
                                            HTML Selector:
                                            h1 { color: #CCFF99;}

                                            Name of desired element




                                             Class Selector:
                                             .subHeader {color: #3366CC; }

                                               Class




CS2240 - Fundamentals of IAD   CSS Basics                               22
                                                      1_BasicSelector.html




                                            ID Selector:
                                            #pageContent {color: #003366;}

                                              ID


                               Group Selector:
                               h2, #billPayment, #autopay {color: #FF6600; }

                                A list of selectors




CS2240 - Fundamentals of IAD   CSS Basics                              23
       Basic Syntax of a CSS Rule:
       Contextual Selectors
       • Elemental Relationships
               –    Parent: The parent element is an element directly above another in the
                    document tree.
               –    Child: The child element is an element directly below another element within
                    the document tree.
               –    Descendant: A descendant element is a child, grandchild, great-grandchild or
                    further descendent down the line.
               –    Ancestor: An ancestor element is a parent, grandparent, great-grandparent, or
                    higher within the tree.
               –    Sibling – Elements that immediate follow and share the same parent as another
                    selector.
     Document Tree                              html                                  Parent

                                                                                      Child
                                                body                                  Parent

                       h1                         h2                 div              Children
                                                                                      Siblings
                                                                                      Descendants
                                                               h3                 p
                                                                                      of <body>
       CS2240 - Fundamentals of IAD                                  CSS Basics                  24
Albany, NY. (2005). Cascading Stylesheets and Your. Available from
http://www.nysforum.org/documents/html/css-9-21-05/css-set2.html                  a    Ancestors of <a>
                                                 Document Tree

                                     <html>                   Parent
                                            <head>       Child of <html>
                                            </head>
                                            <body>       Child of <html>




                                             </body>
CS2240 - Fundamentals of IAD   CSS Basics                           25
                                   </html>
                                                Document Tree

                                     <html>
                                            <body>               Parent
                                     ID: mainContainer          Child of
                                                                <body>




                                             </body>
CS2240 - Fundamentals of IAD   CSS Basics                            26
                                   </html>
                                            Document Tree

                               <html>
                                  <body>

                               ID: mainContainer                Parent
                                               ID: header
                                            ID: information

                                            ID: pageContent


                                                                Children
                                                                   of
                                                              mainContainer




                                               ID: footer
CS2240 - Fundamentals of IAD   CSS Basics                            27
                                          Document Tree

                               <body>
                               ID: mainContainer
                                        ID: header
                                                           Children
                                   <h1>                       of
                                   <h2>                     header

                                         ID: information
                                   <p>
                                                            Children
                                  <img>                         of
                                                           information
                                   <a>




                                            ID: footer
                                   <p>                     Children
                                                              of
CS2240 - Fundamentals of IAD   CSS <img>
                                   Basics                        28
                                                            footer
                                          Document Tree

                               <body>
                               ID: mainContainer
                                        ID: header
                                   <h1>
                                   <h2>

                                         ID: information
                                   <p>
                                  <img>
                                   <a>                      Descendants
                                                                 of
                                                           mainContainer,
                                                         <body> and <html>




                                            ID: footer
                                   <p>

CS2240 - Fundamentals of IAD   CSS <img>
                                   Basics                              29
                                            Document Tree

                               <body>
                               ID: mainContainer



                                            ID: pageContent
                                   <h3>
                                    <p>
                                    <p>
                                            <a>
                                                               Children
                                   <h4>                           of
                                                              pageContent
                                    <p>

                                    <p>
                                   <h4>
                                    <p>
                                    <p>

CS2240 - Fundamentals of IAD   CSS Basics                           30
                                            Document Tree

                               <body>
                               ID: mainContainer


                                            ID: pageContent
                                   <h3>
                                    <p>
                                    <p>
                                            <a>                Descendants
                                                                    of
                                   <h4>                       mainContainer,
                                                                 <body>,
                                    <p>
                                                                and <html>
                                    <p>
                                   <h4>
                                    <p>
                                    <p>

CS2240 - Fundamentals of IAD   CSS Basics                             31
                                            Document Tree

                               <body>                          Ancestors
                                                                  of
                               ID: mainContainer              <h3>, <h4>,
                                                              <p> and <a>

                                            ID: pageContent
                                   <h3>
                                    <p>
                                    <p>
                                            <a>

                                   <h4>
                                    <p>

                                    <p>
                                   <h4>
                                    <p>
                                    <p>

CS2240 - Fundamentals of IAD   CSS Basics                              32
                                            Document Tree

                               <body>
                                                              They are adjacent
                               ID: mainContainer               siblings to <h4>


                                            ID: pageContent
                                   <h3>
                                    <p>
                                    <p>
                                            <a>

                                   <h4>
                                    <p>

                                    <p>
                                   <h4>
                                    <p>
                                    <p>


CS2240 - Fundamentals of IAD   CSS Basics                                 33
Basic Syntax of a CSS Rule:
Contextual Selectors
• Descendant Selector
     –   A descendant selector is used to match an element that is a descendant of a
         defined ancestor element.
                                              Parent_element descendant { … }
• Child Selector
     –   A child selector is used to match an element that is a child of a defined parent
         element.
                                           Parent_element > child_element { … }
• Adjacent Sibling Selector
     –   An adjacent sibling selector is used to match an element that appears
         immediately after another tag.
                                                 element A + element B { … }
• Universal Selector
     –   The universal selector (represented by an asterisk “*”) is used to match any
         element.
                                                              *{…}
CS2240 - Fundamentals of IAD                 CSS Basics                                 34
                                              1_ContextualSelector.html



                                  Descendant Selector:
                                  #mainContainer a {
                                     background-color: #CCFF00;}


                                  Descendant Selector:
                                  #mainContainer #pageContent {
                                     color: #999999;}




CS2240 - Fundamentals of IAD   CSS Basics                          35
                                                1_ContextualSelector.html




                                  Child Selector:
                                  #pageContent > p {
                                      font-size: 0.75em; }




                                  Child Selector:
                                  #footer > p {
CS2240 - Fundamentals of IAD   CSS Basics
                                       font-size: 0.6em; }         36
                                                1_ContextualSelector.html

                                    Universal Selector:
                                    *{
                                        text-transform: uppercase; }




                                     Adjacent Sibling Selector:
                                     h4 + p {
                                         color: #FF6600;}




CS2240 - Fundamentals of IAD   CSS Basics                              37
Basic Syntax of a CSS Rule:
Advanced Selectors
• Attribute Selector
     – An attribute selector is used to match an element based on an
       attribute or an attribute value.
              Element [attribute] { … } or Element [attribute = value] { …}
• Pseudo-Classes
     – A pseudo-class is a predefined state or use of an element that can be
       styled independently of the default state of the element.
      Pseudo-Class      Description
      :active           Element being clicked
      :first-child      Element that is the first child of another element
      :focus            Element that has screen focus
      :hover            Element with mouse cursor over it
      :lang()           Element with language code defined
      :link             Element that has not been visited
CS2240:visited           Element that has been visited
       - Fundamentals of IAD                 CSS Basics                                                                    38
                       Teague, J. C. (2007). CSS, DHTML & AJAX, 4th edition: Visual QuickStart Guide. Berkely: Peachpit Press. P.56
                                                   Document Tree



                                                   ID: information


                                            <a>

                                                  ID: pageContent

                                            <a>
                                       <h4 id= billPayment>




                                            <h4 id= autopay>




CS2240 - Fundamentals of IAD   CSS Basics                            39
                                                1_AdvancedSelector.html




                                  Attribute Selector:
                                  H4[id] {
                                       text-transform: uppercase;}

                                  Attribute Selector:
                                  H4[id=‘billPayment’] {
                                       color: #0033FF; }


                                  Attribute Selector:
                                  H4[id=‘autopay’] {
                                       color: #339900; }


CS2240 - Fundamentals of IAD   CSS Basics                            40
                                               1_AdvancedSelector.html


                                  HTML Selector:
                                  a{
                                     text-decoration: none;
                                     color: #3366CC;
                                     background-color: inherit;
                                     border-bottom: 2px solid #FFFFFF; }

                                  Pseudo-Class Selector:
                                  #pageContent a:hover {
                                     color: #FF6600;
                                     background-color: #DDEEFF;
                                     border-bottom: 2px solid #C0DFFD; }

                                  #pageContent a:visited {
                                     color: #999999; }




CS2240 - Fundamentals of IAD   CSS Basics                             41
                    Where to put CSS rules?

  Inline Style
  Embedded Style
  External / Linked Style
  Import Style




CS2240 - Fundamentals of IAD    CSS Basics    42
  Where to put CSS rules?
  • Inline Style
       – It adds style information to
         an individual element in an
         HTML document using the
         style attribute.
       – Advantages
            • Useful for diagnostics
            • Good for laziness
       – Disadvantages
            • Decrease accessibility
            • Increase file size
            • Difficult to update



< html_tag style=“property: value” />
  CS2240 - Fundamentals of IAD          CSS Basics   43
                                                                     2_InlineCSS.html
     Where to put CSS rules?
13      <!-- Page Header -->
14          <h1 style="color:#CCFF99; font-size:1.5em;">ABC Banking Corporation
        Limited</h1>
        …                             Use a <div> tag to break up a page into divisions
21      <!-- Page Content -->            and apply styles to an entire chunk at once

22          <div style="color: #003366; font-size:.8em;">
23          <h3>Payments</h3>
        …
29          <h4 id="billPayment">Bill Payment</h4>
30         <p>It allows you to make online bill payments to over 200 merchants in Hong Kong.
        </p>
31          <p ><span style="color: #3366CC; font-size:.8em; text-transform:uppercase;”>
        Feature:</span> <br/> (1) Review, pay and organize your bills 24-hour a day <br /> …
        </p>
                             Use <span> to name smaller chunks of text or other
        …
                                inline elements in order to apply styles to them
36          </div>
     CS2240 - Fundamentals of IAD              CSS Basics                                 44
    Where to put CSS rules?
    • Embedded Style
         – It puts rules in the <head>
           section.
         – It uses the <style> tag to
           enclose the rules.
         – It uses to define rules for an
           entire web page.

Style tag   Style type       Media type   CSS
                                          Rule

  <style type="text/css“ media=“all”>
  <!--
  selector { property: value }
  -->
  </style>
    CS2240 - Fundamentals of IAD             CSS Basics   45
                                                               3_EmbeddedCSS.html
     Where to put CSS rules?
4    <head>
     …
9         <title> ABC Banking Corporation Limited </title>
10        <style type=“text/css” media=“all”>
11        <!--
                                                Apply the style sheet to the page,
12       /* Global Styles */                    regardless of the type of
13       h1 { color:#CCFF99; font-size:1.5em; } machine used to out put it (such
14                                              as print, and screen).
15       /* Class Styles */
16       .subHeader {color: #3366CC; font-size:.8em; text-transform:uppercase; }
17
18       /* ID Styles */
19       #pageContent {color: #003366; font-size:0.75em; }
20       -->
21       </style>
     CS2240 - Fundamentals of IAD                CSS Basics                          46
22   </head>
                                                                      core.css
Where to put CSS rules?                                               form.css
                                                                 onlineBanking.css
                                                                   payment.html
                                                                  contactUs.html
• External / Linked Style
     – Rules go in a separate file, which can be used with any number
       of HTML files.
     – The rules go in a file with a .css extension.
     – A link to the file goes in the <head> section.
     – Advantages
           • Ease of maintenance
           • Use less disk space
           • Increase accessibility                                payment.html


               @import
core.css                       onlineBanking.css        <link>


               @import
form.css                                                          contactUs.html

CS2240 - Fundamentals of IAD               CSS Basics                              47
Where to put CSS rules?
• Linking to a Style Sheet
     – External style sheet files can be used with any (X)HTML file through
       the <link> tag.
     – It affects the document in the same way as embedded style rules in
       the head of the document.
• Importing a Style Sheet
     – It uses the @import rule to
          • Bring external style sheets into a document.
          • Import one external CSS file into another.

                                        Style tag
<link                          Link tag
                                                           <style type=“text/css”
  rel=“stylesheet”             Link relationship
                                                             media=“all”>
  href=“xxx.css”               URL for linked file           @import url (“xxx.css”);
  type=“text/css”              Type of linked file         </style>
  media=“all” />               Media type

CS2240 - Fundamentals of IAD                  CSS Basics                          48
     Where to put CSS rules?                                        4_ExternalCSS.html
                                                                      4_External.css
4_ExternalCSS.html
9                <title> ABC Banking Corporation Limited </title>
10           <link rel=“stylesheet” href=“../styles/4_External.css” type=“text/css”
     media="all" />
11        </head>

4_External.css
1       /* Global Styles */
2       h1 {
3              color:#CCFF99;
4              font-sizse:1.5em; }
5
6       /* Class Styles */
7      .subHeader {
8              color: #3366CC;
9              font-size:.8em;
     CS2240 - Fundamentals of IAD                 CSS Basics                       49
10             text-transform:uppercase; }
                        Inheritance of Styles

  Parent, child and descendant
  Some properties don’t have inheritance
  Property values to override inheritance
  !important
  Cascade order
  How to determine the order?
      specificity of selector
      specified order of CSS rules

CS2240 - Fundamentals of IAD        CSS Basics   50
 Inheritance of Styles
 • Inheritance means that subordinate elements inherit properties
   from their parent element.
                     CSS
                     body { color: blue; }
applied styles       #pageContent { font-size: 1em; }
(inherent styles)    h3 { text-transform: uppercase; }      Inherited styles
  blue              Parent       <body>
  1em               Child          <div id=“pageContent”>    blue

  uppercase         Descendant        <h3>                   blue + 1em
                                           Payment           blue + 1em + uppercase
                                      </h3>

                                    </div>

                                 </body>
 CS2240 - Fundamentals of IAD                 CSS Basics                         51
                                            Document Tree

                               <body>
                               ID: mainContainer              Parent
                               ID: header
                               ID: information

                               ID: pageContent                Child

                                    <h3>                    Descendant




                               ID: footer
CS2240 - Fundamentals of IAD   CSS Basics                              52
                                                      5_InheritingProperties.html
Inheritance of Styles

CSS
#mainContainer {color: blue; }
#pageContent {letter-spacing: 0.2em; }
h3 { text-transform: uppercase; }




CS2240 - Fundamentals of IAD             CSS Basics                         53
   Inheritance of Styles
   • Inheritance reduces redundancy of author effort and storage
     space because a CSS rule only needs to be declared once for
     multiple nodes of a document tree.
   • Not all CSS properties are inherited from its parent – obvious
     properties, such as margins, width, and borders.
     http://www.w3.org/TR/CSS21/propidx.html
   • Four CSS properties are introduced to override inheritance.
CSS Property      Description
inherit           It forces a property that would normally not be inherited to be
                  inherited.
none              It forces a border, image, or other visual elements not to appear.
normal            It forces no style to be applied.
auto              It allows the browser to determine how the element should be
                  displayed based on content.
   CS2240 - Fundamentals of IAD              CSS Basics                             54
                                                    5_withoutImportant.html
!important Rules                                     5_withImportant.html


• A keyword !important can be put after the property-value declaration.
• It gives the declaration the maximum weight when determining the
  cascade order (it will be discussed later).
• NOTE: The browser will ignore the declaration, and possibly the whole
  rule, if the keyword !important is located right after the semicolon.


                                       <body>
                                        ID: mainContainer
                                       ID: header
                                       ID: information

                                       ID: pageContent

                                         <h3 class=“payment”>



CS2240 - Fundamentals of IAD         CSS Basics                           55
   CSS 1                                CSS 2 – With !important
   h3 {                                 h3 {
       text-transform: uppercase;           text-transform: uppercase;
       color: red;}                         color: red !important;}
   h3.payment {                         h3.payment {
       color:green; }                       color:green; }




CS2240 - Fundamentals of IAD        CSS Basics                           56
Cascade-Order
• It refers to the way styles begin at the top of the page, and as they
  cascade down, collect and replace each other as they are
  inherited.
       The relevant importance of where particular rules
      come from where determining their cascade order

lowest                                                                         highest

Origin        User Agent /Browser                                              User / Reader / Author

Method        Linked / Imported                      Embedded                  Inline

Selector      HTML                                   Class                     ID


highest      NOTE: In theory, an author’s style sheets override a user’s style
             sheet. of IAD
CS2240 - Fundamentals However, most browsers favor a user’s style sheets.
                                        CSS Basics                          57
                   Teague, J. C. (2007). CSS, DHTML & AJAX, 4th edition: Visual QuickStart Guide. Berkely: Peachpit Press. P.84
Cascade-Order

• How to determine the cascade-order value of an
  element?

          STEP 1                STEP 2           STEP 3       STEP 4

        Collect all            Sort by         Sort by the   Sort by
        rules that             origin, and     specificity   order
        will be                importance      of selector   specified.
        applied to
        the
        element


             The general rule of thumb is that the last
             style defined in order is the one that is used.
CS2240 - Fundamentals of IAD                 CSS Basics                   58
Cascade-Order:
Specificity of Selectors
• Determine the specificity of a selector
     – HTML selectors
     – Class selectors
     – ID selectors
                               <body>
                               ID: mainContainer
                                   Class: header
                                  <h1 id=“logo”>
                                        <h2>




CS2240 - Fundamentals of IAD   CSS Basics          59
Cascade-Order:                                            5_CascadeOrderSelector.html

Specificity of Selectors
• Determine the specificity of a selector
Selector   CSS Rules
HTML       body {
             color: #336699;
             color: #336699;
              background-color: #DDEEFF;
             background-color: #DDEEFF;
              font-size: 1em;
              font-size: 1em;
             text-transform: uppercase; }
Class      . header {

              font-size: 1.2em;
              font-size: 1.2em;
              color: #CCFF99;
              background-color: #3366CC; }
ID         #logo {
              font-size: 2em;
              letter-spacing: .2em;}
CS2240 - Fundamentals of IAD                 CSS Basics                         60
Cascade-Order:
Specified Order of CSS Rules
• Determine the order of methods
     – External Style
     – Embedded Style (Linked / Imported)
     – Inline Style
                                  <body>
                                 ID: mainContainer
                                       Class: header
                                          <h1>




CS2240 - Fundamentals of IAD      CSS Basics           61
Cascade-Order:             5_CascadeOrderMethod.html
                           5_CascadeOrderMethod.css
Specified Order of CSS Rules
Method        CSS Rules
External      h1 {
                color: blue;
                color: blue;
                font-size: 24px;
                font-size: 24px;
                text-transform:
                uppercase; }
Embedded      h1 {
                color: green;
                font-size: 18px;
                font-size: 18px; } }
Inline        <h1 style="font-size: 12px;
                  letter-spacing: .2em;">




CS2240 - Fundamentals of IAD                CSS Basics   62
  Media Types
  • Different style sheets can be designed for certain media.
Recognized       Description
Media Types
all              Suitable for all devices
aural            Intended for speech synthesizers
braille          Intended for Braille tactile feedback devices
embossed         Intended for paged Braille printers
handheld         Intended for handheld devices (typically small screen, and monochrome)
print            Intended for paged, opaque material and for documents viewed on screen in
                 print preview mode
projection       Intended for projected presentations, such as projectors
screen           Intended primarily for color computer screens
tty              Interned for media using a fixed-pitch character grid, such as teletypes,
                 terminals, or portable devices with limited display capabilities
tv               Intended for television-type devices (low resolution, color, limited-srollability
  CS2240 - Fundamentals of IAD                 CSS Basics                                  63
                 screen, sound available)
Media Types
• Two ways to specify media dependencies for style
  sheets:-
     – Specify the target media from a style sheet with the @media or
       @import at-rules.

                    @import url (“xxx.css”) <media>;
                                 or
                    @media <media> {
                           /* style sheet for print go here */
                    }


     – Specify the target medium within the document language.
                   <link
                               rel=“stylesheet” href=“xxx.css”
                               type=“text/css” media=“<media>” />
CS2240 - Fundamentals of IAD               CSS Basics               64
                                                                6_MediaTypes.html
                                                                   screen.css
   Media Types                                                      print.css
 Example: Two styles are attached for a single html page.
 <link rel="stylesheet" href="../styles/screen.css" type="text/css" media="screen" />
 <link rel="stylesheet" href="../styles/print.css" type="text/css" media="print" />

Screen                                          Print Preview




                                                      Remove the information section

   CS2240 - Fundamentals of IAD              CSS Basics                                 65
   Style Sheet Strategies
   • Place your styles in external style sheets.
   • Place your styles in one common location and change an entire Web site
     from one place.
   • At the top level of your Web site, define a default default.css style sheet
     that can be applied to entire Web site.
   • Refine styles at sublevels with a section .css style sheet.
   • Use different .css file for distinctive uses.
   • Avoid using styles in tags unless you have a compelling reason.
Typical Tiered File Structure                        Linking among HTML and CSS files
     default.css                                                             HTML
     index.html                                                            index.html
     banking
          index.html
                                        CSS                                HTML                                   CSS
          section.css
                                     default.css                     banking/index.html                    banking/section.css
     investments
          index.html
                                                                        HTML                                     CSS
          section.css
                                                                investments/index.html                   investments/section.css
   CS2240 - Fundamentals of IAD                              CSS Basics                                                 66
                           Teague, J. C. (2007). CSS, DHTML & AJAX, 4th edition: Visual QuickStart Guide. Berkely: Peachpit Press. P.89
                                  Mission

                         Making Professional Format for
                         the Online Banking Application

           Values and units
           Font properties : family, size, italic, bold
           Text properties :
              adjusting spacing
              aligning text
              indenting paragraph
              decorating text
CS2240 - Fundamentals of IAD             CSS Basics       67
     Values and Units
     • Value Type
          – Number
          – Length: A measurement of distance

Relative Lengths, which vary depending on the computer being used. It is generally
used in screen style sheets.


Unit Name             What it is                                                                                 example
em       EM           Relative to width of the letter M for the font                                             3em
ex       x-height     Relative to height of the lowercase x of the at font                                       5ex
px       Pixel        Relative to the monitor’s resolution                                                       12px




     CS2240 - Fundamentals of IAD                               CSS Basics                                                       68
                             Teague, J. C. (2007). CSS, DHTML & AJAX, 4th edition: Visual QuickStart Guide. Berkely: Peachpit Press. P.xvi
     Values and Units

     • Value Type
Absolute Lengths, which remain constant regardless of the hardware and software
being used. It is generally used in print style sheets.


Unit Name                  What it is                                                                            example
pt       Point             72pt = 1inch                                                                          12pt
pc       Picas             1pc = 12 inch                                                                         3pc
mm       Millimeters       1mm = .24pc                                                                           25mm
cm       Centimeters       1cm = 10mm                                                                            5.1cm
in       Inches            1in = 2.54cm                                                                          8.25in




     CS2240 - Fundamentals of IAD                               CSS Basics                                                       69
                             Teague, J. C. (2007). CSS, DHTML & AJAX, 4th edition: Visual QuickStart Guide. Berkely: Peachpit Press. P.xvi
Values and Units

• Value Type
     – Color: A chromatic expression
 Format               What it is                                                             example
 #RRGGBB              Red, green and blue hex-code value                                     #CC33FF or #C3F
                      of a color (00-99, AA-FF)
 rgb(R#, G#,          Red, green and blue numeric-values                                     rgb(204, 51, 255)
 B#)                  of a color (0-255)
 rgb(R%, G%,          Red, green and blue percentage                                         rgb(81%, 18%, 100%)
 B%)                  values of a color (0-100%)
 <name>               The name of the color                                                  Purple

     – Percentage: A proportion
     – URL: The absolute or relative path to file on the Web
CS2240 - Fundamentals of IAD                               CSS Basics                                                        70
                        Teague, J. C. (2007). CSS, DHTML & AJAX, 4th edition: Visual QuickStart Guide. Berkely: Peachpit Press. P.xvii
                                                        6_Comments.css
Adding Comments to CSS
• Like any other part of an        1     /* Global Styles */
  HTML document, CSS can have      2     h1 {
  comments.                        3         color: #CCFF99;
• A comment does not affect        4         font-size: 1.5em; }
  code.                            5
• It only adds notes or gives      6     /* Class Styles */
  guidance to anyone viewing       7     .subHeader {
  your code.                                 color: #3366CC;
                                   8
                                   9         font-size: .8em; }
                                   10
                                   11    /* ID Styles */
                                   12    #pageContent {
                                   13        color: #003366;
                 /* … */           14        font-size: .75em; }
CS2240 - Fundamentals of IAD    CSS Basics                           71
Font Properties
• The fonts you use go a long way toward getting your
  message across in just the way you want – whether that
  message is classical, grunge, or in between.
• The appearance of fonts help authors guide a visitor’s
  eye around the page.
• Common Techniques
     –   Choosing a Font Family
     –   Setting the Font Size
     –   Making Text Italic
     –   Setting Bold
     –   Creating Small Caps
     –   Setting Multiple Font Values

CS2240 - Fundamentals of IAD            CSS Basics     72
Choosing a Font Family
• More than one font can be
  specified, in case the first is
  not available in your visitor’s
  system.
• A last ditch attempt at
  controlling the display in the
  visitor’s system should be a
  generic font style, such as
  Serif, Sans-serif, Cursive,
  Fantasy, and Monspace.
• Browser-Safe Fonts
  http://www.webbedenvironme
  nts.com/dhtml/downloads/Bro
  wserSafeFonts.pdf

     font-family: font1, font2 …
CS2240 - Fundamentals of IAD        CSS Basics   73
     Choosing a Font Family                                               7_Fonts.html
                                                                          7_Fonts.css


7_Fonts.html

9                <title>ABC Banking Corporation Limited</title>
10            <link rel=“stylesheet” href=“../styles/7_Fonts.css” type=“text/css”
      media="all" />
11         </head>
                                                                  Link an external CSS
12         <body>




7_Fonts.css
1 /* Global Styles */               Define style for HTML tags
2 body {
3       font-family: Verdana, Arial, Helvetica, sans-serif; }

     CS2240 - Fundamentals of IAD                CSS Basics                              74
Setting the Font Size
• The size of the text on the screen can be specified.
• Fonts can be set as
     – Absolute Size Keyword: It refers to an entry in a table of font sizes
       computed and kept by the user agent.
       [xx-small | x-small | small | medium | large | x-large | xx-large]
     – Relative Size Keyword: It is interpreted relative to the table of font
       sizes and the font size of the parent element.
       [larger | smaller]
     – Length: It specifies either an absolute font size (that is independent
       of the user agent’s font table), or a relative font size.
          • Absolute Length Unit [in | cm | mm | pt | pc]
          • Relative Length Unit [em | ex | px]
     – Percentage: It specifies an absolute font size relative to the parent
       element’s font size.



CS2240 - Fundamentals of IAD               CSS Basics                          75
Setting the Font Size
• To enhance the usability and
  accessibility of your page
     – Avoid small size of content
       (use 1em or 100% as a basic
       for your font sizes)
     – Avoid absolute length units for
       screen display (use em or
       percentage for screen
       stylesheets)
     – Use absolute length units for
       print stylesheets
     – Go to W3C: Care with Font
       Size
       http://www.w3.org/QA/Tips/
       font-size for details.



            font-size: size
CS2240 - Fundamentals of IAD             CSS Basics   76
      Setting the Font Size                                                   8_FontSize.html
                                                                              8_FontSize.css

8_FontSize.css
                                                                  Use a semicolon (;) to separate
 1    /* Global Styles */
                                                                  individual declarations in the list
 2    body {
 3               font-family: Verdana, Arial, Helvetica, sans-serif;
 4               font-size: 1em; }
 5
                                                For consistent and versatile page viewing,
 6    h1 {                                      the best strategy for setting font sizes
 7               font-size: 1.5em; }            is to set a relative length size for the
 8                                              <body> tag, and then use absolute font
 9    h2 {                                      size (such as small) or relative font sizes
 10              font-size: .9em; }             (such as larger) to adjust the size, based
                                                on the body size.
 11
 12   h3 {
 13              font-size: 1.2em; }
 14
 15   h4 {
    CS2240 - Fundamentals of IAD                     CSS Basics                                  77
 16             font-size: .8em; }
Making Text Italic
• Italic Font – It is redesigned
  with more pronounced serifs
  and usually a slight slant to the
  right.
• Oblique Font – It is slanted to
  the right by the computer.
• Both of them are often used to
  set off quotations, emphasized
  text, foreign words, magazine,
  and much more.



           font-style: italic

          font-style: oblique
CS2240 - Fundamentals of IAD          CSS Basics   78
     Making Text Italic                                                   9_TextItalic.html
                                                                          9_TextItalic.css
9_TextItalic.html

9                <title>ABC Bank</title>
10            <link rel=“stylesheet” href=“../styles/9_TextItalic.css” type=“text/css”
      media="all" />
11         </head>
       …         …
31              <p> <span class="subHeader">Feature:</span> <br /> (1) Forward dated
      instructions up to 45 days in advance <br /> (2) Access Bill Payment 24-hour a day with
      our online banking </p>

9_TextItalic.css
25    /* Class Styles */
26    .subHeader {
27               font-size: .8em;
28               font-style: italic; }                        Define style for classes

     CS2240 - Fundamentals of IAD                CSS Basics                               79
Setting Bold
• It is used to set different levels
  of boldness for text.
     – bold: Set the font to boldface
     – bolder or lighter: Set the
       font’s weight to be bolder or
       lighter relative to its parent
       element’s weight
     – A value from 100 to 900,
       increments of 100: Increase
       the weight, based on
       alternative versions of the
       font that are available.
• It is an effective way to make
  text standout.


          font-weight: bold
CS2240 - Fundamentals of IAD            CSS Basics   80
     Setting Bold                                      10_TextBold.html
                                                       10_TextBold.css


10_TextBold.css

15      h4 {
16                 font-size:.8em;
17                 font-weight: bold; }
18
        …
26      /* Class Styles */
27      .subHeader {
28                 font-size: .8em;
29                 font-style: italic;
30                 font-weight: bold;}




     CS2240 - Fundamentals of IAD         CSS Basics                  81
Creating Small Caps

• Small caps are useful for
  emphasizing titles.
• With small caps,
  lowercase letters are
  converted to uppercase,
  but in a slightly smaller
  size than regulator
  uppercase letters.




      font-variant: small-caps
CS2240 - Fundamentals of IAD     CSS Basics   82
     Creating Small Caps                                     11_TextSmallCaps.html
                                                             11_TextSmallCaps.css

11_TextSmallCaps.css

15     h4 {
16                font-size:.8em;
17                font-weight: bold;
18                font-variant: small-caps; }
       …
27     /* Class Styles */
28     .subHeader {
29                font-size: .8em;
30                font-style: italic;
31                font-weight: bold;}




     CS2240 - Fundamentals of IAD               CSS Basics                    83
Setting Multiple Font Values
• Instead of setting font properties independently,
  several font attributes can be defined simultaneously in
  a single declaration.
• The font-style, font-variant, and font-weight properties
  may be specified in any order or omitted. If they are
  omitted, they are set to normal.
• The font-size and font-family properties must always be
  explicitly specified, first the font-size, then the font-
  family.


 font: [<font-style> || <font-variant> || <font-weight>]?
 <font-size> [ / <line-height>]? <font-family>

CS2240 - Fundamentals of IAD            CSS Basics          84
     Setting Multiple Font Values
                               12_MultipleFontValue.html
                               12_MultipleFontValue.css

12_MultipleFontValue.css
2       body {
3                 font: 1em Arial, Helvetica, sans-serif; }
4
5       h1 {
6                 font-size:1.5em; }
        …
14      h4 {
                  font: small-caps bold .8em Verdana, Arial, Helvetica, sans-serif; }
        …
24      /* Class Styles */
25      .subHeader {
26                font: italic bold .8em Verdana, Arial, Helvetica, sans-serif; }


     CS2240 - Fundamentals of IAD                CSS Basics                             85
Text Properties

• Besides the shapes and sizes of the letters being used
  (the font), the spaces between letters, words, lines,
  and paragraphs are also important.
• The challenge of displaying text on a computer screen
  is to support a wider audience.
     – How to enhance legibility?
     – How to draw their interest?
• Common Techniques
     –   Adjusting Spacing
     –   Aligning Text
     –   Indenting Paragraphs
     –   Decorating Text
CS2240 - Fundamentals of IAD         CSS Basics            86
Adjusting Spacing
• Space Between Letters
  (Tracking)
     – It adds equal space between
       letters in a word.
     – Appropriated letter spacing
       can improve the readability
       of the text.




        letter-spacing: <value>
CS2240 - Fundamentals of IAD         CSS Basics   87
     Adjusting Spacing                                               13_LetterSpacing.html
                                                                     13_LetterSpacing.css
13_LetterSpacing.css
2       body {
3                 font: 1em Verdana, Arial, Helvetica, sans-serif;
4                 letter-spacing: normal; }
5
6       h1 {
7                 font-size:1.5em;
8                 letter-spacing: .2em; }
9
10      h2 {
11                font-size:.9em;
12                letter-spacing: .4em; }
13
14      h3 {
                  font-size: 1.2em;
     CS2240 - Fundamentals of IAD                 CSS Basics                          88
15                letter-spacing: .2em; }
Adjusting Spacing
• Space Between Lines
  (Leading)
     – It adds space between the
       baselines (the bottoms of
       most letters) of lines of
       text.
     – Appropriated line spacing
       can make reading easier.




            line-height: <value>
CS2240 - Fundamentals of IAD       CSS Basics   89
     Adjusting Spacing                                               13_LineHeight.html
                                                                     13_LineHeight.css
13_LineHeight.css
2       body {
3                 font: 1em Verdana, Arial, Helvetica, sans-serif;
4                 letter-spacing: normal;
5                 line-height: 100%; }
6
7       h1 {
8                 font-size:1.5em;
9                 letter-spacing: .2em;
10                line-height: 2.0; }
11
12      h2 {
13                font-size:.9em;
14                letter-spacing: .4em;
15                line-height: 18px; }
     CS2240 - Fundamentals of IAD                 CSS Basics                         90
Aligning Text
• Horizontal
     – Alignment and justification of
       the text can be controlled.
       [left | right | center | justify]
             text-align: <value>

• Vertical
     – The vertical position of one
       inline element can be specified,
       relative to the elements around
       it, either above or below.
       Definition List: [super | sub |
       baseline | <length> |
       <percentage>]
       Relative Values: [top | middle |
       bottom | text-top | text-
       bottom]
           vertical-align: <value>
CS2240 - Fundamentals of IAD               CSS Basics   91
     Aligning Text                                                     14_TextAligning.html
                                                                       14_TextAligning.css

14_TextAligning.css
2       body {
3                   font: 1em Verdana, Arial, Helvetica, sans-serif;
4                   letter-spacing: normal;
4                   line-height: 100%;
6                   text-align: left; }
        ..
32      /* ID Styles */
33      #footer {
34                  font-size:.6em;
35                  text-align: right; }
36



     CS2240 - Fundamentals of IAD                   CSS Basics                          92
Indenting Paragraphs
• Extra horizontal space
  can be specified at the
  beginning of the first line
  of text in a paragraph.
• Indenting is commonly
  used for the printer-
  friendly versions of your
  page.




         text-indent: <value>
CS2240 - Fundamentals of IAD    CSS Basics   93
                                                         15_ParagraphIndenting.html
     Indenting Paragraphs                             15_ParagraphIndentingScreen.css
                                                       15_ParagraphIndentingPrint.css

15_ParagraphIndenting.html

9                <title>ABC Banking Corporation Limited</title>
10             <link rel="stylesheet" href="../styles/15_ParagraphIndentingScreen.css"
      type="text/css" media="screen" />
11             <link rel="stylesheet" href="../styles/15_ParagraphIndentingPrint.css"
      type="text/css" media="print" />
12          </head>
                                                        Link another style sheet for printing

15_ParagraphIndentingPrint.css
28     p{
29               font-size: .75em;
30               line-height: 1.5;
31               text-indent: 2em; }

     CS2240 - Fundamentals of IAD                CSS Basics                              94
Decorating Text
• The text can be adorned.
  Value: [underline | overline |
  line-through | blink | none]
• It is used to add emphasis, and
  attract the visitor’s eye to
  important areas on your web
  page.
• Many visitors do not like
  blinking text, especially on
  web pages, where they spend a
  lot of time.
• The underline in hypertext
  links can also be removed by
  setting text-decoration: none.


      text-decoration: <value>
CS2240 - Fundamentals of IAD        CSS Basics   95
     Decorating Text                                               16_TextDecorating.html
                                                                   16_TextDecorating.css

16_TextDecorating.css
1     /* Global Styles */
2     body {
3               font: 1em Verdana, Arial, Helvetica, sans-serif;
4               letter-spacing: normal;
5               line-height: 100%;
6               text-align: left;
7               text-decoration: none; }
      …
29    p{
30              font-size: .75em;
31              line-height: 1.5; }
32
33    a{
                 text-decoration: none; }
34 CS2240 - Fundamentals of IAD                 CSS Basics                           96
                                  Mission

                         Making Professional Format for
                         the Online Banking Application

           Color and background
               page, content, border/rule, header, link,
               table, form
           Critical consideration of color
               web safe, accessibility
           Value for the color
               name, RGB (value, percent, hex)
CS2240 - Fundamentals of IAD             CSS Basics        97
  Color & Background Properties
  • Color forms the cornerstone of all design, creating the first impression
    that most people will have of your site.
  • Color can guide the visitor’s eye around the page, helping you to highlight
    important areas, while downplaying others.
  • Color can be used in the different components.



Page                                                               Content
background                                                         background
  Link /
  Navigation                                                       Border /
                                                                   Rule


  Header
                                                                   List / Table




   CS2240 /
  Content - Fundamentals of IAD          CSS Basics                 Form          98
  Text
Color & Background Properties
     – Page background
          • It covers the entire visible area of the browser window.
          • The background should generally provide the most contrast with
            the foreground text colors.
     – Content background
          • Different color will be used for the background directly around the
            content of the pages.
          • This allows the page background color to absorb extra horizontal
            space in the browser window.
     – Border/Rule
          • Rulers or contrasting colors will be used around the borders of
            content areas, headers, navigation blocks, lists, and tables to
            separate different chunks of content.
     – Header
          • Color for the section headers clearly contrasts with chosen
            background color.


CS2240 - Fundamentals of IAD             CSS Basics                           99
Color & Background Properties
     – Content (Sentences or Paragraphs of Text)
          • It should have the highest contrast with the background to
            maximize legibility.
     – Link/Navigation
          • Different colors may be chosen for your site navigation and for
            links in the copy.
          • The link colors should be easily discernable from other text while
            sill contrasting the background.
     – Link/Table
          • Different background color may be chosen behind lists and tables
            (or even alternating row colors).
     – Form
          • The border, foreground, and background colors of many form
            elements can be specified to given them a more distinctive look
            for your site, apart from the default appearance.

CS2240 - Fundamentals of IAD            CSS Basics                            100
Color & Background Properties

• Critical Consideration with Color
     – Web Safe Colors (for people who use 8-bit monitors)
          • It refers the set of colors that both Mac and Windows computer
            could consistently display (a 216 color subset of the 256).
          • http://www.cookwood.com/html/colors/websafecolors.html
     – Accessibility (for people who are color-blind)
          • Your web page should
                – Provide enough contrast between foreground and background colors.
                – Make sure that color is not critical for understanding information.
          • W3C Web Content Accessibility Guidelines
            http://www.w3.org/TR/WAI-WEBCONTENT/

   Color Combinations
   Unfavorable           Blue/Green, Red/Green
   Preferable            Red/Blue, Orange/Blue, Orange/Purple, Yellow/Purple
CS2240 - Fundamentals of IAD                CSS Basics                             101
Color & Background Properties

• Online Color Scheme Tools / Samples
     – VisiBone Webmaster’s Color Lab http://visibone.com/colorlab/
     – Color Scheme Generator
       http://www.wellstyled.com/tools/colorscheme2/index-
       en.html
     – Slayer Office Color Palette tool
       http://www.slayeroffice.com/tools/color_palette/
     – Color Palette Generator (from photographs or other images)
       http://www.degraeve.com/color-palette/
     – Color Lovers: Palettes http://colourlovers.com/palettes/top
     – Adobe Labs: Kuler http://kuler.adobe.com/



CS2240 - Fundamentals of IAD      CSS Basics                     102
Setting Foreground Color
• The foreground color of an element
  can be set.
• Value for the color
     – Name of a color (16-predefined color)
       http://www.cookwood.com/html/col
       ors/sixteencolors.html
           color: [black | blue | gray | …]
     – RGB value set
          • Percentages,

               color: rgb ( x%, y%, z% )

          • Values from 0-255

                  color: rgb ( x, y, z )

          • Hexadecimal Code
CS2240 - Fundamentals of IAD
                   color:      #999999     CSS Basics   103
     Setting Foreground Color 17_ColorForeground.html
                              17_ColorForeground.css
17_ColorForeground.css
2     body {                                     Specific each value only once when
      …                                          specifying hex RGB values in which
                                                both color value numbers are the same.
8              color: #003366; }
9
                                            #003366 / #036 /
10    h1 {                                rgb (0%, 10%, 40%) /
      …                                       rgb(0, 51, 102)       #CCFF99 / #CF9 /
14             color: #CF9; }                                    rgb (80%, 100%, 60%) /
                                                                    rgb(204, 255, 153)
15
16    h2 {
      …                                            #FF9933 / #F93 /
20             color: rgb(100%, 60%, 20%); }    rgb (100%, 60%, 20%) /
                                                    rgb(255, 153, 51)
21
22    h3 {
      …                                                             #3366CC / #36C /
                                                                  rgb (20%, 40%, 80%) /
                color: rgb(51,
26 CS2240 - Fundamentals of IAD 102, 204); }   CSS Basics                            104
                                                                     rgb(51, 102, 204)
     Setting Foreground Color:                                17_ColorLink.html
     Appearance of Links                                      17_ColorLink.css


                            #FF6600 / #F60 /
                         rgb (100%, 40%, 0%) /
                            rgb (255, 102, 0)
38     a{
39                 text-decoration: none;
40                 color: #FF6600;}
41
42     a:hover {
43                 color: #3366CC; }

             Mouse cursor is over the link


                           #3366CC / #36C /
                         rgb (20%, 40%, 80%) /
                            rgb(51, 102, 204)
     CS2240 - Fundamentals of IAD                CSS Basics                  105
Setting Background Color

• The background color for
  entire page and individual
  elements can be defined.




    background-color: <value>
CS2240 - Fundamentals of IAD    CSS Basics   106
     Setting Background Color 18_ColorBackground.html
                              18_ColorBackground.css

18_ColorBackground.html
2       body {                                                  #DDEEFF / #DEF /
                                                          rgb (86.67%, 93.33%, 100%) /
        …
                                                                rgb (221, 238, 255)
9                   background-color: #DDEEFF;}
        …
47      #mainContainer {                                        white / #FFFFFF / #FFF /
48                  background-color: white; }                  rgb(100%, 100%, 100%) /
                                                                   rgb (255, 255, 255)
49
50      #header {
51                  background-color: #3366CC; }
                                                                   #3366CC / #36C /
                                                                 rgb (20%, 40%, 80%) /
                                                                    rgb(51, 102, 204)



     CS2240 - Fundamentals of IAD                  CSS Basics                              107
                               Mission
             Making Professional Looking Layouts for the
                     Online Banking Application

           Layout
           Structuring your page
           The box model
               margin, border, padding, height, width
           Overflow
           Floating
           Fixed and liquid layout

CS2240 - Fundamentals of IAD           CSS Basics          108
     Layout

     • Layouts refer to the arrangement of text and graphics.
     • An appropriate layout enhances visitors’ ability to read
       and find information on a page.
     Common Web Page Layout                                                Viewing Patterns for Homepage




ADC. (2006). Web Page Development: Best Practices. Available from      Ruel, L. and Outing, S. (2006). Viewing Patterns for Homepages.
       CS2240 - Fundamentals of IAD
http://developer.apple.com/internet/webcontent/bestwebdev.html          Basics                                                     109
                                                                    CSSAvailable from http://www.poynterextra.org/eyetrack2004/viewing.htm
Major Trend in Web Design:
Progressive Enhancement
• All Web design layout should be done with CSS.
• It separates the content and structure created by the markup (whether it
  is in XHTML or XML) from the styles (CSS) and functionality (JavaScript)
  used for presentation on a particular technology (like a Web browser).
• It promotes the following principles:-
     –   Basic content and functionality, that is native to the particular medium, should
         be accessible to all browsers.
     –   All content is contained in the markup if possible, which should have no
         styling.
     –   Enhanced styles, layout, and functionality are provided by external CSS or
         JavaScript files.
• Advantages
     –   Flexibility: It allows authors to completely redesign an entire Web site by
         simply supplying new CSS and JavaScript files (Example: Zen Garden
         http://www.csszengarden.com/).
     –   Accessibility: Multiple medium can be supported. The basic content can go to
         Braille readers, or Web-enabled cell phones, while CSS-enhanced and
         JavaScript-enhanced versions can be used by computers.


CS2240 - Fundamentals of IAD                 CSS Basics                               110
More Benefits of Using CSS for Layout –
From Marketing Perspective
• Reduced Bandwidth Costs
     –   The XHTML file size is dramatically decreased.
     –   Presentation information is placed in the external CSS documents, called up
         once when the page loads up and then cached on to the visitor’s computer.
• A Higher Search Engine Ranking
     –   The code is cleaner and therefore more accessible to search engines.
     –   Important content can be placed at the top of the HTML document.
     –   There is a greater density of content compared to coding.
• Faster Download Speed
     –   Slow download speed is often cited as one of the biggest usability complaints
         for websites.
     –   A web usability redesign can increase the sales/conversion rate by 100%
         [Source: Nielsen, J. (2003). Return on Investment for Usability. Available from
         http://www.useit.com/alertbox/20030107.html ]
• Increase in Reach
     –   A CSS-based website is compatible with various medium, such as PDAs, mobile
         phones, and WebTV.
     –   More visitors can get access to your page.


CS2240 - Fundamentals of IAD                     CSS Basics                                                       111
                                       Moss, T. (2005). Why a CSS website layout will make you money. Available from
                                       http://www.webcredible.co.uk/user-friendly-resources/css/css-website-layout.shtml
CSS Layouts: The Box Model
• HTML tags are the building blocks of your web page.
• Each tag can be treated as a discrete element box on
  the screen and controlled by CSS.
• Each box has the following CSS properties:-
     – Content: It is at the center of the box. It includes all text,
       lists, forms and images.
     – Width & Height: They are the dimensions of the content area.
     – Padding: It is the space between the border and the content of
       the element. Background colors and images will also fill this
       space.
     – Border: It is a line that surrounds the element. It is invisible
       unless its color, width, and style are set.
     – Margin: It is the space between the border of the element and
       other elements in the window.


CS2240 - Fundamentals of IAD        CSS Basics                      112
 The Box Model

                                           margin-top


                                           padding-top


margin-left     padding-left                             padding-right margin-right




                                                Height
                                 CONTENT


                                Width

                                           padding-bottom

                                           margin-bottom


              Border
 CS2240 - Fundamentals of IAD           CSS Basics                            113
 CSS Layouts:
 Setting an Element’s Margins
 • The margin property of an
   element is used to set the
   space between the space
   between that element and
   other elements in the window.
 • Value
      – Length
      – Percentage, which creates a
        margin proportional to the
        parent element’s width
      – auto, which returns control to
        the browser’s discretion

    margin: <value for all sides>
  margin: <top/bottom> <left/right>
 margin: <top> <left/right> <bottom>
margin: <top> <right> <bottom> <left>
 CS2240 - Fundamentals of IAD            CSS Basics   114
                                                                      20_MarginSetting.html
    CSS Layouts:                                                      20_MarginSetting.css

    Setting an Element’s Margins
2        body {                                           Page Background         10px
         …                                                  Container
                                                            Header: 4-side margins = 0
10                   margin: 0;}
         …
48       #mainContainer {
49                   background-color: white;
                                                      5px                                200px
50                   margin: 10px auto;}
                                                                 Page content
51
52       #header {
53                   background-color: #3366CC;
54                   margin: 0px;}
55
                                                                                  10px
56       #pageContent {
57                   margin: 0px 200px 0px 5px;}

    CS2240 - Fundamentals of IAD                  CSS Basics                               115
 CSS Layouts:
 Setting an Element’s Border
 • The border property is used to set
   a rule (line) around your box on all
   four sides of any width, color and
   style.
   Border-Width Values: <length> |
   thin | medium | thick | inherit
   Border-Color Values: <color> |
   transparent | inherit
   Border-Style Values: dotted |
   dashed | solid | double | groove |
   ridge | inset | outset | none |
   inherit


    border: <value for all sides>
  border : <top/bottom> <left/right>
 border : <top> <left/right> <bottom>
border : <top> <right> <bottom> <left>
 CS2240 - Fundamentals of IAD             CSS Basics   116
                                                                   21_BorderSetting.html
CSS Layouts:                                                       21_BorderSetting.css

Setting an Element’s Border
47    img {                                                                   border

48                border: none; }                      Page Background
49                                                     Container
50    /* ID Styles */
51    #mainContainer {
52                background-color: white;
53                margin: 10px auto;
54                border: 2px solid #E0E0E0; }
55
56    #header {
57                background-color: #3366CC;
58                margin: 0px;}
59
60    #pageContent {
61                margin: 0px 200px 0px 5px;}
CS2240 - Fundamentals of IAD                   CSS Basics                          117
  CSS Layouts:
  Setting an Element’s Padding
  • The padding property is used
    to add space between the
    border of the element and its
    content.
  • It is useful if you are using
    borders and background colors
    and do not want the content
    putting right up to the edges.
  • Value
       – Length
       – Percentage, which creates a
         margin proportional to the
         parent element’s width
    padding: <value for all sides>
  padding : <top/bottom> <left/right>
 padding : <top> <left/right> <bottom>
padding : <top> <right> <bottom> <left>
  CS2240 - Fundamentals of IAD         CSS Basics   118
                                                                22_PaddingSetting.html
CSS Layouts:                                                    22_PaddingSetting.css

Setting an Element’s Padding
2     body {                                       Padding-left:10px      Padding-right:10px
      …                                               Content      Padding-top: 15px
10                padding: 0;}                          HEADER CONTENT
                                                                   Padding-bottom: 5px
      …                                                            Padding-top: 15px
57    #header {                                          INFORMATION CONTENT
58                background-color: #3366CC;                       Padding-bottom: 15px
                                                    Padding-left: 15px Padding-right: 15px
59                margin: 0px;
60                padding: 15px 10px 5px;}
61
62    #information {
63                padding: 15px 15px; }




CS2240 - Fundamentals of IAD                   CSS Basics                           119
CSS Layouts:
Setting the Width and Height of an
Element
• Usually, the browser and default
  automatically set the width and
  height to 100% of the available
  width and whatever height is
  needed to display all the content.
• The width and height properties
  can be used to override the
  default setting.
• Value:
     –   Length
     –   Percentage, which sets the
         width/height proportional to the
         parent element
     –   auto, which uses the width
         calculated by the browser for the
         browser

             width: <value>
             height: <value>
CS2240 - Fundamentals of IAD                 CSS Basics   120
CSS Layouts:                                                       23_WidthHeight.html
                                                                   23_WidthHeight.css
Setting the Width and Height of an
Element
52    #mainContainer {                                         Width: 840px
53                background-color: white;             Container
54                margin: 10px auto;
55                border: 2px solid #E0E0E0;
56                width: 840px; }                           INFORMATION       height: 100px
57
                                                            Width: 200px
58    #header {
59                background-color: #3366CC;
60                margin: 0px;
61                padding: 15px 10px 5px;}
62
63    #information {
64                padding: 15px 15px;
65                width: 200px; }
CS2240 - Fundamentals of IAD                   CSS Basics                             121
Structuring Your Page

  Step 1                   Step 2               Step 3           Step 4


                                                                       Use
                                                Use header
                            Put your div                          comments
  Divide logical                                 elements
                            elements in                           to identify
   sections of                                    (h1, etc)
                           an order that                            different
       your                                     consistently
                            would make                               areas
   document                                      to identify
                           sense even if                         of your page
     into div                                  and prioritize
                           the CSS was                          and what they
    elements                                  information on
                             not used                                should
                                                 your page
                                                                    contain




CS2240 - Fundamentals of IAD               CSS Basics                       122
Structuring Your Page: General Page
Layout
• Each layout includes five main sections:
     –   Header
     –   Content
     –   Navigation            <div id=“container”>
     –   Other stuff             <div id=“header>…</div>
     –   Footer                  <div id=“content”>…</div>
                                 <div id=“navigation”>…</div>
                                 <div id=“extra”>…</div>
                                 <div id=“footer”>…</div>
                               </div>




CS2240 - Fundamentals of IAD            CSS Basics              123
                                            Header



                                            Related Products
                                            Information




                                            Main Content




CS2240 - Fundamentals of IAD   CSS Basics   Footer             124
                                                              19_PageStructure.html
 Structuring Your Page
12   <body>
13              <div id="mainContainer">
14
15   <!-- Page Header -->
16              <div id="header">
17              <h1>ABC Banking Corporation Limited</h1>
18              <h2>Online Banking Services</h2>
19              </div>
20
21   <!-- Related Products Information -->
22              <div id="information">
23              <p class=“infoHeader”>Information</p>
24             <p><a href="loans.html"><img src="../images/loans.jpg" width="105"
     height="85" alt="Personal Installment Loan" /><br />Loans</a></p>
25              </div>

 CS2240 - Fundamentals of IAD                CSS Basics                             125
 Structuring Your Page
27   <!-- Page Content -->
28              <div id="pageContent">
29              <h3>Payments</h3>
     …
42              </div>
43
44   <!-- Page Footer -->
45              <div id="footer">
46             <p>Copyright. ABC Banking Corporation Limited 2006. All rights
     reserved.</p>
47             <p><a href="../images/valid-xhtml11.png?uri=referer"><img
     src="../images/valid-xhtml11.png" alt="Valid XHTML 1.1" height="31" width="88"
     /></a></p>
48              </div>
49
50              </div>
 CS2240 - Fundamentals of IAD               CSS Basics                                126
Structuring Your Page
• Line 13, <div id=“mainContainer”>
     –   It surrounds the entire page (between the <body> tags).
     –   It provides the page a unique ID name.
• Line 16, <div id=“header”>
     –   It surrounds the content of the page that makes up the main header with a
         <div> element.
     –   The header will generally stretch across the top of the page, and may have
         title, sub-titles, global navigation, or other elements that will need to be at
         the top of every page in the Web site.
• Line 22, <div id=“information”>
     –   It surrounds the content that provides related product information.
• Line 28, <div id=“pageContent”>
     –   It surrounds the primary content of your page.
     –   Generally, these are articles, forms, photo galleries, or other content that the
         visitor is looking for.
• Line 45, <div id=“footer”>
     –   It is at the very bottom of your content.



CS2240 - Fundamentals of IAD                  CSS Basics                                   127
CSS Layouts:
Setting Where the Overflow Content Goes
• If you set the height of an element                                  Mozilla Firefox
  where the content might be larger
  than the space provided, some
  content is not displayed or
  overlapped.
• The overflow property can be                             Problem: Content
  used to specify what happens to                          Overlapped
  the overflow.
• Value:
     –   Scroll, which sets scroll bars
         around the visible area
     –   Hidden, which hides the overflow
     –   Visible, which forces the cropped                             Mozilla Firefox
         part of the element to show up
     –   Auto, which allows the browser to
         decide whether scroll bars need to
         be displayed
                                                           Scroll bar is displayed
              overflow: auto
CS2240 - Fundamentals of IAD                  CSS Basics                         128
CSS Layouts:                                          24_ContentOverflowProblem.html
                                                      24_ContentOverflowProblem.css
Setting Where the Overflow Content Goes                 24_ContentOverflowFix.html
                                                         24_ContentOverflowFix.css
58    #header {
59                background-color: #3366CC;
60                margin: 0px;
61                padding: 15px 10px 5px;}
62
63    #information {
64                padding: 15px 15px;
65                width: 200px;
66                height: 50px;                             NOTE: IE will fix the
67                overflow: auto;}                           overflow problem
                                                               automatically.




CS2240 - Fundamentals of IAD                   CSS Basics                           129
CSS Layouts:
Floating Element in the Window
• An element can interact with
  other elements within the
  document by floating it.
• Value:
     – right, which aligns this
       element to the right of other
       elements causing subsequent
       elements to wrap horizontally
       on the left of this element
     – left, which aligns this element
       to the left of other elements,
       causing subsequent elements
       to wrap horizontally on the
       right of this element
     – none, which overrides floating
       for this element
              float: <value>
CS2240 - Fundamentals of IAD             CSS Basics   130
CSS Layouts:                                                     25_FloatElement.html
                                                                 25_FloatElement.css
Floating Element in the Window
58    #header {
                                                       Content
59                background-color: #3366CC;           Header
60                margin: 0px;
61                padding: 15px 10px 5px;}                                     INFO

62                                                                             200px
63    #information {                                        Page content
64                padding: 15px 15px;
65                width: 200px;
66                height: 50px;
67                overflow: auto;
68                float: right; }                                            Footer




CS2240 - Fundamentals of IAD                   CSS Basics                        131
                                                  26_FixedLayout.html

Fixed vs. Liquid Layouts                          26_FixedLayout.css



• Fixed Layouts
     – These are layouts where the width/height of the entire page is
       set with a specific numerical value.
     – They remain the specified width/height, regardless of the size
       of the browser window viewing the page.




CS2240 - Fundamentals of IAD        CSS Basics                     132
Fixed vs. Liquid Layouts
• Fixed Layouts
     – Advantages
          • The pages look identical, no matter who is looking at them.
          • Fixed width/height elements will not overpower text on smaller
            monitors.
     – Limitations
          • They will cause horizontal/vertical scrolling in smaller browser
            windows.
          • They will result in large expanses of white space in larger
            monitors.
          • They do not handle customer changes to font sizes very well.




CS2240 - Fundamentals of IAD             CSS Basics                            133
                                                   26_LiquidLayout.html

Fixed vs. Liquid Layouts                           26_LiquidLayout.css



• Liquid Layouts
     – These are layouts where the width/height of the entire page is
       flexible depending upon how wide the visitor’s browser is.
     – They flex with the size of window, even if the current visitors
       change their browser size as they are viewing the site.




CS2240 - Fundamentals of IAD        CSS Basics                      134
Fixed vs. Liquid Layouts
• Liquid Layouts
     – Advantages
          • Pages expand and contract to fill the available space.
          • All available real estate is used, allowing the author to display more
            content on larger monitors, but still remain viable on smaller displays.
          • They provide consistency in relative width/height, allowing a page to
            respond more dynamically to customer-imposed restrictions like larger
            font sizes.
     – Limitations
          • They allow very litter precise control over the width/height of the various
            elements of the page.
          • They will result in columns of text that are width too wide to comfortably
            scan, or on smaller browsers too small for the words to show up clearly.
          • They have some problems when a fixed width element is placed inside a
            liquid column. If the column is rendered without enough space for the
            image, browsers will either increase the column width, or cause overlaps
            in text and image.


CS2240 - Fundamentals of IAD                CSS Basics                                 135
Fixed vs. Liquid Layouts

• More Examples
     – Dynamic Drive CSS Layouts
       http://www.dynamicdrive.com/style/layouts/
     – MaxDesign – Sample CSS Page Layouts
       http://www.maxdesign.com.au/presentation/page_
       layouts/
     – Layout Gala http://blog.html.it/layoutgala/




CS2240 - Fundamentals of IAD   CSS Basics          136
                 Validating Your CSS Page




CS2240 - Fundamentals of IAD   CSS Basics   137
Validating Your CSS Page

• W3C CSS Validation Service
     – It is a free online service, provided by the W3C Validator Team.
     – It checks CSS in (X)HTML documents or standalone for
       conformance to W3C recommendations.
     – It is available at http://jigsaw.w3.org/css-validator/
     – Example: Validate the CSS page 26_FixedLayout.css
       http://jigsaw.w3.org/css-
       validator/validator?uri=http://www.cs.cityu.edu.hk/~cssamk/c
       s4281-3/Lec2/examples/styles/26_FixedLayout.css




CS2240 - Fundamentals of IAD        CSS Basics                      138

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:6
posted:12/15/2011
language:English
pages:138