Cascading Style Sheets

1
Cascading Style Sheets

• A Style
• is a rule describing how to format a particular
  piece of HTML
• A Style Sheet
• is a set of these styles put together in one
  package

2
Problems with HTML

• HTML doesnt compare to D.T.P packages for style
  and formatting
• HTML cant handle typographic and layout control
• CSS allows greater control over layout and design

3
What can CSS do that HTML cant?

• Formatting text - Could specify that a piece of
  text has Ariel Font, is coloured green and has a
  left margin of 50 pixels
• Formatting images - Could specify that an image
  is aligned along the right edge of a page with a
  50 pixel margin between it and surrounding text

4
Example Structure
HTML Selector
Equals Sign
Closing Tag
Definition
Pink Floyd
Property
Value
Style Attribute
5
Creating Style Sheets

• Internal Style Sheets
• In current page only
• Specified in the head section
• External Style Sheets
• Exist as separate file with .css extension
• Can be used in a number of web sites

6
Style Types

• Make Custom Styles.
• Formatting characteristics defined by you.
• Redefine HTML Tag.
• Change the properties of an existing HTML tag.
• CSS Selector - applies to tag only
• active mouse click
• hover mouse over
• link any link
• visited visited links

7
(No Transcript)
8
(No Transcript)
9
(No Transcript)
10
Definition Window

• Type font type, size, colour, style etc
• Background colour, image
• Block word, letter, spacing, alignment
• Box width,height, padding, margin
• Border width, colour, style
• List size and type of bullets
• Positioning refers to layers
• Extensions not all supported

11
(No Transcript)
12
(No Transcript)
13

• Background Colour - sets background colours for
  particular paragraphs
• Background Image - specifies a background image
• no repeat - puts image in upper-left corner of
  the applied style
• repeat - tiles the image horizontally and
  vertically across the applied style
• repeat x - sets image horizontally across applied
  style
• repeat y - sets image vertically across applied
  style

14
Background options continued

• Attachment - Determines whether the background
  image remains fixed in its original position or
  scrolls with the page
• Horizontal position - controls horizontal
  alignment
• Vertical position - controls horizontal alignment

15
(No Transcript)
16
(No Transcript)
17
To sum up for now..

• Separate code that defines own styles
• Or redefines HTML styles (eg )
• Why use style sheets?
• Own style
• Reformatting easier
• Superior position control