Cascading Style Sheets Part 1

1
Cascading Style Sheets Part 1

• Library and Information Services, University of
  St Andrews

2
CSS vs HTML

• HTML
• Originally intended to markup structure of a
  document (lth1gt, lth2gt ... lth6gt, ltpgt, ltolgt, ltulgt,
  ltblockquotegt, ...)
• CSS
• Developing technology, CSS1, CSS2 (CSS3 under
  discussion)
• Markup presentation, i.e. formats and layout
• ? Separation of content and presentation

3
CSS Structure

• selector property value
• Selector
• on a simple level HTML element you wish to define
• Property
• attribute you wish to change
• Value
• value the property takes

4
Internal Style Sheets (1/2)

• Inline
• Affects individual HTML tag
• lthtmlgt
• ...
• ltbodygt
• ...
• ltp stylefont-family Arial, sans- serif
  gtsome textlt/pgt
• lt/bodygt
• lt/htmlgt

5
Internal Style Sheets (2/2)

• Embedded
• Affects individual document
• lthtmlgt
• ltheadgt ... ltstyle typetext/cssgt p
  font-family Arial, sans-serif
  lt/stylegtlt/headgt
• ltbodygt
• ...
• ltpgtsome textlt/pgt
• lt/bodygt
• lt/htmlgt

6
External Style Sheets (1/4)

• Separate text file (.css)
• e.g. styles.css
• p
• font-family Arial, Sans-serif

7
External Style Sheets (2/4)

• Linked styles
• Affect all documents that are linked to the style
  sheet
• lthtmlgt
• ltheadgt
• ...
• ltlink hrefstyles.css relstylesheet
  typetext/css /gt
• lt/headgt
• ltbodygt
• ...
• ltpgtsome textlt/pgt
• lt/bodygt
• lt/htmlgt

8
External Style Sheets (3/4)

• Imported styles (1/2)
• Affect all documents that are linked to the style
  sheet
• Not supported by level 4 browsers
• Often used to hide CSS2 styles from older
  browsers

9
External Style Sheets (4/4)

• Imported styles (2/2)

Into HTML file ltheadgt ... ltstyle
typetext/cssgt lt!-- import
url(styles.css) --gt lt/stylegt lt/headgt
Into another style sheet (sectionstyles.css)-
_at_import instruction must be first line of
file! _at_import url(styles.css) /sectionstyles
start here/ h1 font-size 200
color 6b84b5
10
Order of precedence

1. HTML formatting instructions (e.g. ltfontgt tags)
2. Inline styles
3. Embedded styles
4. Linked styles
5. Imported styles
6. Default browser styles

11
Types of CSS styles

• Styles assigned to a HTML element
• Class selector styles
• Define different styles for one or more HTML
  elements
• Assigned to the class attribute within an HTML
  element
• ID selector styles
• Define different styles for one and the same HTML
  element
• Assigned to the ID attribute within an HTML
  element

12
Class selector styles

• CSS
• .blue color 082984
• .red color de2131
• HTML
• lth1 classredgtHeadlinelt/h1gt
• ltp classredgta summarylt/pgt
• ltp classbluegtsome textlt/pgt

13
Pseudo-classes

• Used when an HTML element can display more than
  one behaviour (e.g. hyperlinks)
• CSS
• alink color 000
• avisited color 000
• ahover color 69f
• aactive color 000
• HTML
• lta hrefnextpage.htmlgtNext pagelt/agt

14
ID Selector styles

• CSS
• red_heading color red
• summary color red
• pconclusion color blue
• HTML
• lth1 idred_headinggtHeadlinelt/h1gt
• ltp idsummarygtSummarylt/pgt
• ltp idconclusiongtConclusionlt/pgt

15
Further resources

• Netskills training material http//www.netskills.
  ac.uk(Weve got a site license for this
  material, but you need to register!)
• World Wide Web Consortiumhttp//www.w3.org/Style/
  CSS/

16
Cascading Style Sheets Part 1

• Library and Information Services, University of
  St Andrews

17
What next?

1. Create a Dreamweaver site using the files on
   floppy disk as a basis for your site - FTP
   Host www.st-andrews.ac.uk - Login your
   username
2. Check hyperlinks and correct them where necessary
3. Delete all HTML formatting information in file
   aboutme.html
4. Create a style sheet as described in your handout