Docstoc

css

Document Sample
css Powered By Docstoc
					 Overview
 What is DHTML
 CSS- Cascading Style Sheets
 DOM-Document Object Model
 Scripting using DOM
 Examples
   Event Handling
   Menu
   Animation
 Cross Browser Differences
 What is DHTML?
 DHTML is the combination of several built-in browser
  features in fourth generation browsers that enable a web
  page to be more dynamic.
 DHTML is NOT a scripting language (like JavaScript),
  but a browser feature- or enhancement- that makes the
  browser dynamic
 It uses a host of different technologies - JavaScript,
  VBScript, the Document Object Model (DOM), layers,
  cascading stylesheets - to create HTML that can change
  even after a page has been loaded into a browser
What is DHTML? ...
 It is considered to be made up of
   HTML
   Cascading Style Sheets (CSS)
   Scripting language
 All three of these components are linked via Document
  Object Model (DOM)
 DOM is the interface that allows scripting languages to access
  the content, style, and structure of the web documents and
  change them dynamically
Tools of DHTML
 HTML and XML
   Partitions and Organizes the content
 CSS, CSS1, CSSP, CSS2
   Defines the Presentation of the content
 Scripting - JavaScript, VBScript
   Adds interactivity to the page
 DOM- Document Object Model
   Defines what and how elements are exposed for script access
CSS – Cascading Style Sheets
What is CSS?
 CSS is Cascading Style Sheets
 It is a specification controlled by the World
  Wide Web Consortium (W3C).
 HTML controls the organization of a Web page document
 CSS controls the presentation and layout of the Web page
  document elements
What is CSS? ...
 CSS1- visual presentation of elements
 CSSP - positioning of elements
 CSS2 -visual and audio presentation of elements. It includes
  attributes from CSS1 and CSS-P
What CSS can do?
 With CSS you can separate form from structure
 Control layout (alignment, spacing, margins, colors, floating
  elements etc)
 Maintain and update many pages faster and easier
 A way of centrally managing the styles for an entire web site
A bit of history
 HTML 3.2    developed 1995; W3C
             recommendation Jan 1997
 CSS level 1 W3C recommendation
             17 Dec 1996
 HTML 4.0 W3C recommendation
             18 Dec 1997
 CSS level 2 W3C recommendation
             12 May 1998
               How CSS works
                  (local page)
Title

Pargraph

Body of text

Paragraph      style sheet

Body of text
              How CSS works
 Title
                (Web site)

control.css                      Title
                              Title
                            Title
                         Title
                       Title
                    Title
                   Title




                                         Many_files.html
Advantages of CSS
 Excellent addition to plain HTML
 Easily change the look
 Offers much more detailed attributes
 Pages load faster
Disadvantage
 These will only work on version 4 browsers or newer
 CSS1 support is at least partially available for more than 96%
  of the current browser population, with a good CSS2 support
  for about 80% of today's browsers.
Why use Style Sheets?
  Better implementation of
    font control
    color management
    margin control
    addition of special effects such as text shadowing
  Many style-oriented tags (e.g., font) were deprecated in
   HTML 4.0 in favor of CSS
  Not fully supported by browsers, but support is increasing
      Logic and power of style sheets outweigh browser problems



14
Rules and Style Sheets
 Rule: A rule is a statement about one stylistic aspect of one or
  more elements.
 Style Sheet: A style sheet is a set of one or more rules that
  apply to an HTML document.
  CSS-Terminology

 CSS is declared as rules:
  - Eg: H1 {color: green}
  - Means that all text surrounded by the <H1></H1> tags
    should be displayed in green color
 A rule has two parts
  - H1 {color:green}

                         { DECLARATION }
  SELECTOR
 CSS – Terminology…
  Declaration has two parts:
           HI {color : green }

       property :          Value
•In general:
•Element(s) { Property1:Value1; Property2 : Value2a , Value2b
}
Eg.: H1, B {color:olive; background:yellow; font-
family: arial, helvetica}
HTML Selector
 <HTML>
  <HEAD>
  <style type="text/css">
  B {font-family:arial, helvetica; font-size:14px; color:red}
  </style>
  </HEAD>
  <BODY>
  <b>This is a customized headline style bold</b>
  </BODY>
  </HTML>

 This is a customized headline style bold
       Three types of style sheets
      Inline
         Add style to any HTML tag
      Embedded
         Add style attributes to HEAD section to define styles for full
          web page
      Linked
         Styles defined in separate text file (.css extension)
         Create master style sheet to be applied to entire site
         Pages linking to style sheet take on its defined styles



19
 New elements
 <div>
   Defines a style that will apply to all text within <div></div>
   Block-level element can contain other HTML elements
 <span>
   Used inline only to modify a portion of text smaller than a paragraph
 <style>
   Placed in <head> section to define embedded styles
 <link>
   Points to external style sheet




20
           Embedded Style – <style>
     <html>
     <head>
     <title>A skeletal HTML template with style</title>
     <style>
     <!--
     body {background: #ffffff; color: blue;}
     h1 {font: 14pt verdana; color: red;}
     p {font: 13pt times;}
     A {color: #ff0000; text-decoration: none;}
     -->
     </style>
     </head>

21
      Linked Style Sheet
      Create and save mystyle.css
       body {
       background: #FFFFFF;
       color: blue;
       }
       h1 {
       font: 14pt verdana; color: red;
       }
       p{
       font: 13pt times;
       }
       a{
       color: #FF0000; text-decoration: none;
       }


22
       Linked Style Sheet (cont.)
 Add link to HTML pages to use stored styles
  <html>
  <head><title>A skeletal HTML template with style</title>
  <link rel="stylesheet" href=“mystyle.css" type="text/css">
  </head>
  <body>
  <h1>The Primary Heading</h1>
  <p>The first paragraph starts here. The paragraph
  tag will cause a double-spaced line to appear.

  Explicit line breaks are ignored, so this
  is still part of the previous paragraph.</p>
  <p>A short, new paragraph starts. The course web page is
  at <a HREF="http://www.tech.purdue.edu/cpt/courses/cpt375/index.htm">
  CPT Home Page</a> -- Please visit it now.</p>
  </body>
 23
  </html>
        Cascade & Inheritance

 Multiple types of styles may be used by a web page
 Browser interprets in a certain order called cascade
   Linked -> Embedded -> Inline, so…
   Inline overrides Embedded which overrides Linked
 Unless stated otherwise, tags contained within a defined style
     inherit attributes of that style
      A paragraph with color and font style that includes a list will keep the
       color & font style


24
     Employing Class with Styles
 A way of creating custom-built HTML tag
 Linked style file content
  P.flashy {
  font: 18pt garamond; text-align: center; text-weight: bold;
  text-style: italic; margin-left: 1in; margin-right: 2in;
  color: #123456;
  }
  P.plain {font: 12pt times;}
 Using Linked style in web page
  <p class="plain">The first paragraph starts here.
      The paragraph tag will cause a double-spaced line to appear.

     Explicit line breaks are ignored, so this
     is still part of the previous paragraph.</P>
     <p class="flashy">A short, new paragraph starts. The course web page is
     at <a href="http://www.tech.purdue.edu/cpt/courses/cpt375/index.htm">
     CPT Home Page</a> -- Please visit it now.</p>
    25
  CSS-Embed a style sheet
 All stylesheet information lies at the top of the HTML
  code (in the head portion)
 Eg:
 <HTML>
 <STYLE TYPE=“text/css”>
 <!—
 H1 {color: green; font-family: arial ,helvetica}
 -- >
 </STYLE>
 <HEAD>
 <BODY> . . .

  Style applies to the whole document
Style sheets types
 Types: inline, document
 inline: within a tag
ex: <p style = "color=red;font-family:Arial;font-size:10pt;">

 document: within the header of a document.
ex:     <head><title>example ...</title>
  <style type = "text/css">
  selector {prop:value;....}
  ....
  </style>
  CSS-Link to an external stylesheet
 An externally defined stylesheet is used as a style template that can be applied
  to a number of pages
 A text file (with ext .css) contains the stylesheet rules to be applied to a page
  (or set of pages)



Eg. A file named ‘mystyles.css’
H1 {color: green; font-family: impact}
P {font-size:12pt;font-weight:bold;color: red; font-style :italic}
 This file is linked to the HTML document (<LINK>)
In the web Page:
<HTML>
    <HEAD><TITLE>External Style Sheet</TITLE>
   <LINK REL=stylesheet HREF=“mystyles.css” TYPE=“text/css”>
</HEAD>
<BODY> . . .
          External Style Sheets
 Linked styles
   Affect all documents that are linked to the style sheet

  <html>
       <head>
                  ...
  <link href=“styles.css” rel=“stylesheet” type=“text/css” />
         </head>
         <body>
                  ...
                  <p>some text</p>
         </body>
  </html>
   CSS-Add styles inline
 Applying stylesheets rules to particular HTML tags


  Eg:
  <B STYLE=“color: purple; background: yellow”>Adding Inline styles</B>


   The style applies to only that particular
  <B> tag
 CSS – Importing Stylesheets
 Style Sheets which are external to the HTML document are
  imported (included) into the <style> element within the
  <head> element of the current document.
 Similar to linking, but useful when you want to override
  some style rules when you include it in your own stylesheet.
  <style type="text/css">
  <!-- @import url(http://www.cen.com//houseBasic.css);
  ul { list-style-type: circle; } --> </style>
 The imported sheets must appear before any document-
  specific styles
 CSS- Classes
Selectively apply a style to HTML elements
you can define different classes of style to the same element,
 and apply the appropriate class of style when required
 HTML
  <P CLASS="first">The first paragraph</P>
  <P CLASS="second">The second paragraph</P>
  <P CLASS="third">The third paragraph</P>
Stylesheet
  P.first { color: green }
  P.second { color: purple }
  P.third { color: gray }
        Class Selector
   you can define different styles for the same type of HTML element.

   .ClassSelector {Property:Value;}
    <HTML>
    <HEAD>
    <style type="text/css">
    .headline {font-family:arial; font-size:14px; color:red}
    </style>
    </HEAD>
    <BODY>
    <b class="headline">This is a bold tag carrying the headline class</b>
    <br>
    <i class="headline">This is an italics tag carrying the headline class</i>
    </BODY>
    </HTML>
    This is a bold tag carrying the headline class
    This is an italics tag carrying the headline class
          Common CSS Properties
 CSS Units
 Fonts
 Colors
 Backgrounds
 Text & Alignment
 Margins & Padding
         CSS Units
 Used for specific heights and lengths
 CSS supports several length units
     px – Pixels – screen dots
     pt – Points – font sizes
     In- Inches
     cm – centimeters
     % - percent of the current/parent font
     em – height of current font
           Fonts
 font-family
    Ordered list of font names
    Quote names with spaces: ex. “Arial Black”
   p{
       font-family: Arial, Helvetica, sans-serif;
   }

 font-size
    larger, smaller, or specific height
   p { font-size: 12pt; }
Fonts
 font-style
   normal or italic
  p { font-style: normal; }

 font-weight
   normal, lighter, bold, or bolder
  p { font-weight: bolder; }
Colors
 color:
   Named Colors: red, blue, green
   Hex: #FFCC00, #FC0
  p { color: #00FF00; or green}

 background-color:
   color or color code
  p { background-color: red; }
Backgrounds

   background-image:
     none or url(http://imageurl)


   background-repeat:
     repeat, repeat-x(Horizontally), repeat-y, no-repeat
  <STYLE Type=“test/css”>
    H1{background-image: url(images/sct-logo.gif);}
    background-repeat: repeat-x;
  }
Text
   Line-height
        Normal, number, length, percentage
       p { line-height: 150%; }

   Text-align
        left, right, center, justify
       p { text-align: justify; }
Text
   Vertical-align
     top, middle, bottom, sub, super
    td{ vertical-align: top; }

   Text-decoration
     none, underline, overline, line-through,blink
    p{
      text-decoration: underline;
    }
Margins & Padding

                  Text   Text   Text   Text   Text   Text   fro
                  Text   Text   Text   Text   Text   Text   fro
   margin padding Text   Text   Text   Text   Text   Text   fro
                                                                  padding margin
                  Text   Text   Text   Text   Text   Text   fro
    Margin

      The space between this and other elements
      margin-top, margin-right, margin-bottom, margin-left
    Shortcut
      margin: 5px 10px 5px 10px or 10%;
      Values are in clockwise order
Margins & Padding

                  Text   Text   Text   Text   Text   Text   fro
                  Text   Text   Text   Text   Text   Text   fro
   margin padding Text   Text   Text   Text   Text   Text   fro
                                                                  padding margin
                  Text   Text   Text   Text   Text   Text   fro
    Padding
      The space between the margin and the element
      padding-top, padding-right, padding-bottom, padding-left
      Comparable to TABLE’s cell-padding
List Attributes
 List-style
-Disc, Circle, Square, Decimal, lower-roman,
uper-roman, lower-alpha, upper-alpha.
<style type=“text/css”>
UL{list-style:lower-roman}
</style>
<ul>
<li>HTML
<li>JAVA
</ul>
  border
 set a border style for an element..
ex:

<style type="text/css">
    p.b12 {border-style:double; bordercolor:blue;}
    </style>
...
<p class= "b12">
....
</p>
   Span
 Span: set style for a part of a paragraph.. e.g. a word.
ex: <style type="text/css">
   p.sp1 {font-size:24pt;}
    </style>
...
<p>
This is a <span class ="sp1">Big</span> word
</p>
Conclusion
 Through style sheets you can specify the general formatting
  of HTML elements
 Use external style sheets to share styles across all documents
  in the web site
 Class definitions allow you to define multiple styles for an
  HTML element
 Not all styles supported by all browsers

				
DOCUMENT INFO
Shared By:
Categories:
Stats:
views:9
posted:2/25/2012
language:English
pages:47
Description: html