Publishing on the World Wide Web

1
Publishing on the World Wide Web

• Cascading Style Sheets

2
Contents

• Why use them
• Using Style Sheets
• Embedded
• Linked
• Inline
• Classes
• Positioning
• Layers
• Inheritance

3
What is CSS?

• A set of rules applied to XHTML elements
• Syntax different from XHTML
• Works with XHTML
• Describe how the page is to be displayed
• Part of the specification for XHTML
• CSS2 ( incorporates CSS1 and CSSP)
• Easier to apply to well written and structured
  XHTML

4
Why Use CSS?

• Separate content from style
• Change a whole website from one document
• No need for physical tags like
• ltfont face Arial, Helvetica, sans serif color
  0000FF size-1gt
• File sizes will be reduced

5
The Problem?

• Only newer versions of Browsers support them
• Version 4 and above
• They are not displayed consistently
• Platform differences
• Navigator for Macs, PCs and Unix
• IE for PCs and Macs
• Browser types and versions differences
• IE4 and 5.5
• Navigator 4 and 6

6
Rules

• Style Sheets are made up of Rules
• body font-family Arial
• Rules are made up of selectors and declarations

7
Selectors

• body font-family Arial
• First part of a Rule is the selector
• The selector is the link between the XHTML
  element and the style sheet.
• All XHTML elements are possible selectors

8
Declarations

• body font-family Arial
• Second part of a Rule is the declaration
• A declaration consists of a
• property and a value separated by a colon
• Declarations can be grouped
• body font-family Arial color ff3300
• Each declaration is separated by a semi-colon

9
Cascading styles

• XHTML has structure
• Parent child relationships
• Inheritance
• body color f00
• h1 color blue

10
CSS and XHTML documents

• Possible incorporation methods
• Inline Style applied to individual XHTML elements
• Embedding a Style Sheet within XHTML document
  head
• Linking to an External Style Sheet file

11
Inline Stylesheets

• ltXHTMLgt
• ltheadgt
• lttitlegtInline stylesheetlt/titlegt
• lt/headgt
• ltbodygt
• lth1 stylefont-familyArial font-size 18pt
  color ff3300gtText with a style applied
  directlylt/h2gt
• lt/bodygt
• lt/XHTMLgt

12
Embedding in the Document

• ltXHTMLgt
• ltheadgtlttitlegtHow to Embed a Stylesheetlt/titlegt
• ltstyle typetext/cssgt
• lt!--
• h2 font-familyArial font-size 18pt color
  ff3300
• --gt
• lt/stylegt
• lt/headgt
• Used to apply unique style to a single document
• Embedded in the head section of XHTML document
• ltstylegt lt/stylegttag
• lt!-- --gt for browsers ignoring ltstylegt element

13
External Style Sheets

• Used to change /apply style to a whole site
• Separate text file
• Saved with a .css file extension
• Eg. fred.css
• Contains all style information / rules
• Referenced via ltlinkgttag within XHTML document
  head
• Contains no XHTML code
• More than one style sheet can be applied to the
  same document

14
Linking from the XHTML file

• ltXHTMLgt
• ltheadgt
• lttitlegtHow to Link to a stylesheetlt/titlegt
• ltlink relstylesheet hreffred.css
  typetext/cssgt
• lt/headgt
• ltbodygt..

15
Which to use?

• External
• Easy to change one file
• Look for website cascades down to the document
• Embedded
• Use for style for one page
• Overrides an external sheet
• Inline
• Added direct to content in the document
• Less useful

16
Comments

• Useful to organise your code
• /your comment goes here/
• Mark out general formatting
• Mark out positioning data
• Mark out page specific data

17
Organising Your Style

• / Colours /
• body, table, th, td backgroundffff
  color000000
• h1, h2, h3 colorff6600
• / Fonts /
• h1 font-familyTimes New Roman, Times, serif
  font-style italic
• body, table, td, th font-familyArial,
  Helvetica, sans-serif
• / Size /
• body, table, th, td font-size12pt
• h1 font-size50pt
• h2 font-size24pt

18
Example Font

• font-style normal italic oblique
• font-weight normal bold bolder lighter
• font-size x-small small medium large
  x-large
• 10pts 12pts 14pts etc.
• px
• percentage
• font-family times new roman times arial
  comic sans ms serif sans serif
• Provide alternative font faces
• body, table, td, th font-familyArial,
  Helvetica, sans-serif

19
Example Text

• text-decoration none blink underline
• line-through overline
• text-transform uppercase lowercase
• text-align left center right justify

20
Classes

• Enable the same elements to take on different
  styles
• Named CSS selector
• Should be named according to function
• Declared in style sheet as
• .importantpara font-size 24pt color violet
• Always starts with a fullstop
• Expressed in XHTML element tag using class
  attribute
• ltp classimportantpara gthere is some textlt/pgt

21
Pseudo-classes

• Applied to an element which changes as the user
  interacts
• Visited links and active links
• alink colorffffcc text-decorationnone
• avisited color ffffcc text-decorationnone
  
• ahover colorffffff text-decorationunderline
  
• aactivecolorffffff text-decoration
  underline
• Order is important
• Does not work with Netscape

22
id selectors

• In web page
• ltdiv id"sidebar"gt
• ltulgtltligt
• lta href"intro.asp"gtIntroductionlt/agt
• lt/ligt etc..
• sidebar
• font-familyVerdana, Arial, Helvetica,
  sans-serif
• margin2px
• Contextual selector
• sidebar ul
• border1px solid 903
• list-stylenone
• margin0
• text-aligncenter

23
Element spacing
24
Pseudo-elements

• Refer to sub-parts of the same elements
• first letter of a paragraph
• first line of a paragraph
• h1first-letter font-weightbold
  font-size72pt

25
Positioning of Elements

• Positioning elements
• h1 positionabsolute left150px top100px
• Starts at the top left hand corner of the browser
• Position can be relative or absolute
• Used with ltdivgt and ltspangt

26
Further information

• http//www.w3schools.com/css/default.asp
• Also a CSS reference at
• http//www.w3schools.com/css/css_reference.asp