Embed Size (px)
Citation preview
10-02-2008
Advanced HTMLWeb Development Certificate
Fred R. McClurgSoftware Engineer
Kirkwood College
Continuing Education & Training Services
Cascading Style Sheets (CSS)Cascading Style Sheets (CSS)
2
The Need for CSS
Discussion:
CSS fills a capability lacking in HTML
Example (Old-school HTML):
<p> <font color=”gray”>
“Gray hair is a crown of splendor.”
</font> </p>
Example (New-school CSS):
p {color: gray;}
3
Block-level Elements
Description:
Creates breaks before and after the element box
Examples:
<div style=”color: blue;”> I'm so blue ...</div>
<p style=”color: blue;”> I'm so blue ...</p>
4
Inline Styles
Description:
Often nested within other elements and does not break before and after element box
Examples:
<p> <em style=”color: blue;”> I'm so blue ...</em> </p>
<p> <span style=”color: blue;
font-style: italic”> I'm so blue ...</span> </p>
5
The <link> Tag
Syntax:
<link attribute=”value” ... />
Example:
<head>
<link rel=”stylesheet”
type=”text/css”
href=”styles.css”
media=”all” />
</head>
6
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” />
7
The <style> Tag
Purpose:
Cascading Style Sheet information for one page
Example:
<head>
<style type=”text/css”>
h1 {color: gray;}
</style>
</head>
8
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>
9
Hiding CSS from older browsers
Description:
Use HTML comments which are ignored by CSS
Example:
<style type=”text/css”>
<!-- /* begin cloaking */
h1{font-size: 40pt;}
h2{font-size: 30pt;}
h3{font-size: 20pt;}
/* end cloaking */ -->
</style>
10
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 */
11
CSS Rule Structure Syntax
Description:
Each part of the CSS structure has a name
Example:
h1 /* element selector */
{ /* begin declaration block */
/* first declaration */
color: /* property */
red; /* value */
...
} /* end declaration block */
12
Element Selector
Description:
Most often an HTML (or XML) tag
Example (HTML):
/* h1 is HTML element selector */
h1 {color: red;}
Example (XML):
/* BOOK is XML element selector */
BOOK {color: red;}
13
Style Syntax (revisted)
Syntax:
elementElector
{
property1: value1;
property2: value2 ...;
...
}
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
14
CSS Common Errors
Description:
Like submarines CSS errors are silent and deadly
Typical Errors:/* unknown property */body {brain-size: 2cm;}
/* unknown value */body {color: ultraviolet;}
/* semi-colon wrong place */body {color: red};
15
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 */
16
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, 12px, arial} /* commas mean “or” */
/* should not be space value separators */
body {font-family: arial "lucida console" sans-serif;} / spaces mean “and” */
17
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> <p> <em>What font family?<em> <p> </html>
18
Grouping Selectors
Description:
Multiple Selectors can apply to the same declaration
Example:
h2, p {color: gray;} /* note commas separating elements */
Equivalent to the following:
h2 {color: gray;}
p {color: gray;}
19
Universal Selector
Description:
Universal Selector matches any element (like a wild card)
Example:
* {color: red;}
20
Grouping Declarations
Description:
One element can have multiple declarations
Example (non-grouping declarations):
h1 {font: 18px helvetica;}h1 {color: purple;}h1 {background: aqua;}
Example (grouping declarations):
h1 {font: 18x helvetica; color: purple; background: aqua;}
21
Group Declaration Errors
Description: Omitting semi-colon will cause declaration(s) to be ignored.
Example:
h1 {font: 18x helvetica; color: purple /* missing “;” */ background: aqua;}
Equivalent to the following:
h1 {font: 18x helvetica; color: purple background: aqua;}
Explanation: The property “color” can only accept one keyword value. CSS may render “h1” as purple color or skip the declaration and use the default black color.
22
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.
23
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;}
...
<p class=”warning”>It is critical ...</p>
24
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;}
25
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;}...<p class=”warning”>I am bold<span class=”warning”>
I am italic and not bold</span>I am bold again
</p>
26
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;}...<p class=”warning”> I am bold<span class=”warning”>
I am bold and italic</span>I am bold and not italic again </p>
27
Multiple Classes
Description:Multiple classes can be applied to an element.
Example:
.warning {font-weight: bold;}
.urgent {font-style: italic;}
.warning.urgent {background: silver;}
...<p class=”warning”> This is a warning </p><p class=”urgent”> This is urgent </p><p class=”warning urgent”> This warning is urgent </p>
Exercise: What font does urgent warning use?
28
Multiple Classes (Cont.)
Description:Multiple Class Selectors are not order dependant but are name dependant.
Example:
.warning.help {color: red;}
...<p class=”warning urgent”>Text not red</p>
<p class=”urgent warning help”>Red, bold, italic, and silver background text</p>
<p class=”help warning urgent”>Same font as above</p>
29
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:
*#firstPara {font-weight: bold;}...<p id=”firstPara”>Bold face text</p>
Note: Universal Selector can be omitted, for example:
#firstPara {font-weight: bold;}
30
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 JavaScript function “getElementById()” 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.
31
Similarities Between Class and ID
Description:Class and ID Selectors are case-sensitive.
Example:
p.CriticalInfo {font-weight: bold;}...<p class=”criticalinfo”> The selector will not match the element </p>
32
Attribute Selector (Attribute Only)
Description:Used for selecting an attribute regardless of the attribute value.
Example:
h1[class] {color: silver;}...<h1 class=”ps”> Psalms </h1><h1 class=”ge”> Genesis </h1><h1 class=”pr”> Proverbs </h1>
33
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: 3px solid red;}
/* all elements with “title” attribute */*[title] {color: yellow; background: black;}
34
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: 3px solid blue;}
35
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: #ff00ff;}
Example (matching attributes with spaces):/* note: exact string match */p[class=”urgent warning”]{font-weight: bold; font-color: red;}
36
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;}...<!-- CSS matches the following --><p class=”urgent warning”>Beware all who enter</a>
Example:/* would not match class “warning” */p[class~=”warn”] {font-weight: bold;}
37
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;}
38
Descendant or Contextual Selectors
Description:Elements can be selected that match a certain parent/child relationships.
Example:h1 em {color: magenta;}...<h1> I was not selected </h1><em> I was not selected either </em><h1> <em> I have been selected </em> </h1>
