Using%20Cascading%20Style%20Sheets%20For%20Design

1
Using HTML and JavaScript to Develop Website

• Using Cascading Style Sheets For Design

Cascading Style Sheets sound intimidating. In
reality, however, CSS is one of the most
convenient tools available to Web developers
Rachel Andrew. "The CSS Anthology 101 Essential
Tips, Tricks Hacks"
2
What we are talking about

• We will look at
• Quick CSS review
• Creating Boxes
• Padding
• Margin
• Border
• Positioning
• Creating Call-out box
• Using Two Column Output
• Using Float
• - Floating images
• - Float Left
• - Float Right
• A Large Layout Example.. .
• A Little More On Navigation Buttons

3
CSS Review

• We saw that CSS can
• Used externally or embedded or inline
• Centralize the setting of style information
  (e.g., default color or text size)
• Provide classes and IDs for special situations
• Provide a simple roll-over navigation . . .

4
What we are talking about

• We will look at
• Quick CSS review
• Creating Boxes
• Padding
• Margin
• Border
• Positioning
• Creating Call-out box
• Using Two Column Output
• Using Float
• - Floating images
• - Float Left
• - Float Right
• A Large Layout Example.. .
• A Little More On Navigation Buttons

5
Competencies

• Be able to
• Create boxes
• Allow text to flow around images
• Use CSS to create layouts

Competency Alert You need to know this!
Common Problem Area! People seem to forget
this
6
Creating boxes with CSS
Competency Alert You need to know this!

• When use CSS all html elements are essentially
  boxes
• The box spans the length of the html element

ltHTMLgtltHEADgt ltSTYLE TYPE"text/css"gt h1
background teal i background blue
lt/stylegt ltTITLEgt ID Example lt/TITLEgt lt/HEADgtltBODY
gt ltPgt lth1gt 3 ways lt/h1gt There are 3 ways to
define style sheets ltolgt ltligt ltigtInline
styles.lt/igt These are added to the HTML
tags ltligt ltbgt Internal stylesheets lt/bgt defined
at beginning of document.lt/divgt ltligt ltbgt External
stylesheetslt/bgt defined in ltigtan external
filelt/igt. lt/olgt lt/bodygtlt/htmlgt
ltH1gt spans the length of page
ltIgt spans only the html element
7
Adding Padding
Padding specifies the area from the HTML element
to the border

• You can specify
• padding-top, padding-bottom
• padding-left, padding-right

ltHTMLgtltHEADgt ltSTYLE TYPE"text/css"gt h1
background teal padding-top 36 px
padding-bottom 36 px padding-left 36 px
padding-right 36 px i background blue
padding-top 36 px lt/stylegt ltTITLEgt Padding
Example lt/TITLEgt lt/HEADgtltBODYgt ltPgt lth1gt 3 ways
lt/h1gt There are 3 ways to define style
sheets ltolgt ltligt ltigtInline styles.lt/igt These are
aadded to the HTML tags ltligt ltbgt Internal
stylesheets lt/bgt defined at beginning of
document.lt/divgt ltligt ltbgt External
stylesheetslt/bgt defined in ltigtan external
filelt/igt. lt/olgt lt/bodygtlt/htmlgt
Note Can specify equal padding all around
element with padding 12px
8
Adding Padding

• You can also specify
• padding alone for equal spacing around element

ltHTMLgtltHEADgt ltSTYLE TYPE"text/css"gt h4
padding 10 background blue lt/stylegt ltTITLEgt
Padding Example lt/TITLEgt lt/HEADgtltBODYgt ltPgt There
are 3 ways to define style sheets lth4gtInline
styles. These are added to the HTML tags
lt/h4gt lt/bodygtlt/htmlgt
Here 10 guarantees a minimum of 10 of available
window for element.
9
Using Margin

• Margin the location of element outside of it

Can be specified in or absolute value.
ltHTMLgtltHEADgt ltSTYLE TYPE"text/css"gt h4
margin-left 10 background blue h3
margin-left 5 background green h3.left
margin-left 0 background red h3.both
margin-left 10 background pink
padding-left 10 lt/stylegt ltTITLEgt Padding
Example lt/TITLEgt lt/HEADgtltBODYgt ltPgt There are 3
ways to use style sheets lth4gtInline styles.
These are added to the HTML tags
lt/h4gt lth3gtEmbedded styles - Style information at
toplt/h3gt lth3 classleftgtExternal styles - The are
external files lt/h3gt lth3 classbothgtThis
specifies both padding and margin
lt/h3gt lt/bodygtlt/htmlgt
This shows differences of margin left and padding
left
10
Using Border

• Border appearance of line around box

ltHTMLgtltHEADgt ltSTYLE TYPE"text/css"gt h4
margin-left 10 background blue border
solid h3 margin-left 5 background green
borderoutset h3.left margin-left 0
background red border dotted h3.both
margin-left 10 background pink padding-left
10 borderdashed lt/stylegt ltTITLEgt Padding
Example lt/TITLEgt lt/HEADgtltBODYgt ltPgt There are 3
ways to use style sheets lth4gtInline styles.
These are added to the HTML tags
lt/h4gt lth3gtEmbedded styles - Style information at
toplt/h3gt lth3 classleftgtExternal styles - The are
external files lt/h3gt lth3 classbothgtThis
specifies both padding and margin
lt/h3gt lt/bodygtlt/htmlgt
Other borders include none, ridge, groove,
inset, double
11
What we are talking about

• We will look at
• Quick CSS review
• Creating Boxes
• Padding
• Margin
• Border
• Positioning
• Creating Call-out box
• Using Two Column Output
• Using Float
• - Floating images
• - Float Left
• - Float Right
• A Large Layout Example.. .
• A Little More On Navigation Buttons

12
Positioning Elements
Competency Alert You need to know this!

• Position refers to where the element is placed
  WITHIN THE CURRENT block
• The upper left-hand corner is position 0,0
• Absolute allows you to specify location

ltHTMLgtltHEADgt ltTITLEgt Padding Example
lt/TITLEgt lt/HEADgtltBODYgt ltdiv class"test"
style"position absolute left 120px top
106px backgroundblue"gt There are 3 ways to use
style sheets Inline styles. These are added to
the HTML tags lt/divgt Embedded styles - Style
information at top! lt/bodygtlt/htmlgt
Specify a left location and top location
13
What we are talking about

• We will look at
• Quick CSS review
• Creating Boxes
• Padding
• Margin
• Border
• Positioning
• Creating Call-out box
• Using Two Column Output
• Using Float
• - Floating images
• - Float Left
• - Float Right
• A Large Layout Example.. .
• A Little More On Navigation Buttons

14
Creating a Call-out box
lthtmlgt ltheadgt ltstylegt body margin 0px 0px 0px
0px padding 0px 0px 0px 0px font-family
verdana, arial, helvetica, sans-serif color
ccc background-color 333 text-align
center content width 400px padding
10px margin-top 20px margin-bottom
20px margin-right auto margin-left auto
background 666 border 5px solid
ccc text-alignleft width
370px lt/stylegt ltdiv idcontentgt Announcing
Hammers at 50 Off! lt/divgt lt/bodygt
Will treat entire box as text and centers it.
Box width, with padding.
Align text left in box
15
Creating a simple 2 column layout
ltHTMLgtltHEADgt ltSTYLE TYPE"text/css"gt .top
margin 10PX padding 5 background
yellow height 100px .left position
absolute left 10px top 170px
width 48 .right position absolute
right 10px top 170px width
48 lt/stylegt ltTITLEgt 2-column Example
lt/TITLEgt lt/HEADgtltBODYgt ltdiv classtopgt Ladies
and gentlemen. Here is the news about
CSS lt/divgt ltdiv classrightgt This is an article
about content. You see on the web content rules.
Why will people both to visit? Is your content
fresh? lt/divgt ltdiv classleftgt This is a left
content. You see on the web content rules. Why
will people both to visit? Is your content
fresh? lt/divgt
Define each block location and then just use the
class
Competency Alert You need to know this!
16
What we are talking about

• We will look at
• Quick CSS review
• Creating Boxes
• Padding
• Margin
• Border
• Positioning
• Creating Call-out box
• Using Two Column Output
• Using Float
• - Floating images
• - Float Left
• - Float Right
• A Large Layout Example.. .
• A Little More On Navigation Buttons

17
To Float or Not to Float . . .

• Use float for elements that can vary in exact
  placement.
• Can specify a box to float to left side or right.
  

Box floats left, and the text wraps.
No float.
18
Floating images
ltHTMLgtltHEADgt ltSTYLE TYPE"text/css"gt img
float right lt/STYLEgt ltTITLEgtA Simple
Layoutlt/TITLEgt lt/HEADgtltBODYgt ltimg
srchomer.gifgt Here is an example of a layout
with and without float. Using float with
images is particurally important. It helps to
layout things. Without using the CSS float
property, things don't look quite right. There
used to be a way to do this within HTML, thought
the align tags are depreciated now. Anyway I am
just checking to see how things look with and
without things. lt/bodygt lt/htmlgt
Here used float right instead of left
Here moved image tag a couple lines down to show
how text wraps at top too.
19
Float can be useful for boxes

• Use float for elements that can vary in exact
  placement.
• Can specify a box to float to left side or right.
  

Box floats left, and the text wraps.
No float.
20
Using Float
ltHTMLgtltHEADgt ltLINK REL"STYLESHEET"
HREF"layout1.css" TYPE"text/css"gt ltTITLEgtA
Simple Layoutlt/TITLEgt lt/HEADgtltBODYgt lth1
class"float-left"gt Using the CSS Float for
Layout. lt/h1gt ltp class"top"gt The ltbgt CSS Float
lt/Bgt attribute can be used, for layout of boxes.
It shows how to create simple layout that is
clean and different than what you do with
tables.lt/pgt ltdiv class"content"gt This area here
would be the main section where I would have lots
of valuable content. For score and seven years
ago our four fathers ... ltgtp? lt/bodygtlt/htmlgt
21
Float Style
.content margin 2.5em 3 font 1em
Georgia, Palatino, Serif padding 1.5em
border 8px groove c0c0c0 background
f5f5f5 h1.float-left float left
width 9em margin 0 0.2em 0 0 background
eee8aa border-right 2px dotted cd853f
border-bottom 2px dotted cd853f border-top
2px dotted cd853f border-left 2px dotted
cd853f p.top margin-top 0 padding
0.2em border-top 3px dotted 696969
background ffffe0 ffffe0
The main content area.
Padding around box. Provide a border type
Create the float left with dotted border on right
and bottom
Margin on right provides a little space to right
of box.
22
Float Right and Drop Down . . .
ltHTMLgtltHEADgt ltLINK REL"STYLESHEET"
HREF"layout2.css" TYPE"text/css"gt ltTITLEgtA
Simple Layoutlt/TITLEgt lt/HEADgtltBODYgt lth2
class"right"gt Here is a simple float right.
lt/h1gt ltp class"default-margin"gt The ltbgt CSS
Float lt/Bgt attribute can be used, for layout of
boxes. It shows how to create simple layout that
is and different than what you do with
tables.lt/pgt ltdiv class"content"gt ltspan
class"drop-cap"gtTlt/spangthis area here would be
the main section where I would have lots of
valuable content. For score and seven years ago
our four fathers .... Notice how the drop T is
used here. lt/pgt lt/bodygt lt/htmlgt
23
Float Right Layout Example . . .
h2.right float right width 5em
margin 0 0 0 0.2em padding-left 0.2em
background c6c6c6 border-left 2px dotted
2e8b57 border-bottom 2px dotted
2e8b57 p.default-margin margin-top
padding 0.4em border-top 3px dotted
696969 background f0fff0 span.drop-cap
float left font-size 1.7em padding
0 0.15em margin 0 0.15em 0 0 background
90ee90 border 3px outset 2e8b57
Allow text to float right.
Create a margin outside box
Add border, background.
Create area for top left text.
Create dotted on top
Create a large font, with a box around the class
text
24
What we are talking about

• We will look at
• Quick CSS review
• Creating Boxes
• Padding
• Margin
• Border
• Positioning
• Creating Call-out box
• Using Two Column Output
• Using Float
• - Floating images
• - Float Left
• - Float Right
• A Large Layout Example.. .
• A Little More On Navigation Buttons

25
A Large Lay Out Example
Competency Alert You need to know this!
ltbodygt ltdiv idtopbox"gt lth1gtHappy Harry's
Hardware Onlinelt/h1gt lt/divgt ltdiv id"left"gt
ltp class"top"gtNavigation links ltbrgt
ltbrgt lta hrefdisney.comgt Disney lt/agt
ltbrgt ltbrgt lta hrefhttp//www.cnn.comgt CNN
lt/agt ltbrgt ltbrgt lta hrefhttp//indelib
le-learning.comgt Indelible Learning lt/agt
lt/pgt lt/divgt ltdiv class"center_box"gt
lth1gtTool Of The Weeklt/h1gt Our tool of the
week is the hammer. You might not realize the
value of the hammer. It can drive nails AND
take them out. The hammer can be used for
many carpenter tasks. lt/divgt ltdiv
class"center_box"gt ltbgt Sales lt/bgt Right
now we have hammers on sale. lta href"" gt
Cick here lt/agt to buy one. lt/divgt ltdiv
id"right"gt ltp class"top"gtOur site is
recommended by ltbgt The Hardware Guy lt/bgt
lt/divgt lt/bodygt
Top part has idtopbox
Idleft for navigation items
Idcenter_box for main content.
Idright for right hand box
26
The layout CSS
lthtmlgt ltheadgt lttitlegtHappy Harry's Hardware
On-line lt/titlegt ltstyle type"text/css"
media"screen"gt body margin0
padding0 font1em georgia, "Book Antiqua",
palatino,serif color000 backgroundfff
height100 h1 font-size24px
font-family helvetica, arial, sans-serif
font-weight bold color 699
background-color transparent margin20px 0
topbox text-align center height
70px background-color c6c6c6 border1px
solid 333 padding0
Default body properties.
Default h1 properties.
Define a top box.
27
The layout CSS
left positionabsolute left0
top90px padding0 width200px
height100 color333 backgroundeaeaea
border1px solid 333 .center_box
position relative top20px
margin-left220px margin-right220px
margin-bottom20px color333
backgroundffc border1px solid 333
padding10px right positionabsolute
right0 top90px padding0
width200px height100 color333
backgroundeaeaea border1px solid 333
Create left box with absolute position, height
100 of window, width 200px.
Create center_box, create margin around it,
position it relative to where it would have been
(20px). Give it margins
Define right box. Position it 200PX wide starting
on right.
28
The layout CSS
Define extra padding for topbox, right and for P
tag, and P within the topbox, right, and left.
topbox p padding10px left p
padding0 10px right p padding0
10px p.top margin-top20px
lt/stylegt
Create center_box, create margin around it,
position it relative to where it would have been
(20px). Give it margins
29
Tables VS CSS For Layouts

• Control CSS offers more precise control.
• Purpose CSS was designed for page style
  including layout. HTML was never designed for a
  layout tool.W3C says Authors should use style
  sheets for layouts and positioning.
  http//www.w3.org/TR/WCAG10-HTML-TECHS/tables-lay
  out
• Speed Its much easier to set up and redesign
  layouts with CSS VS tables.

30
What we are talking about

• We will look at
• Quick CSS review
• Creating Boxes
• Padding
• Margin
• Border
• Positioning
• Creating Call-out box
• Using Two Column Output
• Using Float
• - Floating images
• - Float Left
• - Float Right
• A Large Layout Example.. .
• A Little More On Navigation Buttons

31
Creating Navigation From CSS
ltTITLEgt 2-column Example lt/TITLEgtlt/HEADgtlt
BODYgt lthtmlgt ltheadgt lttitlegt A Sample menu
lt/titlegt lt/headgt ltbodygt lth1gtTable
Menuslt/h1gt ltpgtHere is a simple roll-over
navigation technique using CSS ltcode
class"centre"gt lttable id"tablemenu" border2
cellspacing"2" gt lttrgt lttdgtlta href""gtfirst
linklt/agtlt/tdgt lttdgtlta href""gtsecond
link!lt/agtlt/tdgt lttdgtlta href""gtthird
linklt/agtlt/tdgt lt/trgt lt/tablegt
As you put your cursor over an item, it
capitalizes and background changes.
Use idtablemenu to define TD elements. Rest of
table made as normal
32
Creating Navigation From CSS
ltltHTMLgtltHEADgt ltSTYLE TYPE"text/css"gt tablemenu
width 100 margin 0 auto
border-collapsecollapse table-layoutfixed
background-color66CCFF td width25
text-align center padding8px a
text-decorationnone displayblock
font 14px Arial, sans-serif
font-weightbold aactive color
6633FF background-color66CCFF
ahover color 6600FF
background-color66FFFF font-variantsmall-ca
ps lt/stylegt
Define tablemenu ID
Center table elements, make 25 of screen
Make active link background color
As you put your cursor over an item, it
capitalizes and background changes.
Make hover background and change caps
33
Summary

• We will look at
• Quick CSS review
• Creating Boxes
• Padding
• Margin
• Border
• Positioning
• Creating Call-out box
• Using Two Column Output
• Using Float
• - Floating images
• - Float Left
• - Float Right
• A Large Layout Example.. .
• A Little More On Navigation Buttons

34
Hands on Assignment

• Alter the 2 column layout

ltHTMLgtltHEADgt ltSTYLE TYPE"text/css"gt .top
margin 10PX padding 5 background
yellow height 100px .left position
absolute left 10px top 170px
width 48 .right position absolute
right 10px top 170px width
48 lt/stylegt ltTITLEgt 2-column Example
lt/TITLEgt lt/HEADgtltBODYgt ltdiv classtopgt Ladies
and gentlemen. Here is the news about
CSS lt/divgt ltdiv classrightgt This is an article
about content. You see on the web content rules.
Why will people both to visit? Is your content
fresh? lt/divgt ltdiv classleftgt This is a left
content. You see on the web content rules. Why
will people both to visit? Is your content
fresh? lt/divgt
Change this code from this display to this display
Box is 400 Px wide and centered
Border and 50 each
35
One possible Solution
ltHTMLgtltHEADgt ltSTYLE TYPE"text/css"gt .align
text-align center .top margin 10PX
padding 5 background yellow height
100px text-alignleft width 400px
font-size 22pt .left position
absolute left 10px top 170px
width 50 border solid .right
position absolute right 10px top
170px width 50 border
dotted lt/stylegt ltTITLEgt 2-column Example
lt/TITLEgt lt/HEADgt
ltBODYgt ltdiv classaligngt ltdiv classtopgt
Announcing . . . lt/divgt lt/divgt ltdiv
classrightgt This is an article about content.
You see on the web content rules. Why will people
both to visit? Is your content fresh?
lt/divgt ltdiv classleftgt This is a left content.
You see on the web content rules. Why will people
both to visit? Is your content fresh? lt/divgt
36
Another Exercise . . .

• Change the layout again to look like the
  following

100
80
20
37
One Possible Solution
HTMLgtltHEADgt ltSTYLE TYPE"text/css"gt .align
text-align center .top margin 10PX
padding 0 background yellow height
100px text-alignleft width 100
font-size 22pt .left position
absolute left 10px top 170px
width 80 length 100 border
solid .right position absolute
right 10px top 170px width 15
border solid lt/stylegt ltTITLEgt 2-column
Example lt/TITLEgt lt/HEADgt
ltBODYgt ltdiv classaligngt ltdiv classtopgt
Announcing . . . lt/divgt lt/divgt ltdiv
classrightgt This is an article about content.
You see on the web content rules. Why will people
both to visit? Is your content fresh?
lt/divgt ltdiv classleftgt This is a left content.
You see on the web content rules. Why will people
both to visit? Is your content fresh? lt/divgt