Fred R Mc Clurg Software Engineer Kirkwood College

The Need for CSS Discussion: CSS fills a capability lacking in HTML Example (Old-school

Block-level Elements Description: Creates breaks before and after the element box Examples: <div style=”color:

Inline Styles Description: Often nested within other elements and does not break before and

The <link> Tag Syntax: <link attribute=”value”. . . /> Example: <head> <link rel=”stylesheet” type=”text/css”

Alternate Style Sheets Purpose: Allows selection between multiple styles Example: <link rel=”stylesheet” type=”text/css” href=”blue.

The <style> Tag Purpose: Cascading Style Sheet information for one page Example: <head> <style

The @import Directive Advantages: Allows multiple Cascading Style Sheet files Example: <head> <style type=”text/css”>

Hiding CSS from older browsers Description: Use HTML comments which are ignored by CSS

CSS Comments Description: CSS comments allow you embed documentation Examples: /* CSS comments are

CSS Rule Structure Syntax Description: Each part of the CSS structure has a name

Element Selector Description: Most often an HTML (or XML) tag Example (HTML): /* h

Style Syntax (revisted) Syntax: element. Elector { property 1: value 1; property 2: value

CSS Common Errors Description: Like submarines CSS errors are silent and deadly Typical Errors:

CSS Common Errors (cont. ) Description: Like submarines CSS errors are silent and deadly

Cascading (Over Lapping) Element Selector Description: CSS declarations apply to the most specific HTML

Grouping Selectors Description: Multiple Selectors can apply to the same declaration Example: h 2,

Universal Selector Description: Universal Selector matches any element (like a wild card) Example: *

Grouping Declarations Description: One element can have multiple declarations Example (non-grouping declarations): h 1

Group Declaration Errors Description: Omitting semi-colon will cause declaration(s) to be ignored. Example: h

Class Selectors Situation: You may wish to apply same style to several elements but

Class Selectors (cont. ) Description: Style definitions can be encapsulated and given a name

Universal Class Selector Description: You can use the Universal Selector to apply styles to

Cascading Class Selectors Problem: Classes associated with specific a element apply only to that

Cascading Class Selectors (cont. ) Solution: Using a general class selector and an element

Multiple Classes Description: Multiple classes can be applied to an element. Example: . warning

Multiple Classes (Cont. ) Description: Multiple Class Selectors are not order dependant but are

ID Selectors Description: ID Selectors are similar to class selectors except they are preceded

Differences Between Class and ID Class: Many elements can have the same class. ID:

Similarities Between Class and ID Description: Class and ID Selectors are case-sensitive. Example: p.

Attribute Selector (Attribute Only) Description: Used for selecting an attribute regardless of the attribute

Attribute Selector (Selecting One Attribute) Description: For diagnostic purposes, you may be able to

Attribute Selector (Selecting Multiple Attributes) Description (repeated): For diagnostic purposes, you may be able

Attribute Selector (Select Attribute and Value) Description: You can also specify the elements that

Attribute Selector (with Partial Attribute Value) Description: It is possible to select an element

Attribute Selectors (Additional) Description: Additional Attribute Selectors exist to match values. Example: /* selects

Descendant or Contextual Selectors Description: Elements can be selected that match a certain parent/child

Slides: 38

Download presentation

Fred R. Mc. Clurg Software Engineer Kirkwood College Continuing Education & Training Services Cascading Style Sheets (CSS) Advanced HTML Web Development Certificate 10 -02 -2008

The Need for CSS Discussion: CSS fills a capability lacking in HTML Example (Old-school HTML): “Gray hair is a crown of splendor. ” Example (New-school CSS): p {color: gray; } 2

Block-level Elements Description: Creates breaks before and after the element box Examples: <div style=”color: blue; ”> I'm so blue. . . </div> I'm so blue. . . 3

Inline Styles Description: Often nested within other elements and does not break before and after element box Examples: I'm so blue. . . I'm so blue. . . 4

The <link> Tag Syntax: <link attribute=”value”. . . /> Example: <head> <link rel=”stylesheet” type=”text/css” href=”styles. css” media=”all” /> </head> 5

Alternate Style Sheets Purpose: Allows selection between multiple styles Example: <link rel=”stylesheet” type=”text/css” href=”blue. css” title=”Grape” /> <link rel=”stylesheet” type=”text/css” href=”red. css” title=”Apple” /> <link rel=”stylesheet” type=”text/css” href=”green. css” title=”Lime” /> 6

The <style> Tag Purpose: Cascading Style Sheet information for one page Example: <head> <style type=”text/css”> h 1 {color: gray; } </style> </head> 7

The @import Directive Advantages: Allows multiple Cascading Style Sheet files Example: <head> <style type=”text/css”> @import url(red. css); @import url(blue. css); @import url(green. css); </style> </head> 8

Hiding CSS from older browsers Description: Use HTML comments which are ignored by CSS Example: <style type=”text/css”>  9

CSS Comments Description: CSS comments allow you embed documentation Examples: /* CSS comments are similar to C */ /* Comments can span multiple lines */ pre {color: gray; } /* end of line */ 10

CSS Rule Structure Syntax Description: Each part of the CSS structure has a name Example: h 1 { /* element selector */ /* begin declaration block */ /* first declaration */ color: /* property */ red; /* value */ . . . } /* end declaration block */ 11

Element Selector Description: Most often an HTML (or XML) tag Example (HTML): /* h 1 is HTML element selector */ h 1 {color: red; } Example (XML): /* BOOK is XML element selector */ BOOK {color: red; } 12

Style Syntax (revisted) Syntax: element. Elector { property 1: value 1; property 2: value 2. . . ; . . . } Notes: 1. White space is ignored 2. Some properties accept more than one value (space separated) 3. Declarations terminated with a semi-colon 4. Property/value pairs separated by a colon 13

CSS Common Errors Description: Like submarines CSS errors are silent and deadly Typical Errors: /* unknown property */ body {brain-size: 2 cm; } /* unknown value */ body {color: ultraviolet; } /* semi-colon wrong place */ body {color: red}; 14

CSS Common Errors (cont. ) Description: Like submarines CSS errors are silent and deadly Typical Errors: body {font-family: times /* missing “; ” */ font-style: italic; } /* missing colon */ body {color blue; } /* last semi-colon optional, however. . . */ body {font-family: times; font-style: italic} /* not advised */ 15

CSS Common Errors (cont. ) Description: Like submarines CSS errors are silent and deadly Typical Errors: /* should not be comma value separators */ body {font: italic, small-caps, 900, 12 px, arial} /* commas mean “or” */ /* should not be space value separators */ body {font-family: arial "lucida console" sans-serif; } / spaces mean “and” */ 16

Cascading (Over Lapping) Element Selector Description: CSS declarations apply to the most specific HTML element in the hierarchy Example: body {font-family: arial; } p {font-family: times; } em {font-family: courier; } Question: <html> What font family? </html> 17

Grouping Selectors Description: Multiple Selectors can apply to the same declaration Example: h 2, p {color: gray; } /* note commas separating elements */ Equivalent to the following: h 2 {color: gray; } p {color: gray; } 18

Universal Selector Description: Universal Selector matches any element (like a wild card) Example: * {color: red; } 19

Grouping Declarations Description: One element can have multiple declarations Example (non-grouping declarations): h 1 {font: 18 px helvetica; } h 1 {color: purple; } h 1 {background: aqua; } Example (grouping declarations): h 1 {font: 18 x helvetica; color: purple; background: aqua; } 20

Group Declaration Errors Description: Omitting semi-colon will cause declaration(s) to be ignored. Example: h 1 {font: 18 x helvetica; color: purple /* missing “; ” */ background: aqua; } Equivalent to the following: h 1 {font: 18 x helvetica; color: purple background: aqua; } Explanation: The property “color” can only accept one keyword value. CSS may render “h 1” as purple color or skip the declaration and use the default black color. 21

Class Selectors Situation: You may wish to apply same style to several elements but not all. Poor Example (not quite what is needed): p {font-weight: bold; color: red; } Explanation: Definition applies to all paragraphs not just the ones selected. 22

Class Selectors (cont. ) Description: Style definitions can be encapsulated and given a name Better Example (using class selectors): p. warning {font-weight: bold; color: red; }. . . It is critical. . . 23

Universal Class Selector Description: You can use the Universal Selector to apply styles to all elements Example: *. warning {font-weight: bold; } Note: The Universal Selector is optional and can be omitted from a class selector. For example: . warning {font-weight: bold; } 24

Cascading Class Selectors Problem: Classes associated with specific a element apply only to that element and do not cascade. Example (no cascading): p. warning {font-weight: bold; } span. warning {font-style: bold; }. . . I am bold I am italic and not bold I am bold again 25

Cascading Class Selectors (cont. ) Solution: Using a general class selector and an element specific class selector will result in a cascading effect. Example (with cascading): . warning /* general class selector */ {font-weight: bold; } span. warning {font-style: bold; }. . . I am bold I am bold and italic I am bold and not italic again 26

Multiple Classes Description: Multiple classes can be applied to an element. Example: . warning {font-weight: bold; }. urgent {font-style: italic; }. warning. urgent {background: silver; }. . . This is a warning This is urgent This warning is urgent Exercise: What font does urgent warning use? 27

Multiple Classes (Cont. ) Description: Multiple Class Selectors are not order dependant but are name dependant. Example: . warning. help {color: red; }. . . Text not red Red, bold, italic, and silver background text Same font as above 28

ID Selectors Description: ID Selectors are similar to class selectors except they are preceded with an octothorpe (#) instead of a period and use an “id” attribute instead of class. Example: *#first. Para {font-weight: bold; }. . . Bold face text Note: Universal Selector can be omitted, for example: #first. Para {font-weight: bold; } 29

Differences Between Class and ID Class: Many elements can have the same class. ID: Each ID value is unique and should apply to only one element. Note: Most browsers do not check for the uniqueness of the ID values and may treat ID and Class identically. However, the Java. Script function “get. Element. By. Id()” expects that each element has an unique value. ID: Multiple ID Selectors can't be combined. Space separators are not permitted as ID attributes values. 30

Similarities Between Class and ID Description: Class and ID Selectors are case-sensitive. Example: p. Critical. Info {font-weight: bold; }. . . The selector will not match the element 31

Attribute Selector (Attribute Only) Description: Used for selecting an attribute regardless of the attribute value. Example: h 1[class] {color: silver; }. . . <h 1 class=”ps”> Psalms </h 1> <h 1 class=”ge”> Genesis </h 1> <h 1 class=”pr”> Proverbs </h 1> 32

Attribute Selector (Selecting One Attribute) Description: For diagnostic purposes, you may be able to use the Attribute Selector to highlight those elements that possess a certain attribute to distinguish it from those that do not possess that attribute. Example: /* select “alt” attribute images */ img[alt] {border: 3 px solid red; } /* all elements with “title” attribute */ *[title] {color: yellow; background: black; } 33

Attribute Selector (Selecting Multiple Attributes) Description (repeated): For diagnostic purposes, you may be able to use the Attribute Selector to highlight those elements that possess certain attributes to distinguish it from those that do not possess those attributes. Example: /* select all hypertext links that also contain a title */ a[href][title] {border: 3 px solid blue; } 34

Attribute Selector (Select Attribute and Value) Description: You can also specify the elements that have a specific attribute value. Example: a[href=”http: //www. irs. gov”] {font-weight: bold; font-size: 200%} *[id=” 321”] {background: #ff 00 ff; } Example (matching attributes with spaces): /* note: exact string match */ p[class=”urgent warning”] {font-weight: bold; font-color: red; } 35

Attribute Selector (with Partial Attribute Value) Description: It is possible to select an element that contains a single attribute value from a list of multiple space delimited values. Example: p[class~=”warning”] {font-weight: bold; }. . .  Beware all who enter</a> Example: /* would not match class “warning” */ p[class~=”warn”] {font-weight: bold; } 36

Attribute Selectors (Additional) Description: Additional Attribute Selectors exist to match values. Example: /* selects classes named “foobar”, “barfoo”, and “bare” (sub-string match) */ span[class*=”bar”] {background: silver; } /* selects classes with an attribute that begins with “bar” */ span[class^=”bar”] {color: red}; /* matches classes with an attribute that ends with “bar” */ p[class$=”bar”] {font-weight: bold; } 37

Descendant or Contextual Selectors Description: Elements can be selected that match a certain parent/child relationships. Example: h 1 em {color: magenta; }. . . <h 1> I was not selected </h 1> I was not selected either <h 1> I have been selected </h 1> 38