Get documents about "Introduction to HTML
Document Sample
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
