Chapter 2 CS 332 A Advanced HTML Programming
- Slides: 20
Chapter 2 CS 332 A Advanced HTML Programming CSS Placement HTML Tag • Affects the specific tag only (Inline Rule) • To override preceding CSS rules • Format: 18 <HTML-Tag style=“property: value; ”> …… </HTML-Tag> Head of Document 20 • Effects entire document web page • Between <HEAD> and </HEAD> HTML tags <style type=“text/css”> selector{property: value; } </style> cs 332 a_chapt 02. ppt
CS 332 A Advanced HTML Programming Chapter 2 H 1 {font: small-caps bold italic 2. 5 em ‘minion web’ Georgia, ‘Times New Roman’, Times, serif; color: red; } FORMAT H 1 Tag to be defined { Begin definition 18/21 font: Description will be of a font small-caps bold italic 2. 5 em ‘minion web’ Georgia, ‘Times New Roman’, Times, serif; color: red; } cs 332 a_chapt 02. ppt End of CSS Rule
CS 332 A Advanced HTML Programming Chapter 2 LAB I CSS Placement HTML Tag (see links from web site) 1. Document without CSS - using h 1 header defaults 2. Document with h 1 headers hardcoded into web page 3. Document with CSS hardcoded into web page cs 332 a_chapt 02. ppt
CS 332 A Advanced HTML Programming Chapter 2 CSS Placement Link to a CSS document 23 • Used to affect an entire web site • Create external text file • Do not use <style> tags in external document • Standard CSS rules applied in external document • File extension of . css Filename. css • Format <HEAD> <link rel=“stylesheet” href=“filename. css”> </HEAD> • Inserts the CSS into the document • Affects the entire document doing the ‘link’ • CSS is in same directory cs 332 a_chapt 02. ppt
CS 332 A Advanced HTML Programming LAB II CSS Placement Link (see links from web site) 1. Document with CSS linked into web page 2. CSS Document linked into web page cs 332 a_chapt 02. ppt
CS 332 A Advanced HTML Programming Chapter 2 CSS Placement Import a CSS document 28 • Used to affect an entire web site • Create external text file • Placed between the <style> tags in receiving document • Standard CSS rules applied in external document • File extension of . css Filename. css • Format <HEAD> <STYLE type=“text/css”> @import url(filename. css); @import url(filename 2. css); Other CSS rules </STYLE> </HEAD> • Inserts the CSS into the document • Affects the entire document doing the ‘import’ • CSS is not in the same directory cs 332 a_chapt 02. ppt
CS 332 A Advanced HTML Programming LAB III CSS Placement Import (see links from web site) 1. Document with CSS imported into web page 2. CSS Document imported into web page cs 332 a_chapt 02. ppt Chapter 2
CS 332 A Advanced HTML Programming Defining Classes Chapter 2 31 Creating a unique Tag A class selector Set up a style to be used with any tag Define your own style Name the new tag appropriately (do not use keywords) FORMAT. Begin with a period Somename unique name { left bracket Property: value; assign properties and values } cs 332 a_chapt 02. ppt closing bracket
CS 332 A Advanced HTML Programming Defining Classes Chapter 2 31 Creating a unique Tag Usage CSS hardcoded, linked, or imported. smith {font-size: 18 px; line-height: 75%; } <head> <style type=“text/css”>. smith {font-size: 18 px; line-height: 75%; } Blockquote. smith {font-size: 14 px; } </style> </head> cs 332 a_chapt 02. ppt
CS 332 A Advanced HTML Programming Defining IDs Chapter 2 33 Identify and Object Set up a style to be used with any tag Cornerstone of Dynamic HTML (DHTML) Allow Java. Script to identify an object to manipulate Used only once of a page to define a single element as an object FORMAT #somename identify the object { left bracket Property: value; assign properties and values } closing bracket SAMPLE Page DHTML: 34, Code 2. 9 Web page: Page DHTM: 33, Figure 2. 18 cs 332 a_chapt 02. ppt
CS 332 A Advanced HTML Programming Chapter 2 Defining NEW Inline HTML Tags 35 <SPAN>…. . </SPAN> Empty tag – has no properties Set any properties you wish Can be use with <div>, classes, IDs Hardcoded, linked, imported Usage <span class=“someclass”>……. . </span> <span id=“some. ID”>…………. . </span> Sample Page DTHML: 35/36 Web page: DHTM: 35, Figure 2. 19 Code: DHTML: 35/36, Code 2. 10 cs 332 a_chapt 02. ppt 35
CS 332 A Advanced HTML Programming Chapter 2 Defining Block-Level HTML Tags <DIV>…. . </DIV> Inherent property: line break before and after the tag Set any properties you wish Can be use with classes, IDs Hardcoded, linked, imported Usage <div class=“someclass”>……. . </div> <div id=“some. ID”>…………. . </div> Sample Page DTHML: 37/38 Web page: DHTM: 37, Figure 2. 20 Code: DHTML: 37/38, Code 2. 11 cs 332 a_chapt 02. ppt 37
CS 332 A Advanced HTML Programming Chapter 2 Multiple Tags with the same rules 39 Create the CSS rule Preceed the rule by all the selectors separated by a comma (, ) Add rules for any separate HTML selector as needed Sample Page DTHML: 39/40 Web page: DHTM: 39, Figure 2. 22 Code: DHTML: 40, Code 2. 12 cs 332 a_chapt 02. ppt
CS 332 A Advanced HTML Programming Define tags in context Tag is used in context of the HTML document Nested tags Sample Page DTHML: 41/42 Web page: DHTM: 41, Figure 2. 24 Code: DHTML: 41/42, Code 2. 13 cs 332 a_chapt 02. ppt Chapter 2 41
CS 332 A Advanced HTML Programming Making a tag important Add !important to the definition Sample Page DTHML: 43/44 Web page: DHTM: 43, Figure 2. 26 Code: DHTML: 44, Code 2. 14 cs 332 a_chapt 02. ppt Chapter 2 43
CS 332 A Advanced HTML Programming Inheritance Chapter 2 45 Parent/child relationship Outer tag is the parent Inner tag is the child Tags assume the properties of parent tags Example <body> is the parent tag of ALL tags Any tag inside the <body> tag will assume the <body> properties Sample Page DTHML: 45/46 Web page: DHTM: 46, Figure 2. 28 Code: DHTML: 45/46, Code 2. 15 cs 332 a_chapt 02. ppt
CS 332 A Advanced HTML Programming Cascade Order Chapter 2 47 Browsers have the ability to override web page style sheets Visitors may set their web browsers style sheets Order: !important Weights of HTML tags (Page DHTML: 50, Specificity) Last tag (rule) definition Inherited properties Generally: the visitor style rules will apply Sample Page DTHML: 49 Web page: DHTM: 50, Figure 2. 30 Code: DHTML: 50, Code 2. 17, 2. 18, cs 332 a_chapt 02. ppt
CS 332 A Advanced HTML Programming Display or Printing Chapter 2 51 The web page, when printed, will not always print properly Create a. css for the browser display Create a. css for printing Sample Page DTHML: 51 Web page: DHTM: 51, Figure 2. 31 Printed output: DHTML: 51, Figure 2. 32 Code: DHTML: 52/53, Code 2. 19, 2. 20, 2. 21 cs 332 a_chapt 02. ppt
CS 332 A Advanced HTML Programming Chapter 2 Comments Single line comment Begin with // No ending parameter Example // this is a comment on a single line Block of lines comment Begin with /* The CSS code End with a */ Example /* this is the first line of the comment this is the second line of the comment this is the third, and last line of the comment */ Sample Page DTHML: 54 Code: DHTML: 54, Code 2. 22 cs 332 a_chapt 02. ppt 54
CS 332 A Advanced HTML Programming Chapter 2 Style-Sheet Strategies 55 Place style in external style sheets (. css files) Place styles in a common place (directory location) Easier to locate for updates Define a global. css style sheet Common to ALL web pages Define section. css style sheets Use with specific areas of a web page Create different. css files for distinctive uses Split the. css files into smaller files Larger files take longer to download Import/Link. css files as needed Save download time Place styles in the <HEAD> AFTER the Java. Script code Place the <STYLE> tags in the same place - consistency Avoid using styles directly (inline) in the tags Sample Page DTHML: 55 cs 332 a_chapt 02. ppt