Download presentation
Presentation is loading. Please wait.
1
CS332A Advanced HTML Programming
Chapter 2 CSS Placement HTML Tag Affects the specific tag only (Inline Rule) To override preceding CSS rules Format: <HTML-Tag style=“property:value;”> …… </HTML-Tag> Head of Document Effects entire document web page Between <HEAD> and </HEAD> HTML tags <style type=“text/css”> selector{property:value;} selector{property:value;} </style> 18 20
2
CS332A Advanced HTML Programming
Chapter 2 H1 {font:small-caps bold italic 2.5em ‘minion web’ Georgia, ‘Times New Roman’, Times, serif; color: red;} 18/21 FORMAT H1 Tag to be defined { Begin definition font: Description will be of a font small-caps bold italic 2.5em ‘minion web’ Georgia, ‘Times New Roman’, Times, serif; color: red; } End of CSS Rule
3
CS332A Advanced HTML Programming
Chapter 2 LAB I CSS Placement HTML Tag (see links from web site) 1. Document without CSS - using h1 header defaults 2. Document with h1 headers hardcoded into web page 3. Document with CSS hardcoded into web page
4
CS332A Advanced HTML Programming
Chapter 2 CSS Placement Link to a CSS document 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”> <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 23
5
CS332A Advanced HTML Programming
LAB II CSS Placement Link (see links from web site) Document with CSS linked into web page CSS Document linked into web page
6
CS332A Advanced HTML Programming
Chapter 2 CSS Placement Import a CSS document 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 url(filename2.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 28
7
CS332A Advanced HTML Programming
Chapter 2 LAB III CSS Placement Import (see links from web site) Document with CSS imported into web page CSS Document imported into web page
8
CS332A Advanced HTML Programming
Chapter 2 Defining Classes 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) 31 FORMAT . Begin with a period Somename unique name { left bracket Property:value; assign properties and values } closing bracket
9
CS332A Advanced HTML Programming
Chapter 2 Defining Classes Creating a unique Tag 31 Usage CSS hardcoded, linked, or imported .smith {font-size: 18px; line-height: 75%;} <head> <style type=“text/css”> Blockquote.smith {font-size: 14px;} </style> </head>
10
CS332A Advanced HTML Programming
Chapter 2 Defining IDs Identify and Object 33 Set up a style to be used with any tag Cornerstone of Dynamic HTML (DHTML) Allow JavaScript 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
11
Defining NEW Inline HTML Tags
CS332A 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=“someID”>…………..</span> Sample Page DTHML: 35/36 Web page: DHTM:35, Figure 2.19 Code: DHTML:35/36, Code 2.10 35
12
Defining Block-Level HTML Tags
CS332A Advanced HTML Programming Chapter 2 Defining Block-Level HTML Tags 37 <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=“someID”>…………..</div> Sample Page DTHML: 37/38 Web page: DHTM:37, Figure 2.20 Code: DHTML:37/38, Code 2.11
13
Multiple Tags with the same rules
CS332A 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
14
CS332A Advanced HTML Programming
Chapter 2 Define tags in context 41 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
15
CS332A Advanced HTML Programming
Chapter 2 Making a tag important 43 Add !important to the definition Sample Page DTHML: 43/44 Web page: DHTM:43, Figure 2.26 Code: DHTML:44, Code 2.14
16
CS332A Advanced HTML Programming
Chapter 2 Inheritance 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
17
CS332A Advanced HTML Programming
Chapter 2 Cascade Order 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,
18
CS332A Advanced HTML Programming
Chapter 2 Display or Printing 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
19
CS332A Advanced HTML Programming
Chapter 2 Comments 54 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 */ /* 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
20
Style-Sheet Strategies
CS332A 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 JavaScript code Place the <STYLE> tags in the same place - consistency Avoid using styles directly (inline) in the tags Sample Page DTHML: 55
Similar presentations
