Docstoc

CSS

Document Sample
CSS Powered By Docstoc
					Cascade Style Sheets
• Before version 4.0 of HTML, style information was
  intermixed with content.
• Version 4.0 and above separate HTML into
      Content – what is in an html page
        Described in the “HTML” presentation
      Style – how does that information look
      Some tags were deprecated: <bold>, <center>, <font>
      Additional capabilities were added
• Style is specified by “css” or cascade style sheets
• For a tutorial on CSS see
  http://www.w3schools.com/css/css_reference.asp
  • Or, for free access to many books on CSS go Here and
     search for “css”
• Properties – what features of “look and feel” do you
  want to define
      Background properties – what does the background look like
      Border and outline properties – what do borders look like
      Dimension properties – how tall and wide are html elements
      Font properties – what is the font of the text
      List properties – what do lists look like
      Margin properties – what do margins look like
      Padding properties – what does the padding around
       elements look like
      Positioning properties – where does an element appear on
       the page
      Table properties – what does a table look like
      Text properties – everything about the text except the font
      Others: Generated content properties, print properties,
       pseudo-classes/elements properties
• Called an inline style
• Appears as “style” attribute of tag
• Applies only to that element and possible contents of that
    element
•   Highest priority – overrides any other style specifications
•   Should be used sparingly
    Example:
      <p style="font-family:courier new; color:red; font-size:20px">
       Semi-colon separated list of 0 or more property-value pairs
       Each property-value pair has a
          property name
          property value
            If the value is composed of multiple words, enclose them in quotes
            The syntax or legal values of the property are determined by the property
              name
          property syntax: property_name : value
• Appears between <style> tags in the header of the document
• Called an internal style sheet
• Any property definition in an internal style sheet applies to
   the entire current document unless overridden by a inline
   style or subsequent internal style sheet
    It doesn‟t matter where the subsequent internal style sheet appears,
     it applies to all appropriate previous and subsequent elements
    There is commonly only one internal style sheet and it appears in
     the <head> section

   Example:
   <style type=“text/css”>
     hr {color:sienna}
     p {margin-left:20px}
     body {background-image:url("images/back40.gif")}
   </style>
• An internal style sheet is composed of 0 or more
  style entries
• Each style entry has a
      selector
      list of property-value pairs
        unlike an inline style which are usually enclosed in quotes,
         internal style sheet property-value pair lists is enclosed in
         „{„ and „}‟
        syntax identical to that of an inline list of property-values
• For legibility and if possible, each style entry
  should appear on a separate line
• Tag name
      Properties apply to all elements with this tag except if
       overridden
      Selector can be a comma separated list of tag names
        Example h1,h2,h3 {color:red}
        Can be restricted to tags with certain attribute values (primarily
         used with the “input” tag
          Example: input[type="text"] {background-color:blue}
• Tag subclasses
      User defined with user defined name
      Syntax: tagname.subclass name
      Example:
         p.red {color.red}
         p.italics {font-style:italic}
      Applied using the “class” attribute to tags of appropriate types
       Example: <p class=“red italic”> … </p>
• User defined classes
      User defined with user defined name
      Syntax: .subclass name
      Example:
         .center {text-align:center}
      Applied using the “class” attribute to any tag
       Example: <p class=“center”> … </p>
• Specific Elements
      Specific element identified by “id”
      Identified by „#‟
      Example:
        #gradeTable {margin-left:auto;margin-right:auto}
      Application:
       <table id=“gradeTable”> … </table>
• Called an external style sheet
• Stored in text file with user chosen name and the suffix
  “.css”
• Has syntax of content in an internal style sheet
       That is, a list of style entries
       Cannot have html tags like <style>
• Included in an html file using <link> tag
       Included <head> section
       Example:
        <link rel="stylesheet" type="text/css" href="mystyle.css" />
•   An html file may include more than one external file sheet
•   All properties of an external style sheet apply to all elements of
    an html document that links to an external style sheet except
    overridden by a later link, internal style sheet, or inline style.
• How the properties of one style sheet or style definition
    override another
•   A browser default is used if nothing is defined
•   A property definition in an external style sheet overrides the
    default browser property definition for the same property
    and any property definition in an earlier included external
    style sheet
•   A property definition in an internal style sheet overrides the
    same property definition defined by the browser, defined in
    an external property definition, and defined in any internal
    style sheet that appears earlier in the html file
•   A property definition in an inline style sheet overrides the
    same property definition defined by the browser, defined in
    an external property definition, and defined in any internal
    style sheet
•   Use the concept of “inheritance”
• We don‟t expect you to memorize them.
• We do expect you to be able to look them up
   Here
   Or, for free access to many books on CSS go Here
    and search for “css”
   Google is your friend

• For the rest of the presentation we will
  introduce several of the CSS properties
• Inherited properties
     Inherited from parent or containing element
• There are several properties that take a color value.
  There are several ways to specify colors. We will
  discuss two. For more information go here.
      You cans use standard names
        Example: body {background-color:yellow}
          This causes the background of the entire web page to be yellow
          See http://www.w3schools.com/css/css_colornames.asp for a
           list of color names you can use
      You can use the hex notation to define a color
        Example: body {background-color:#FFFF00}
          This causes the background of the entire web page to be yellow.
           It indicates a 255 value for red, 255 for green, and none for yellow
          The # indicates that the sequence of 6 hex characters that follow
           define the 3 bytes of a color.
            The first two hex bytes represent the amount of red
            The next two hex bytes present the amount of green
            The last three hex bytes represent the amount of blue
            Each hex digit represents a 4 bit value between 0 and 15
• Width, height, and length properties require you
  to enter integer values representing “amounts”.
  Amounts are often specified using units such as
  pixels, points, percentages, ems, inches,
  millimeters, and centimeters. For more information
  see http://www.w3schools.com/css/css_units.asp.
• Examples:
     img {width: 100px; height:100px}
           Specifies width and height in terms of pixels

     img {witdh: 50%; height:50%}

           Specifies width and height as a percent of its
           enclosing block
Property                Description
background              Sets all the background properties in one declaration
background-attachment   Sets whether a background image is fixed or scrolls with
                        the rest of the page
background-color        Sets the background color of an element
background-image        Sets the background image for an element
background-position     Sets the starting position of a background image
background-repeat       Sets how a background image will be repeated
• All tags in HTML define block elements, inline
  elements, or invisible elements (e.g. <meta>)
• Organized hierarchically
• Block elements
   Begin on new line
   Take up entire width of element they are inside
   Can contain other block elements or inline elements
   Examples: <p>, <table>,<ul>, <ol>, <table>, <pre>
   <div> tag
       Paired tag that provides a way to add style properties
       to used primarily to group elements so they can be
       formatted using CSS style properties
• Inline elements in HTML are displayed in the flow
  of the information displayed on the screen.
• Inline elements
      They do NOT start on a new line
      They do NOT consume the entire width of the enclosing
       container.
      Can contain text or other inline elements
      Examples: <a>, <img>
      <span> tag
        Paired tag that identifies an inline segment so that it can be
         formatted using CSS properties or manipulated by javascript.
        Usually applied to text segments.
• All HTML elements are considered boxes
• In order to set the width and height of an
  element correctly in all browsers, you need to
  know how the box model works.
• The box model illustrates how the CSS
  properties: margin, border, and padding,
  affects the width and height of an element.
• When you specify the width and height properties of an
   element with CSS, you are just setting the width and height
   of the content area. To know the full size of the element, you
   must also add the padding, border and margin.
• If an element had the following properties:

     width:250px;
     padding:10px;
     border:5px solid gray;
     margin:10px;

• It would be 300px wide
Property        Description
margin          Sets all the margin properties in one declaration
margin-bottom   Sets the bottom margin of an element
margin-left     Sets the left margin of an element
margin-right    Sets the right margin of an element
margin-top      Sets the top margin of an element
Property              Description
border                Sets all the border properties in one declaration
border-bottom         Sets all the bottom border properties in one declaration
border-bottom-color   Sets the color of the bottom border
border-bottom-style   Sets the style of the bottom border
border-bottom-width   Sets the width of the bottom border
border-color          Sets the color of the four borders
border-left           Sets all the left border properties in one declaration
border-left-color     Sets the color of the left border
border-left-style     Sets the style of the left border
border-left-width     Sets the width of the left border
border-right          Sets all the right border properties in one declaration
border-right-color    Sets the color of the right border
border-right-style    Sets the style of the right border
border-right-width    Sets the width of the right border
border-style          Sets the style of the four borders
border-top            Sets all the top border properties in one declaration
border-top-color      Sets the color of the top border
border-top-style      Sets the style of the top border
border-top-width      Sets the width of the top border
border-width          Sets the width of the four borders
outline               Sets all the outline properties in one declaration
outline-color         Sets the color of an outline
outline-style         Sets the style of an outline
outline-width         Sets the width of an outline
Property         Description
padding          Sets all the padding properties in one declaration
padding-bottom   Sets the bottom padding of an element
padding-left     Sets the left padding of an element
padding-right    Sets the right padding of an element
padding-top      Sets the top padding of an element
Property     Description
height       Sets the height of an element
max-height   Sets the maximum height of an element
max-width    Sets the maximum width of an element
min-height   Sets the minimum height of an element
min-width    Sets the minimum width of an element
width        Sets the width of an element
Property       Description
font           Sets all the font properties in one declaration
font-family    Specifies the font family for text
font-size      Specifies the font size of text
font-style     Specifies the font style for text
font-variant   Specifies whether or not a text should be displayed in a
               small-caps font
font-weight    Specifies the weight of a font
Property          Description
color             Sets the color of text
direction         Specifies the text direction/writing direction
letter-spacing    Increases or decreases the space between characters in a
                  text
line-height       Sets the line height
text-align        Specifies the horizontal alignment of text
text-decoration   Specifies the decoration added to text
text-indent       Specifies the indentation of the first line in a text-block
text-shadow       Specifies the shadow effect added to text
text-transform    Controls the capitalization of text
vertical-align    Sets the vertical alignment of an element
white-space       Specifies how white-space inside an element is handled
word-spacing      Increases or decreases the space between words in a text
Property              Description
list-style            Sets all the properties for a list in one declaration
list-style-image      Specifies an image as the list-item marker
list-style-position   Specifies where to place the list-item marker
list-style-type       Specifies the type of list-item marker
Property     Description
bottom       Sets the bottom margin edge for a positioned box
clear        Specifies which sides of an element where other floating
             elements are not allowed
clip         Clips an absolutely positioned element
cursor       Specifies the type of cursor to be displayed
display      Specifies the type of box an element should generate
float        Specifies whether or not a box should float
left         Sets the left margin edge for a positioned box
overflow     Specifies what happens if content overflows an element's
             box
position     Specifies the type of positioning for an element
right        Sets the right margin edge for a positioned box
top          Sets the top margin edge for a positioned box
visibility   Specifies whether or not an element is visible
z-index      Sets the stack order of an element
Property          Description
border-collapse   Specifies whether or not table borders should be
                  collapsed
border-spacing    Specifies the distance between the borders of adjacent
                  cells
caption-side      Specifies the placement of a table caption
empty-cells       Specifies whether or not to display borders and
                  background on empty cells in a table
table-layout      Sets the layout algorithm to be used for a table
• Notice that many of the property classes have as
  their first property a property that allows one set
  all of the properties in that class at once
• For Example:
      Without the all at once font property we might have to write:
       p {font-style:italic;font-variant:small-caps;
          font-weight:bold;font-size:125%;
          line-height:30px;font-family:”courier”}
      With the all at once font property we write:
       p {font: italic small-caps bold 125%/30px “courier”}
• There is a strict order of the values but some
  values may be omitted. If so, default values are
  used.
• One example shows the use of styles
     This was taken from
  http://students.cs.byu.edu/~cs100ta/programs/HTMLExample/demo_default.html

• Many more examples can be found here

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:18
posted:8/13/2011
language:English
pages:30