CSCE 102 General Application Programming Section 1,2,3

1
CSCE 102 General Application ProgrammingSection
1,2,3

• Instructor Jin Jin
• jinj_at_cse.sc.edu

2
Creating Custom Tags

• New tags ltdivgt and ltspangt
• ltspangt-- inline tag
• Define ltstyle typetext/cssgt
• p line-height1.5
• span.size18font-size18pt
• span.redtextcolorred
• Use
• ltpgtWe want the word in ltspan classsize18gtfont
  size 18ptlt/spangtand also ltspan classredtextgtin
  redlt/spangtlt/pgt

3
Creating Custom Tags cont

• ltdivgt-- block-level tag
• Define ltstyle typetext/cssgt
• div.redbkdbackground-colorred
• lt/stylegt
• Use
• ltdiv classredbkdgt
• ltpgt paragraph lt/pgt
• lt/divgt

4
Creating Custom Tags cont

• Note the difference between ltspangt and ltdivgt
• --Block-level elements could be nested inside
  ltdivgt, but not ltspangt

5
External Style Sheets

• An external style sheet only contains a set of
  style definitions. The file extension is .css
• Use
• ltheadgt
• ltlink relstylesheet typetext/css
  hrefmystyle.css /gt
• lt/headgt
• Note 1. We dont enclose these style definitions
  in a ltstylegt element. 2. .css must be in the same
  folder as the source document.
• Precedence Local stylesgt Internal stylesgt
  External styles

6
Formatting links

• a link regular links
• a visitedvisited links
• a hoverWhen the mouse hovers over the links
• E.g.
• alink colorred text-decorationnone
• avisited colorblue text-decorationnone
• ahover colorpurple font-weightbold