Documents
Resources
Learning Center
Upload
Plans & pricing Sign in
Sign Out
Get this document free

CSS

VIEWS: 5 PAGES: 18

									More CSS




           31-Jan-12
        A different emphasis
   CSS is the same for XML as it is for HTML and XHTML, but--
       XML contains no display information
       If you want your XML to be easily read by humans, you need CSS
       You need to take charge of arranging text on the page
   HTML can use tables for layout
       In XHTML you should use CSS (but tables are much easier)
       In XML you don‟t have tables
   Some browsers, especially older versions of IE, don‟t support
    CSS very well, 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


                                                                               2
        The display property
   Every element that is formatted by a CSS command is
    considered to be in an invisible “box”
   The box containing an 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



                                                                                     3
     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 as 1.5cm
                                                                                   4
       Boxes
   The invisible box containing a styled element has three
    special areas:




                    The element
                       padding (invisible)
                     border (can be colored)

                     margins (invisible)



                                                              5
        Padding
   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
   size is given in the units described earlier
   Example: sidebar {padding: 1em; padding-bottom: 5mm}

                                                               6
        Borders
   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


                                                                                    7
        Margins
   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: size to set all four sides at once




                                                      8
     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 bottom do not
        add extra space above and below the line containing the element
            This means that   inline boxes will overlap   other text


                                                                             9
     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)

                                                         10
position:absolute; left: 0in; top: 0in               position:absolute; right: 0in; top: 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: size puts an element‟s top size units from the page top
          bottom: size puts an element‟s bottom size units from the page bottom
          left: size puts an element‟s left side size units from the left edge of the page
          right: size puts 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

position:absolute; left: 0in; bottom: 0in        position:absolute; right: 0in; bottom: 0in
                                                                                         11
     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

                                                                                     12
     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

                                                                             13
       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




                                                                14
       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


                                                                      15
        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




                                                                           16
        But wait! There‟s more...
   In this and the preceding lectures, I‟ve covered some of
    the more commonly useful parts of CSS
       (In other words, the parts I‟ve been using)
   There are other features I haven‟t touched on




                                                               17
The End




          18

								
To top