slide1 l.
Skip this Video
Loading SlideShow in 5 Seconds..
CSS PowerPoint Presentation
Download Presentation

Loading in 2 Seconds...

play fullscreen
1 / 18

CSS - PowerPoint PPT Presentation

  • Uploaded on

CSS. Second CSS Lecture Applications to XML. A different emphasis. CSS is the same for XML as it is for HTML, but-- HTML already does a pretty good job of layout (arranging elements on the page)

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'CSS' - paul2

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript


Second CSS Lecture

Applications to XML

a different emphasis
A different emphasis
  • CSS is the same for XML as it is for HTML, but--
    • HTML already does a pretty good job of layout (arranging elements on the page)
    • XML contains no layout information, so by itself it will typically be displayed as one single huge blob of text
  • When writing CSS for XML, typically the first thing you need to worry about is arranging text on the page
  • No current browser does a good job of supporting CSS, particularly when used with XML, so:
    • You should make sure everyone who views your pages uses the same version of the same browser (this is possible in some companies), or
    • You should test your pages in all the most common browsers
the display property
The display property
  • Every XML element that is formatted by a CSS command is considered to be in an invisible “box”
  • The box containing an XML element can have one of three display properties:
    • display: block
      • The element will start on a new line, and so will the element that follows it (an HTML paragraph is an example)
    • display: inline
      • (default) The element will not start on a new line, or cause the next element to start on a new line (bold is an HTML example)
    • display: none
      • The element is hidden and will not appear on the display
css units
CSS units
  • For many of the remaining CSS values, we will need to be able to specify size measurements
    • These are used to specify sizes:
      • em width of the letter ‘m’
      • ex height of the letter ‘x’
      • px pixels (usually 72 per inch, but depends on monitor)
      • % percent of inherited size
    • These are also used to specify sizes, but don’t really make sense unless you know the screen resolution:
      • in inches
      • cm centimeters
      • mm millimeters
      • pt points (72pt = 1in)
      • pc picas (1pc = 12pt)
  • Note: you can use decimal fractions, such as1.5cm

padding (invisible)

border (can be colored)

margins (invisible)

  • The invisible box containing a styled XML element has three special areas:

The element

  • Padding is the extra space around an element, but inside the border
  • To set the padding, use any or all of:
    • padding-top:size
    • padding-bottom: size
    • padding-left:size
    • padding-right:size
    • padding: size to set all four sides at once
  • sizeis given in the units described earlier
  • Example:sidebar {padding: 1em; padding-bottom: 5mm}
  • You can set border attributes with any or all of: border-top:, border-bottom:, border-left:, border-right:, and border: (all at once)
  • The attributes are:
    • The thickness of the border: thin, medium (default), thick, or a specific size (like 3px)
    • The style of the border: none, dotted, dashed, solid, double, groove, ridge, inset, or outset
    • The color of the border: one of the 16 predefined color names, or a hex value with #rrggbb or rgb(r,g,b) or rgb(r%,g%,b%)
  • Example: section {border-top: thin solid blue;}
  • Note: the special styles (such as groove) are not as cool as they sound
  • Margins are the extra space outside the border
  • Setting margins is analogous to setting padding
  • To set the margins, use any or all of:
    • margin-top:size
    • margin-bottom:size
    • margin-left:size
    • margin-right:size
    • margin:sizeto set all four sides at once
box and display interactions
Box and display interactions
  • With display:none, contents are invisible and margin, border, and padding settings have no effect
  • With display:block, margin, border, and padding settings work about as you would expect
  • With display:inline(which is the default if you don’t specify otherwise):
    • Margin, border, and padding settings for left and right work about as you would expect
    • Margin, border, and padding settings for top and bottomdo not add extra space above and below the line containing the element
      • This means that inline boxes will overlap other text
sizing elements
Sizing elements
  • Every element has a size and a natural position in which it would be displayed
  • You can set the height and width of display:block elements with:
    • height:size
    • width:size
  • You cannot set the height and width of inline elements (but you can set left and right margins)
  • In HTML, you can set the height and width of images and tables (img and table tags)
setting absolute position

position:absolute; left: 0in; top: 0in

position:absolute; right: 0in; top: 0in

position:absolute; left: 0in; bottom: 0in

position:absolute; right: 0in; bottom: 0in

Setting absolute position
  • To move an element to an absolute position on the page
    • position: absolute(this is required!) and also one or more of
    • left:size or right:size
    • top:size or bottom:size
  • Confusing stuff:
    • size can be positive or negative
    • top:sizeputs an element’s top size units from the page top
    • bottom: sizeputs an element’s bottom size units from the page bottom
    • left:sizeputs an element’s left side size units from the left edge of the page
    • right:sizeputs an element’s right side size units from the right edge of the page
    • Changing an element’s absolute position removes it from the natural flow, so other elements fill in the gap
    • You need to be careful not to overlap other elements
setting relative position
Setting relative position
  • To move an element relative to its natural position, use
    • position: relative (this is required!) and also one or more of
    • left:size or right:size
    • top: size or bottom: size
  • Confusing stuff:
    • size can be positive or negative
    • to move left, make left negative or right positive
    • to move right, make right negative or left positive
    • to move up, make top negative or bottom positive
    • to move down, make bottom negative or top positive
    • Setting an element’s position does not affect the position of other elements, so
      • There will be a gap in the element’s original, natural position
      • Unless you are very careful, your element will overlap other elements
pseudo elements
  • Pseudo-elements describe “elements” that are not actually between tags in the XML document
  • Syntax: element:pseudo-class{...}
    • first-letter the first character in a block-level element
    • first-line the first line in a block-level element (depends on the browser’s current window size)
  • Especially useful for XML (but not implemented in Internet Explorer):
    • before adds material before an element
      • Example: author:before {content: "by "}
    • after adds material after an element
external style sheets
External style sheets
  • In HTML, within the<head> element:<link REL="STYLESHEET" TYPE="text/css" HREF="Style Sheet URL">
  • As a PI in the prologue of an XML document:<?xml-stylesheet href="Style Sheet URL" type="text/css"?>
  • Note: "text/css" is the MIME type
namespace selectors
Namespace selectors
  • Namespace selectors (XML only) choose tags from the given namespace
    • namespace|element{...} chooses the element if and only if it is from the given namespace
    • *|element{...}chooses the element regardless of the namespace
    • |element{...}chooses the element if it has no declared namespace
  • Namespace selectors are currently supported only by Netscape 6
some border styles and values
Some border styles and values
  • You can put borders around elements
  • Borders have width, style, and color
    • These can be set individually:
      • border-left-style:, border-bottom-color:, etc.
    • Or a border at a time:
      • border-top:, border-right:, etc.
    • Or all borders at once: border:
  • Available values are:
    • border-width: thin | medium | thick |length
    • border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
    • border-color:color
  • Padding is used to set the space around an element
    • You can set padding individually:padding-top:, padding-left:,padding-bottom:, padding-right:
    • Or all at once: padding:
    • Allowable values: length|12%