DHTML: CSS

1
DHTML CSS

Source Dr. Soe modified Dr. Preiser
2
What is Dynamic (D)HTML?

• aka HTML on-the-fly Create HMTL pages
  dynamically
• Three building blocks of DHTML
• HTML
• CSS - Cascading Style Sheets
• JavaScript
• Extensions of HTML from W3C during the mid-late
  90s
• only 4.0 or higher browsers
• Inline style
• http//www.csupomona.edu/lpreiser/courses/cis311/
  examples/inlinestyle.htm

3
With CSS You Can

• Create CSS styles for
• text
• layout of pages, regions of pages, colors
• Control Positioning of Objects
• Stack Layers with content (z-index)
• Animate Objects on Layers
• CSS Internal or External to HTML document
• Internal CSS stylesheets apply to a single page
• http//www.csupomona.edu/lpreiser/courses/cis311/
  examples/internalstyle.htm
• External CSS stylesheets can be applied to
  multiple pages have .css file extension (
• One HTML page can use multiple CSS stylesheets

4
Who decides CSS standards?

• W3C.org of course working on css3
• http//www.w3.org/pub/WWW/TR/WD-css1.html
• http//www.w3.org/TR/REC-CSS2/
• CSS2 supports media-specific style sheets
• tailor presentation of documents to visual
  browsers, aural devices, printers, Braille
  devices, handheld devices, etc.
• supports content positioning, downloadable fonts,
  table layout, features for internationalization,
  automatic counters numbering, some properties
  related to user interface
• Now working on CSS for other media
• CSS2 Print Profile for printing on low-cost
  devices from mobile devices
• CSS3 Paged Media Module for mobile devices

5
CSS help on-line

• CSS Validator http//jigsaw.w3.org/css-validator/
  
• WebReview.com's Style Sheet Reference Guide
• http//www.ddj.com/webreview/style/?temp8toBMtsFQ
  X
• Integrated Web Design CSS Beyond the Retrofit
• http//www.informit.com/isapi/product_id7B2264FA
  CA-D814-420F-83BD-AE84BB7FE6447D/content/index.as
  p

6
Benefits of Style Sheets

• Useful as a design tool.
• Make website more flexible
• CSS reusable
• Change stylesheet to change design of many pages
• Easier to maintain and modify.
• Separates styles from HTML tags and page content
• More aesthetically interesting.
• Consistent look.

7
Style Sheets give greater text control

• Can specify many parameters relating to the page
  layout
• Text size Backgrounds
• Text spacing Borders
• Text font type Margins
• Text color printing
• Then you can apply the style to many pages by
  reapplying it (copy/paste) or calling it (link).
  
• Enhances consistency of Web site change style
  sheet, changes display of pages.

8
Two approaches

• Modify the attributes of existing tags
• this instance is inline only changes 1
  paragraph can also be embedded and change all
  instances of paragraphs
• ltp style"color0000ff font-size72pt
  font-family'Arial'"gt
• http//www.csupomona.edu/lpreiser/courses/cis311/
  examples/inlinestyle.htm
• Define universal classes that can be applied to
  multiple tags
• For example lth1gt, lth2gt, lth3gt, etc.

9
Styles Universal Classes

• Universal Classes are declared in ltheadgt tags or
  external stylesheets
• http//www.csupomona.edu/lpreiser/courses/cis311/
  examples/internalCSS.htm
• Definitions have a . Before name .bigblue
• Can be applied selectively within tags by
• ltp classbigbluegt or lth1 classbigbluegt
• http//www.csupomona.edu/lpreiser/courses/cis311/
  examples/exclassID.htm
• http//www.csupomona.edu/lpreiser/courses/cis311/
  examples/css.htm

10
Three ways to Use Styles

• Inline - in a specific HTML line of code,
  indicate a style attribute.
• Applies only to that one line of code
• http//www.csupomona.edu/lpreiser/courses/cis311/
  examples/inlinestyle.htm
• Internal, Embedded, Global defined in the
  header of a document
• Modified HTML tags lth1gt apply to all instances of
  that tag in document
• Class tags can be applied to specific instances
  of tags and are not limited to one type of tag
  (lth1gt, lth2gt)
• http//www.csupomona.edu/lpreiser/courses/cis311/
  examples/internalCSS.htm
• Linked or External an external style sheet
  (.css)
• both HTML Class tags
• called using a link tag
• can be called by multiple documents
• http//www.csupomona.edu/lpreiser/courses/cis311/
  examples/exportedCSSapplied.htm

11
In Line Styles inlinestyle.htm

• Syntax for inline style
• lttag stylestyle declarationsgt
• tag is the name of the tag (h1, h2, etc)
• style declarations are styles enclosed within
  double quotation marks
• ltp style"color0000ff font-size72pt
  font-family'Arial'"gtlarge blue textlt/pgt
• disadvantages only applies to 1 line of HTML,
  has to be changed manually

12
Style Rules have 2 parts Selectors and
Declarations

• Style declaration within the ltstylegt tags obey
  the following syntax
• selector attribute1value1 attribute2value2
  ...
• selector identifies an element in your document,
  such as a heading or paragraph
• attributes values within the curly braces
  indicate styles applied to all occurrences of
  that element
• this collection of attributes and values is also
  referred to as the declaration of the selector

13
Selectors and Declarations

• For example, to display all lth1gt headings in the
  HTML document using a red sans-serif font, use
  the following embedded style
• ltstylegt
• h1 color ff0000 font-family sans-serif
• lt/stylegt
• h1 is the selector
• the text enclosed in the braces is the declaration

14
Grouping Selectors

• apply the same declaration to a group of
  selectors by including all of the selector names
  separated by commas.
• The following is a sample style declaration to
  format all headings in red sans-serif font
• ltstylegt
• h1, h2, h3, h4, h5, h6 colorff0000
  font-familysans-serif
• lt/stylegt

15
Internal Stylesheet

• Placed in the document ltheadgt tags. Style is
  applied to entire document.
• Modify attributes of an existing tag lth1gt or
• Set up a style in the ltheadgt of html document
  using a class name.
• Call the class to format specific tags in the
  HTML document
• not applied to ALL lth1gt tags, but only the ones
  you select.

16

• ltstyle typetext.cssgt
• h1
• font-size72pt
• color0000ff
• font-familyArial
• h2
• colorff0000
• font-family"Comic Sans MS"
• font-size14px
• text-decorationunderline
• lt/stylegtlt/head

• ltbodygt
• lth1gt bigblue doglt/h1gt
• lth2gtsmall red catlt/h2gt
• lt/bodygt
• internalHTMLstyles.htm

17
internalHTMLstyles.htm

• http//www.csupomona.edu/lpreiser/courses/cis311/
  examples/internalHTMLstyles.htm
• attributes of lth1gt and lth2gt tags changed in
  ltstylegt tags
• Every instance of lth1gt and lth2gt tags display
  these attributes in the document in which
  stylesheet is embedded
• Syntax
• Style tag inside ltheadgt tags with stylesheet
  language attributeltstyle typetext.cssgt
• Curly braces around attributevalue sets for tag
• Attribute names are NOT inside quotes
• Semicolons between attributes
• color ffff00 font-family Tahoma, sans-serif
• Class id inside quotes when called lth1
  class"smallred"gt

18
Example Universal Classes internalCSS.html
applied to lth1gt tags in same document

• ltstyle typetext.cssgt
• .bigblue
• font-size 72pt
• color 0000ff
• font-family Arial
• .smallred
• color ff0000
• font-family Comic Sans MS
• font-size 14px
• text-decoration underline

• lt/headgtltbodygt
• lth1 class"bigblue"gtbigblue doglt/h1gt
• lth1 class"smallred"gtsmall red catlt/h1gt
• lt/bodygt

19
External Stylesheets

• If you have styles set up in a document that you
  want to reuse, you can copy and paste them into a
  .css document
• Create separate files containing desired
  stylesthe style sheet.
• Call the style sheet (file.css) from within the
  ltheadgt tag on HTML pages.
• Within a style sheet, you dont need ltstylegt
  tags, just the style declarations.

20
Linking to Style Sheets with the ltlinkgt Tag
syntax

• ltlink hrefURL relrelation_type
  typelink_typegt
• URL is the URL of the linked css document
• relation_type establishes the relationship
  between the linked document and the Web page
  --should be stylesheet
• link_type indicates the language used in the
  linked document -- should be text/css
• link to style sheet cis.css, the ltlinkgt tag
  would be
• ltlink hrefcis.css relstylesheet
  typetext/cssgt
• http//www.csupomona.edu/lpreiser/courses/cis311/
  examples/exportedCSSapplied.htm

21
Linking to Style Sheetswith _at_import

• _at_import command accesses the style sheet
  definitions from another file.
• ltstylegt
• _at_import url(stylesheet.css)
• style declarations
• lt/stylegt
• stylesheet.css is the URL of the style sheet file
• The _at_import command provides greater flexibility
  than the ltlinkgt tag when working with multiple
  style sheets. ( can import multiple embedded
  styles)
• The _at_import command has limited browser support.

22
Resolving Style Precedence

• When styles conflict, precedence order is
• an inline style overrides any embedded style or
  external style sheet
• an embedded style overrides an external style
  sheet
• an external style sheet overrides the internal
  style rules set by the Web browser
• any style attributes left undefined by an inline
  style, an embedded style, or an external style
  sheet are left to the Web browser

23
Changing Styles

• As a change is made to a style at one level
• changes are cascaded through to the other levels
• hence the term, cascading style sheets).
• Where a different font has not been specified,
  changes will cascaded through the embedded and
  inline styles.
• You need to keep track of the inline, embedded,
  and external style sheets to correctly predict
  the impact that style changes have on the
  appearance of each page.

24
Working with Style Inheritance

• Web pages invariably have elements placed within
  other elements.
• for example, a Web page might have a bold tag,
  ltbgt, placed within a paragraph tag, ltpgt, to
  create boldface text within the paragraph.
• The paragraph tag is likewise placed within the
  ltbodygt tag.

25
Sample Tree Structureof HTML Elements
This figure displays the HTML element
relationship using a tree diagram.
26
Required Elements in a Document for CSS to work

• DOCTYPE declarationSGML declares DTD
• SGML (Standard Generalized Markup Language) is
  mother of HTML, XML, etc.
• When browser finds DOCTYPE declaration, it
  switches into standards mode CSS designs work
• HTML is root element for document tree
• Head element should include title element, meta
  tag declaring character set used
• Body element

27
Parent and Descendant Elements

• An element that lies within another element is
  called a descendant or descendant element.
• An element that contains another element is
  called the parent or parent element.
• For example, ltbodygt tag is parent of all of the
  other tags used to format the content of a Web
  page.
• Using the principle of inheritance, styles
  defined for each parent tag are transferred to
  its descendants.

28
Contextual Selectors not supported by all
browsers!

• Use tree structure concept to better control how
  styles are applied to a Web page.
• CSS provides ways to fine-tune context in which
  the selector is applied.
• to apply a style only to the direct descendant of
  a parent element, use syntax e1 gt e2
• el and e2 are names of HTML elements
• e2 is directly below e1 in the hierarchy of
  elements in the document
• for example li b colorblue changes the color
  of bolded text in a line item to blue color

29
Using Font Families

• The font-family attribute chooses a font face for
  use in Web pages.
• CSS works with two types of font faces
• a specific font, such as Arial, Garamond, or
  Times New Roman that is actually installed on a
  users computer.
• a generic font, a general description of a font,
  allowing the operating system to determine which
  installed font best matches it.

30
Generic Fonts

• Serif strokes or serifs finish off top bottom
  of letter Times
• sans-serif no serifs, block letters -- Arial
• Monospace fixed-width fonts courier
• Cursive resembles handwriting not well
  supported - script
• Fantasy decorative, not well supported -
  bauhaus 93

31
Generic and Specific Fonts

• Cant tell which generic font the Web browser
  will use to display your text.
• Whenever possible, use specific fonts.
• Provide Web browser with several font choices
• Browsers that dont have your first choice may
  have your second or third choice available.
• List specific font names first
• followed by a generic font name for the browser
  to use if none of the specific fonts can be
  found.
• font-familyArial, Helvetica,sans-serif

32
Managing Font Size

• Font sizes can be expressed
• as a unit of length
• with a keyword description
• as a percentage of the parent element
• with a keyword expressing the size relative to
  the font size of the parent element

33
Font size as a unit of length Absolute and
Relative Units

• absolute units define font size based on standard
  units of measure
• mm (millimeter) standard metric millimeter
• cm (centimeter)-standard metric centimeter
• in (inch)- standard U.S. inch
• pt (point) standard publishing unit with 72
  points to an inch
• pc (pica) standard publishing unit equal to 12
  points

34
Relative units

• font size relative to size of a standard
  character two standard typesetting characters
• em unit is equal to the width of the capital
  letter M in the browsers default font size
• ex unit is equal to the height of a small x in
  the default font
• px size of a pixel on the current monitor
• (percentage) relative to base font size
• Ex bold letters in paragraph would be 1.5 times
  bigger. p font-size12 pt
• p b font-size150

35
The EM and EX Units
The em unit is more useful for page design,
because 1 em is equal to the browsers default
font size for body text. This is true no matter
what font is being used (unlike the ex unit,
whose size changes based on the font face being
used).
36
The EM and EX Units

• As with absolute units, you can specify
  fractional values for the em and ex units.
• Unlike absolute units, em ex units are scalable
  retain their relative proportions regardless of
  monitor size or resolution.
• If default ltpgt font size 12 pt text
• Font-size2em would create 212 pt text or 2X
  whatever the default font size is, even if it
  changed

37
Specifying Letter Spacing

• To set the space between individual letters, use
  the letter-spacing attribute, w/syntax
• letter-spacing size
• size can have the value
• normal, allows the browser to determine the
  letter spacing based on the font being used
• a number expressed in same measuring units used
  to describe font size (in, mm, cm, etc.)
• h1 letter-spacing6pt
• (note 72 pt per inch)

38
Specify Word Spacing

• change the spacing between individual words with
  the word-spacing attribute, w/syntax
• word-spacing size
• h2 word-spacing 2em
• size is either equal to normal, to allow the
  browser to set the word spacing, or to
• specific length using the standard units of
  measure

39
Line height

• Use the line-height attribute to modify the
  vertical space between lines of text.
• p line-height150

40
Line Height

• To set the line height, use the style
• line-height size
• the standard ratio is 1.2, which means that the
  line height is 1.2 times the font size
• to make paragraphs double-spaced use the style
  definition p line-height 2

41
A Title with a Large Font Size Small Line Height
A common typographic technique is to create
titles with large fonts and small line heights.
This figure shows an example where the line
height is actually smaller than the font size.
This treatment can give the title greater impact
than it would have with more space between the
two lines.
42
Setting Font Styles and Weights

• Font styles are controlled by the font-style
  attribute.
• The font-style attribute has three possible
  values normal, italic, or oblique.
• The italic and oblique styles are similar in
  appearance though there can be small differences
  depending on the font.

43
Font Weight values

• absolute number ranging in intervals of 100,
  from 100 (the lightest) up to 900
• For most fonts, you can assume that
• 400 corresponds to normal text
• 700 can be used for bold text
• a weight of 900 for extra bold text
• Relative values
• Normal, bold, bolder, lighter

44
Aligning Text Horizontallyand Vertically

• Use text-align
• text-align alignment
• alignment can be left, center, right, or justify
• setting the text-align value to justify
  stretches the text, extending it from the left to
  the right margin
• some browsers will ignore the text-align
  attribute value

45
Vertically Align Elements

• CSS allows you to vertically align elements such
  as text and images relative to the surrounding
  text.
• The syntax for setting the vertical alignment is
• vertical-align alignment
• alignment has one of the keyword values

46
Values of Vertical Align Attribute

• -

47
Examples of theVertical Alignment Values
This figure shows an example of each
vertical-align value. Baseline is the default
value for vertical alignment.
48
Indenting Text 1

• CSS allows you to indent first line of a
  paragraph.
• The syntax for creating an indentation is
• text-indent indentation
• text-indent 10
• indentation is either
• the length, in either absolute or relative units,
  of the indentation
• or a percentage of the width of the paragraph

49
Special Text Attributes

• CSS provides three attributes for special text
  effects
• text-decoration
• text-transform
• font-variant

50
Values of the Text-Decoration Attribute 1

• text-decorationunderline
• text-decorationline-through
• text-decorationblink
• h2 b
• vertical-alignsuper
• font-weight700
• text-decorationline-through

51
The Text-Transform Attribute 1

• capitalize the first letter of each word in a
  paragraph text-transformcapitalize
• display the text in all capital letters
• h2 b vertical-alignsuper
• font-weight700
• text-decorationline-through
• text-transform uppercase
• display the text in all lowercase letters
• text-transformlowercase

52
Font-Variant Command 1

• Create small caps --capital letters that are the
  same size as lowercase letters.
• h1
• font-family"Courier New", Courier, mono
• font-size2em
• colorff0000
• font-weight 900
• font-style italic
• border-stylesolid
• border-color66FF99
• letter-spacing6pt
• font-variantsmall-caps

53
The font shortcut property

• The syntax for the font attribute is
• font font-style font-variant font-weight
  font-size/line-height font-family
• font-style, font-variant, etc., are the values
  for font and text style attributes
• The font attribute requires that you specify the
  font size, font variant, and font weight.
• If a font attribute is not included, the browser
  assigns the normal or standard value for the
  element.

54
Font shortcut attribute example 2

• p font bold 18pt/24pt Arial
• is equivalent to
• P font-weightbold
• font-size18pt
• font-height24pt
• font-familyArial

55
The color Attribute 1

• CSS works with most color names supported by
  HTML.
• Another way to specify color in CSS is to use RGB
  color values.
• You can enter the hexadecimal form of the color
  value or the RGB color values directly.
• for example, to change the body text color to
  teal, use any of the following styles
• body colorteal
• body color008080
• body colorrgb(0,128,128)
• body colorrgb(0,50,50

56
Working with Background Color 1

• By default, elements take on the background color
  of their parent element.
• To change the background color of almost any
  element, use the background-color style.

57
Working with Background Images 1, 2

• Almost any element on the page can also be
  displayed with its own background image.
• The background image has four attributes
• the source of the image file
• how the image is repeated in the background
• where the image is placed on the background
• whether the image scrolls with the display window
• syntax
• background-image url(URL)
• URL is the location of the image file

58
Working with Background Images Continued

• By default, background images are tiled both
  horizontally and vertically behind the element
  until the entire element is filled.
• Control the way the tiling occurs using the
  background-repeat style attribute.
• The background-repeat attribute has four possible
  values.

59
2 Values of Background-Repeat Attribute
60
Examples of theBackground-Repeat Values
This figure shows examples of each
background-repeat values.
61
Working with List Styles

• CSS provides more control over the appearance and
  behavior of ordered, unordered, and definition
  lists than does HTML.
• CSS allows you to specify the types of labels
  attached to list items and how to position the
  labels with respect to the label text.
• The list-style-type attribute allows you to
  choose the type of label to display alongside
  text formatted with the ltulgt, ltolgt, or ltligt tags.

62
Values of theList-Style-Type Attribute 2

• Hebrew numbering
• Georgian numbering
• Armenian numbering
• Cjk-ideographic
• Hiragana/Katagana (4)
• Lower-alpha (a, b, c)
• Upper-alpha (A, B, C)
• Lower-greek (lowercase greek)

• Disc (filled circle)
• Circle (hollow circle)
• Square (filled square)
• Decimal (begins w/1, default numbering)
• Decimal-leading-zero (01, 02, 03)
• Lower-roman (i, ii, iii)Upper-roman (I, II, III)

63
Creating a Nested Outline Style 2
Use contextual selectors to create an outline
style for several levels of nested lists. This
figure shows a set of contextual selectors used
to create an outline style for different outline
levels.
64
Formatting Hypertext Links 2

• Hypertext has an additional attribute the
  condition of the hypertext link itself 4
  states
• the links target has already been visited by the
  user
• the links target has never been visited by the
  user
• the link is currently being clicked by the user
• the users mouse pointer is hovering over the link

65
Formatting Hypertext Links Continued

• CSS provides a different selector for each
  condition.
• avisited styles for previously visited targets
• alink styles for targets that have never been
  visited
• aactive styles for links that are currently
  being clicked
• ahover styles when the mouse cursor is hovering
  over the link - this is called a rollover effect
• You can use a variety of CSS attributes to create
  a different style for each condition.
• for example, to change the color of previously
  visited targets to red, use the style
• avisited colorred

66
Creating a Rollover Effect 2
This figure shows the rollover effect.
67
Working with ids and Classes A pseudo-class 2

• classification of element based on status or use.
• in the example of the rollover effect, the status
  was the condition of the hypertext link
• the element itself, hypertext link with pointer
  located over it, is called a pseudo-element
• CSS has additional pseudo-classes, including
• the first-line pseudo-class
• the first-letter pseudo-class
• used for formatting the first line and first
  letter of a block of text, respectively.

68
Applying a Style to a Pseudo-Class 2
This figure shows how to apply a style to a
pseudo-class and what it would like in the
browser.
69
The class Attribute 2

• Many browsers do not support the first-letter and
  first-line pseudo-classes yet.
• The only pseudo-classes widely supported are the
  four hypertext link conditions.
• You can create customized classes by adding the
  class attribute to HTML tags.
• The syntax for creating a class is
• lttag classclass_namegt
• tag is the HTML tag
• class_name is the name of the class

70
Applying a Style to a Pseudo-Class 2
This figure demonstrates creating an inline style
for the h1 heading with the class name First
Header. This technique is useful when you have
multiple Web pages in which you want the first
heading in each page to be formatted in the same
way.
71
The id Attribute 2

• id attribute applies an id to ONE specific
  element in the document.
• The id attribute must be unique there can not be
  more than one tag with the same id value.
• The syntax for creating an id is
• lttag idid_namegt
• tag is the HTML tag
• id_name is an id name assigned to the tag
• The class and id attribute define styles for
  specific content without using inline styles.

72
Working with Container Elements 2

• HTML supports two types of container types
• the ltspangt tag, which is used to contain inline
  elements such as individual letters, words,
  phrases, or inline images
• the ltdivgt tag, which is used to group blocks of
  text such as paragraphs, block quotes, headings,
  or lists. Collectively, these text blocks are
  known as block-level elements

73
Using the ltdivgt Tag
This figure shows an example in which a heading
and a paragraph have been enclosed in a ltdivgt
container. The ltdivgt tag does not actually
format the block-level elements it merely groups
them as a unit. For this reason, the ltdivgt tag
always includes either a class or id attribute
that identifies that group.
74
Using the ltdivgt and ltspangt Tags
This figure shows an example of how the ltspangt
tag can be used to format a selection of text
within a paragraph. A ltdivgt tag is used to
format the entire paragraph. You almost always
include an id or class attribute with the ltspangt
tag.
75
Formatting Block-Level Element Boxes

• control the layout of a Web page by manipulating
  the size and location of block-level elements.
• CSS treats all block-level elements as a group.
• HTML tags that can be treated as block-level
  elements
• lth1gt - lth6gt tags
• ltpgt tag
• ltblockquotegt and ltaddressgt tags
• ltulgt, ltolgt, and ltdlgt list tags
• ltligt, ltdtgt, or ltddgt tags (individual list items)
• ltdivgt tag
• ltbodygt tag
• lthrgt tag
• ltimggt tag

76
Parts of the Block-Level Element Box

• There are three elements
• margin between the box and the parent element
• border of the box
• padding, which is the space between the box
  around the block-level element and the border
• CSS provides attributes you can use to control
  the appearance and behavior of each of these
  elements.

77
Features of the Box Around a Block-Level Element
This figure shows features of the box around a
block-level element.
78
Controlling Margins 2 ltbodygt

• The margin is the space between the block-level
  element and the parent element.
• four attributes that control the margin size
• margin-top - the space between the top of the box
  and the top margin
• margin-right - the space between the right side
  of the box and the right margin
• margin-bottom - the space between the bottom of
  the box and the bottom margin
• margin-left - the space between the left side of
  the box and the left margin

79
Controlling Margins

• Margin sizes can be expressed in units of length
  (points, pixels, em units, etc.) or as a
  percentage of the width of the parent element
  box.
• Use the auto value, which allows the browser to
  determine the margin size.
• A margin size can be negative, although this can
  lead to unpredictable results when viewed with
  certain browsers.

80
Creating an Overlay Effect 2
Web page designers can use negative margins to
place one block-line element on top of another,
creating an overlay effect. This figure shows
an example of an overlay effect.
81
Controlling Margins 2

• 4 margin attributes combined into a single
  attribute with tsyntax
• selector margin-top margin-right margin-bottom
  margin-left
• If 3 values, they are applied in the following
  order top, right, bottom, and the browser sets
  the left margin to match the right margin
• if 2 values, they are applied to the top and
  right margins, and the browser sets the bottom
  and left margins to match the top and right
  margins
• if only 1 value is entered, the browser applies
  the value to all four margins

82
Setting Padding Size 2

• Padding refers to the amount of space between the
  element and its border.
• Four attributes are used to control the size of
  the elements padding
• padding-top
• padding-right
• padding-bottom
• padding-left

83
Formatting the Border 2

• CSS provides variety of attributes to manage
  boxs border width, border color, border style.
• syntax to combine all of the border attributes,
• border border-width border-style border-color
• These attributes can be applied to all four
  borders at once, or you can work with individual
  borders.
• There are a variety of ways with which border
  styles can be expressed.
• Support for the border declaration is
  inconsistent across browser types and versions.

84
Different Border Attributes Width 2
85
Different Border Attributes Color 2
86
Different Border Attributes Style 2
87
Example Border-Style Values (Dashed Div.article
2)
Border widths can be expressed using units of
length or with the keywords thin, medium, or
think. The border color can be defined using
color names or color values. This figure shows
that each of the nine different styles that can
be applied to a border.
88
Formatting the Width and Height of Block-Level
Boxes 2

• To change the width of a box, use the width
  attribute.
• Box width can be expressed in terms of absolute
  or relative units of length, or as a percentage
  of the width of the parent element.
• for example, the style
• body width 75
• reduces the width of the Web page body to 75 of
  the width of the browsers display area
• The width attribute is seldom used except with
  text boxes and inline images.

89
Formatting the Width and Height of Block-Level
Boxes Continued

• The height attribute sets the height of the
  element.
• Heights can be expressed in absolute or relative
  lengths, but not percentages.
• Typically, you wont set the height of a
  block-level element because problems can arise
  when the amount of text in the element exceeds
  the height allowed.
• The height attribute is usually applied to inline
  images and little else.

90
The float Attribute 2

• The float attribute works like the alignleft
  or alignright attributes used with the ltimggt
  tags.
• This attribute places the block-level element on
  the left or right margin of the parent element.

91
Absolute Positioning - Objects

• just like you would expect, you indicate a x-y
  coordinate on the page
• x is from left, y is from top
• Position absolute top 50px left 100px
• Advantage Control
• Can move layer over time

92
Overlapping content elements Absolute
positioning Higher Z-Index on top 2

• div.upper
• positionabsolute
• left30px
• top500px
• width183px
• height124px
• background-color ccFFCC
• z-index1

• div.lower
• positionabsolute
• left40px
• top550px
• width200px
• height200px
• z-index2
• background-color FFFFCC
• border 5px

http//www.csupomona.edu/llsoe/311/labs/styleshee
ts2.htm http//www.csupomona.edu/llsoe/311/styles
/cis311ex2.css
93
CSS example

• Data files
• Solution files