Cascading Style Sheets

1
Lesson 6

• Cascading Style Sheets
• Dynamic HTML

2
Dynamic HTML

• Not a new version of standard HTML
• A technology not a tool
• Regular HTML
• Scripting (Javascript, Jscript, VBScript)
• Dynamic style sheets
• Cascading Style Sheets
• DOM (Document Object Model)
• Positioning
• Filtering

3
Browser Incompatibilies

• the main incompatibilities are in the Document
  Object Model
• IE uses a more complete document object model
  than Netscape and exposes all elements of a page
  including the HTML elements
• the Netscape Document Object Model is more
  restrictive in what can be changed and manipulated

4
Cascading Style Sheets

• A definition of how a browser should display the
  elements of a document.
• Absolute positioning
• using JavaScript any page element can be
  positioned to exact coordinates in the viewing
  area
• fore and backgrounds can be aligned
• content can be organized within blocks instead of
  in a table cell
• with a little Javascript and absolute
  positioning content can be animated
• you can detect a usering selecting a content
  element

5
Summarizing

• There is no standard for Dynamic HTML
• DHTML is made up of a number of technologies
• the real power of DHTML comes from scripting

6
What is CSS

• A technology that works with HTML but is not HTML
• separate code that enhances the capabilities of
  HTML by allowing you to redefine the way HTML
  tags work
• Similar to styles in a word processor
• for instance could be redefined to use
  bold for emphasis, a 14 pt font, the times font
  and an italic style

7
CSS Properties

• Font
• Text
• List Mouse
• Color
• Background
• Border Margin
• Positioning
• Visability

• Letter form, size, boldface, italic
• Kerning, Leading, alainment, case
• Bullets and indentation
• borders, text, bullets rules backgrounds
• Behind the page or behind a single page element
• Margins, padding, borders, width,height
• Exact placement on the screen
• Whether one element appears and how much of it is
  showing

8
CSS Rules

• You can set up rules to tell a specific HTML tag
  how to display its content or create generic
  rules and then apply them as you need them
• There are 3 types of rules
• HTML Selector - the text portion of a tag is
  called the selector.The selector is used in a CSS
  rule to redefine how the tag displays
• p font bold 14pt times - redefined the
  tag
• Class - a class is a free agent rule that can
  be applied to any HTML tag. Classes can be named
  anything you want
• .myClass font bold 20 pt times
• ID - id rules are similar to class rules ID
  selectors are usually applied only once per page
  to a particular HTML tag to create an object for
  use with a JavaScript function
• object1 position absolute, top 10px

9
Parts of a CSS Rule

• Selectors - identify the tag, class or ID
• Properties - identify what is being defined
• Values - property values (numbers, size)

Rule
selector property value
HTML, class or ID
Definition
10
Where to put CSS rules

• In an HTML tag
• .
• In the document head ( to affect the whole
  document)
• use HTML comments to hide the style definitions
  the same why you hide JavaScript
• In an external document
• linked or imported into your document this way
  you can have a consistant style across a number
  of documents

11
Grouping Style Rules

• selectors may be group assigned a new style by
  separating the desired selectors wit a comma
  ahead of the style definition

h1 , h2 , h3 font-family bookman old
style font-style italic
12
Style Sheet Properties

• Syntax Properties
• applies to the appearance of text, borders, and
  background properties
• Layer Properties
• Applies to the position, visibility and other
  layer properties

13
Syntax properties
Font font-family family-name
generic-family font-style normal
italic font-varient normal small-caps font-weigh
t normal bold font-size xx-large x-large
large medium small x-small xx-small
larger smaller percentage length

14
Syntax properties
Background bacground-color colorname none
rrggbb background-image url none Ex backgrou
nd-color blue background-image
url(stopsign.gif
15
Syntax properties
Text text-transform capitalize uppercase
lowercase none text-decoration none
underline blink line-through text-align right
center left justify text-indent length
em , ex , pc , pt , in , mm , cm percent Ex
text-transform lowercase text-decoration
blink
16
Syntax properties
Miscellaneous color none colorname
rrggbb list-style-type disk circle square
decimal lower-roman upper-roman lower
alpha upper-alpha none float none left
right (same as Javascript align
property) clear none left right
both (forces an element that is adjacent to a
floated element to
start on the next line) white-space none block
inline list-item (horiz or vertical
blank space between words)
17
Layer properties
Positioning position absolure
relative top length percent auto position of
top of container left length percent
auto position from left of container height lengt
h auto actual height of layer width length
percent auto actual width of container clip sha
pe auto crop the view of the layer clip
rect(0px,200px,200px,0px)
18
Layer properties
positioning visibility NS4-show hide
inherit IE4-visible hidden
inherit background-color colorname none
rrggbb layer-background-color colorname none
rrggbb include-source HTML filename background-i
mage url filename z-index auto integer (
order of placement in the stack of layers 1
is the bottom )
19
In the lab...

• go to http//webmonkey.com
• search for CSS
• work through the
• Mulders Stylesheet Tutorial