Cascading Style Sheets

1
Cascading Style Sheets
http//www.w3.org/Style/CSS/
2
Example of HTML

• lt!DOCTYPE html PUBLIC "-//W3C//DTD HTML
  4.01//EN"gt
• lthtmlgt ltheadgt lttitlegtMy first Web sitelt/titlegt
  lt/headgt
• ltbodygt
• lt!-- Site navigation menu --gt
• ltulgt
• ltligtlta href"index.html"gtHome pagelt/agt
• ltligtlta href"musings.html"gtMusingslt/agt
• ltligtlta href"town.html"gtMy townlt/agt
• ltligtlta href"links.html"gtLinkslt/agt
• lt/ulgt
• lt!-- Main content --gt
• lth1gtMy first styled pagelt/h1gt
• ltpgtWelcome to my first page!
• lt/bodygt
• lt/htmlgt

3
Result
4
Adding color

• lt!DOCTYPE html PUBLIC "-//W3C//DTD HTML
  4.01//EN"gt
• lthtmlgt
• ltheadgt
• lttitlegtMy first web pagelt/titlegt
• ltstyle type"text/css"gt
• body
• color purple
• background-color d8da3d
• lt/stylegt
• lt/headgt
• ltbodygt

5
Result
6
Style sheet

• Style sheets in CSS are made up of rules. Each
  rule has three parts
• the selector (in the example body), which
  tells the browser which part of the document is
  affected by the rule
• the property (in the example, 'color' and
  'background-color' are both properties), which
  specifies what aspect of the layout is being set
  
• and the value ('purple' and 'd8da3d'), which
  gives the value for the style property.

7
Look at the example again

• ltstyle type"text/css"gt
• body
• color purple
• background-color d8da3d
• lt/stylegt

SELECTOR
value
property
8
Style sheets

• Creating a style
• Applying styles in HTML files

9
Style sheets

• Creating a style
• Applying styles in HTML files

10
Creating a Style rule

• Step 1 Determine Selector (which identifies the
  elements you wish to format). Put next to it
• Example h1
• Step 2 Determine property value in which
  property is the name of CSS property that applies
  this format and value is one of valid options for
  that property
• Example colorred
• Step 3 Combine the results of step 1 and step 2
  and put at the end.
• If you have more than one property value pairs,
  use semicolon () to separate them.
• Example h1colorred

11
Creating a selector

• The type or name of elements
• For instance body, paragraph
• The context in which the element is found
• For instance paragraphs in the middle of the
  web page
• The class or id of an element
• For instance the name of a paragraph in a web
  page.

12
Examples

• For the type or name of elements
• h2 colorred
• h1 color purple
• The context in which the element is found
• divgaudi p colorred
• The class or id of an element
• divgaudi colorred

13
DIV tag

• The ltdivgt tag defines logical divisions in a Web
  page.
• determines the alignment of that section of the
  page.
• defines the style of whole sections of HTML.
• names certain sections of your documents so that
  you can affect them with style sheets or Dynamic
  HTML
• Syntax
• ltdiv alignltleftgtltcentergtltrightgtltjustifygt
• id namegt
• lt! this is a body of the div tag ?
• lt/divgt

14
Example for DIV tag

• ltdiv id"gaudi" align"center"gt
• ltpgtMany tourists are drawn to Barcelona to see
  Antoni Gaud's incredible architecture. lt/pgt
• ltpgtBarcelona lta href"http//www.gaudi2002.bcn.es
  /english/flash/home/GO.htm"gtcelebrateslt/agt the
  150th anniversary of Gaud's birth in 2002.lt/pgt
• lt/divgt

15
Example for DIV tag

• Many tourists are drawn to Barcelona to see
  Antoni Gaud's incredible architecture.
• Barcelona celebrates the 150th anniversary of
  Gaud's birth in 2002.

16
Style sheets

• Creating a style
• Applying styles in HTML files

• Putting style sheet in HTML files
• Putting style sheet in a separate file

17
Putting style sheet in HTML files

• ltstyle type"text/css"gt
• lt! This is where you put Style sheet information
  ?
• lt/stylegt

18
Example

• lthtmlgt ltheadgt
• lttitlegtAntoni Gaud - Introductionlt/titlegt
• ltstylegt
• h1 color purple
• lt/stylegt
• lt/headgt
• ltbodygt
• lth1gtAntoni Gaudlt/h1gt
• ltdiv id"gaudi" align"justify"gt
• ltpgtMany tourists are drawn to Barcelona to see
  Antoni Gaud's incredible architecture. lt/pgt
• lt/divgt
• lt/bodygt
• lt/htmlgt

Style sheet in HTML file
Style affects this h1 tag
19
Result
20
Putting the style sheet in a separate file

• Step 1 Open a new text file
• Step 2 Cut and paste the content inside ltstylegt
  lt/stylegt tags (except the tag)
• Step 3 Save in the same folder with HTML file
  with the extension .css (e.g mystyle.css)
• Step 4Replace ltstylegt and lt/stylegt tag with
• ltlink rel"stylesheet href"mystyle.css"gt

21
Example

• lthtmlgt ltheadgt
• lttitlegtAntoni Gaud - Introductionlt/titlegt
• ltlink rel"stylesheet" type"text/css"
  media"screen" href"descendant.css" /gt
• lt/headgt
• ltbodygt
• lth1gtAntoni Gaudlt/h1gt
• ltdiv id"gaudi" align"justify"gt
• ltpgtMany tourists are drawn to Barcelona to see
  Antoni Gaud's incredible architecture. lt/pgt
• lt/divgt
• lt/bodygt
• lt/htmlgt

22
Example of descendant.css

• h1 colorpurple

23
Adding fonts

• body
• font-family Georgia, Times New Roman,
• Times, serif
• color purple
• background-color d8da3d
• h1
• font-family Helvetica, Geneva, Arial,
• SunSans-Regular, sans-serif

24
Adding fonts
25
More about fonts

• Font family
• font-family Georgia, Times New Roman, Times,
  serif
• Font size
• font-size20px
• Font type bold, italic
• font-style italic
• Font color
• colorcc00ff

26
Example for font styles

• Choosing Font Family
• Choosing Italic
• Choosing Text color

27
Practice

• 1. Cut and paste (or type) the following
  codelthtmlgt ltheadgt
• lttitlegt Styled Page lt/titlegt
• ltlink rel"stylesheet" type"text/css"
  media"screen" hrefstyle.css" /gt
• lt/headgt
• ltbodygt
• lt! Please insert your HTML code here --gt
• lt/bodygt
• lt/htmlgt

28
Practice

• 2. Open a new file in TextPad and create style
  sheet rules
• - text color purple for the entire web page
• - background color d8da3d for entire web page
• - color red, font Times New Roman, size20px and
  bold style for H1 tag
• - font Arial, size 12px for normal paragraph
• Save this file as style.css (in the same
  directory where you save your html file

29
Practice

• Insert the HTML code so that it creates the
  following web page

The text doesnt have to be the same but you
should at least have a title and two paragraphs
30
Style.css

• body
• color purple
• background-color d8da3d
• h1
• color red font-family Times New Roman
  font-size 20px font-style bold
• p
• font-family Arial font-size 12px

31
Style.html

• lthtmlgt
• ltheadgt
• lttitlegtMy first web pagelt/titlegt
• ltlink rel"stylesheet" type"text/css"
  media"screen" href"style.css"/gt
• lt/headgt
• ltbodygt
• ltcentergt lth1gt Antoni Gaudí lt/h1gt lt/centergt
• ltpgt Gaudí's non-conformity, already visible in
  his teenage years, coupled with his quiet but
  firm devotion to the church, made a unique
  foundation for his thoughts and ideas.
• lt/bodygt
• lt/htmlgt

32
Elements in HTML file

• Are like labels that identify and structure
  different parts of a Web page
• Example header, paragraph, division, table
• Elements can contain other elements

33
Layout with style

• Block vs. Inline
• Box model
• Positioning a box
• Changing padding, border, margin, size, alignment
  and color

34
Block vs Inline

• An element of a web site can be block or inline
• If it is a block level, it will always be
  displayed on a new line
• Example
• ltpgt This element is at block level lt/pgt
• If it is an inline level, it will always be
  displayed in the current line
• ltpgt
• This is a ltemgt inline element lt/emgt
• lt/pgt

35
Box model

• A web site can be treated as if every element is
  contained in an invisible box
• Content area
• Space surrounding that area (padding)
• Border
• Margin
• Four basic ways to position element box
• Static leave the box in the flow
• Absolute specify its exact coordinates with
  respect to its parent (which is the element
  contains the current element)
• Fixed specify its exact coordinates with respect
  to the browser windows
• Relative move the box with respect to its
  default position in the flow

36
Changing from inline to block and vice versa

• Rule ltselectorgt displayblock
• Example navigation a displayblock
• Results
• Rule ltselectorgt displayinline

37
Positioning Elements Absolutely

• Rule
• ltselectorgt positionabsolute topltvaluegt
  left ltvaluegt bottomltvaluegt rightltvaluegt
• ltvaluegt is the offset between this element and
  its parent element
• Example

38
Affixing an element to the Browser Window

• Rule
• ltselectorgt positionfixed topltvaluegt
  left ltvaluegt bottomltvaluegt rightltvaluegt
• ltvaluegt is the distance between this element and
  the edge of the browser windows
• Example
• Note IE 6 does not support this

39
Changing the Background

• Rule ltselectorgt background-colorltcolor value
  or color namegt
• Or
• ltselectorgt background-color transparent
• Example

40
Changing the Foreground

• Rule ltselectorgt colorltcolor value or color
  namegt
• Or
• ltselectorgt background-color transparent
• Example

41
Changing the Border

• Rule ltselectorgt
• border-stylelttypegt
• Border-width ltngt
• Border-color ltcolorgt
• Border-top ltvaluegt
• Border-rightltvaluegt
• Border-left ltvaluegt
• Border-bottom ltvaluegt
• type none, dotted, dashed, solid, double
• n desired width (E.g 4px)
• value width (e.g 2px)
• Example

42
Changing the Margin

• Rule ltselectorgt
• margin x
• X desired space to be added expressed as a
  length, or a percentage of the width of the
  parent element or auto
• Example

43
Adding Padding around element

• Rule ltselectorgt
• padding x
• X desired space to be added expressed as a
  length, or a percentage of the width of the
  parent element
• Example

44
Example of HTML again

• lt!DOCTYPE html PUBLIC "-//W3C//DTD HTML
  4.01//EN"gt
• lthtmlgt ltheadgt lttitlegtMy first Web sitelt/titlegt
  lt/headgt
• ltbodygt
• lt!-- Site navigation menu --gt
• ltulgt
• ltligtlta href"index.html"gtHome pagelt/agt
• ltligtlta href"musings.html"gtMusingslt/agt
• ltligtlta href"town.html"gtMy townlt/agt
• ltligtlta href"links.html"gtLinkslt/agt
• lt/ulgt
• lt!-- Main content --gt
• lth1gtMy first styled pagelt/h1gt
• ltpgtWelcome to my first page!
• lt/bodygt
• lt/htmlgt

45
Result
46
Adding style for navigation bar (navigation.css)

• body
• color purple
• background-color d8da3d
• ul.navbar
• list-style-type none
• padding 0
• margin 0
• position absolute
• top 2em
• left 1em
• width 9em

Em equals to the elements font size. 2em
equals to twice the font size
47
Adding style for navigation bar (navigation.css)

• ul.navbar li
• background white
• margin 0.5em 0
• padding 0.3em
• border-right 1em solid black
• ul.navbar a
• text-decoration none
• font-familyArial
• font-size18px
• alink
• color blue
• avisited
• color purple

48
Using navigation bar

• lthtmlgt ltheadgt lttitlegtMy first Web sitelt/titlegt
• ltlink rel"stylesheet" type"text/css"
  media"screen" href"navigation.css"/gt
• lt/headgt
• ltbodygt
• lt!-- Site navigation menu --gt
• ltul class navbargt
• ltligtlta href"index.html"gtHome pagelt/agt
• ltligtlta href"musings.html"gtMusingslt/agt
• ltligtlta href"town.html"gtMy townlt/agt
• ltligtlta href"links.html"gtLinkslt/agt
• lt/ulgt
• lt!-- Main content --gt
• ltcentergt lth1gtMy first styled pagelt/h1gt lt/centergt
• lt/bodygt
• lt/htmlgt

49
Results
50
Practice

• 1. Cut and paste (or type) the following
  codelthtmlgt ltheadgt
• lttitlegt Styled Page lt/titlegt
• ltlink rel"stylesheet" type"text/css"
  media"screen" hrefstyle.css" /gt
• lt/headgt
• ltbodygt
• lt! Please insert your HTML code here --gt
• lt/bodygt
• lt/htmlgt

51
Practice

• 2. Open a new file in TextPad and create style
  sheet rules for
• - text color purple for the entire web page and
  background color d8da3d for entire web page
• - unorderlist navbar with top2em, left4em,
  width25em
• - for items in unorderlistnavbar with white
  background, border-right 1em solid black
  display inline
• - for links in navigation bar navbar font
  Arial, size 18px, no text decoration
• - color of a link in this web page blue
• - color of a visited link purple
• - h1 heading positionabsolute and left
  alignment with top margin 2em
• Save this file as style.css (in the same
  directory where you save your html file
• (Look at the css code that we have learned)

52
Practice

• Insert the HTML code so that it creates the
  following web page

53
CSS file (navigation.css)

• body
• color purple
• background-color d8da3d
• ul.navbar
• list-style-type none
• padding 0
• margin 0
• position absolute
• top 2em
• left 4em
• width 25em

54
CSS file (navigation.css)

• ul.navbar li
• background white
• margin 0.5em 0
• padding 0.3em
• border-right 1em solid black
• display inline
• ul.navbar a
• text-decoration none
• font-familyArial
• font-size18px
• alink
• color blue
• avisited
• color purple
• h1
• positionabsolute
• text-alignleft

55
HTML code

• lthtmlgt ltheadgt lttitlegtMy first Web sitelt/titlegt
• ltlink rel"stylesheet" type"text/css"
  media"screen" href"navigation.css"/gt
• lt/headgt
• ltbodygt
• lt!-- Site navigation menu --gt
• ltul class"navbar"gt
• ltligtlta href"index.html"gtHome lt/agt
• ltligtlta href"hobby.html"gtResumelt/agt
• ltligtlta href"hobby.html"gtHobbylt/agt
• ltligtlta href"links.html"gtLinkslt/agt
• lt/ulgt
• lt!-- Main content --gt
• lth1gtWelcome to my personal web pagelt/h1gt
• lt/bodygt
• lt/htmlgt

56
Images

• Creating Web images
• Adobe Photoshop
• Photoshop Elements
• Paint Shop Pro

57
Images on the Web

• Format
• Color
• Size and Resolution
• Speed
• Transparency
• Animation

58
Format

• The format of an image on the Web should be
  recognizable by Macs, Unix, Windows based OS
• GIF (Graphic Interchange Format)
• widely supported image-storage format promoted
  by CompuServe. Resolution is limited to 8-bits,
  or 256 colors.
• JPEG (Joint Photographic Experts Group )
• 24 bits. the compression scheme sacrifices some
  image quality in exchange for a reduction in the
  file's size.
• PNG (Portable Network Graphics).
• A compressed image file format similar to JPEG

59
Color

• 24 bits
• 16 bits
• 8 bits
• Browsers can mix two colors to produce the
  missing color or can shift the missing color to
  the one in the current set

60
Other factors

• Size and resolution
• Images will be displayed depending on each
  monitors resolution
• Recommend to keep a page lt 600 pixels
• More pixels always translate to a bigger size
  image
• Speed
• Keep the size of an image smaller
• Compress the image

61
Getting image

• Using search engines to find images
• Buy images on CD
• Buy a digital camera

62
Using images

• Inserting images on a page
• ltimg srcfile name or URL widthx heighty
  /gt
• Example
• ltcentergt
• lth1gt Welcome to My Web sitelt/h1gt
• ltimg src"autumn.jpg" width "500" height"400"
  /gt
• ltpgt Autumn in Wisconsin lt/pgt lt/centergt

63
Result
64
Alternate Text

• If the images does not appear for some reasons,
  the text will appear
• Example
• ltimg src"autumn.jpg" width "500" height"400"
  alt Picture of Foliage in Wisconsin/gt

65
Result
66
Specifying size for Speedier Viewing

• Find the size of an image
• Right click the image
• Choose Properties or Get Image Info
• Link a thumbnail to a larger image
• ltA HREF"autumn.jpg"gt
• ltimg src"autumn_little.jpg" alt "Picture of
  Foliage in Wisconsin" /gt lt/agt
• ltpgt Autumn in Wisconsin lt/pgt lt/centergt

67
Result
68
Result
69
Making Images Float

• ltimg src"Castle.jpg" align"left" alt"Edinburgh
  Castle in Scotland" width"500" height"480" /gt
• ltpgt Edinburgh Castle in Scotland. Edinburgh
  Castle dominates the city of Edinburgh like no
  other castle in Scotland , and Edinburgh Castle
  is unequalled in the whole of the British Isles .
  Over one thousand years of history sit on top of
  the famous Edinburgh rock and it is easy to see
  why over a million visitors a year visit
  Edinburgh Castle .
• When you come and visit Edinburgh Castle you
  will see why the early inhabitants of the area we
  now call Edinburgh , made their first settlements
  here, in what is now the city of Edinburgh .
  People have always sought a safe refuge, and the
  volcanic rock that forms the base of Edinburgh
  Castle , has always afforded the ultimate safe
  and defensive position in Edinburgh
• lt/pgt

70
Making Images Float
71
Adding Space around an Image

• ltimg src"Castle.jpg" align"left" alt"Edinburgh
  Castle in Scotland" width"500" height"480
• vspace32 hspace"20" /gt

72
Adding Space around an Image
73
Adding Horizontal Rules

• lthr size"10" width"80" align"center"
  noshade"noshade" /gt

74
Adding Horizontal Rules
75
Practice
76
Practice

• 1. Open TextPad, cut and paste (or type) the
  following codelthtmlgt ltheadgt
• lttitlegt Image page /titlegt
• lt/headgt
• ltbodygt
• lt! Please insert your HTML code here --gt
• lt/bodygt
• lt/htmlgt
• And save it as image.html

77
Practice

• 2. Use Google (or any search engine that supports
  image searching) at www.google.com. Click on
  images. Type in the keywords of the image that
  you are looking for.
• 3. Modify the image.html file by adding html code
  to display that picture and the description of
  the picture.