10-02-2008 Advanced HTML Web Development Certificate Fred R. McClurg Software Engineer Kirkwood...
-
Upload
brent-phillips -
Category
Documents
-
view
217 -
download
0
Transcript of 10-02-2008 Advanced HTML Web Development Certificate Fred R. McClurg Software Engineer Kirkwood...
![Page 1: 10-02-2008 Advanced HTML Web Development Certificate Fred R. McClurg Software Engineer Kirkwood College Continuing Education & Training Services Cascading.](https://reader035.fdocuments.in/reader035/viewer/2022062804/56649e9f5503460f94ba10dc/html5/thumbnails/1.jpg)
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)
![Page 2: 10-02-2008 Advanced HTML Web Development Certificate Fred R. McClurg Software Engineer Kirkwood College Continuing Education & Training Services Cascading.](https://reader035.fdocuments.in/reader035/viewer/2022062804/56649e9f5503460f94ba10dc/html5/thumbnails/2.jpg)
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;}
![Page 3: 10-02-2008 Advanced HTML Web Development Certificate Fred R. McClurg Software Engineer Kirkwood College Continuing Education & Training Services Cascading.](https://reader035.fdocuments.in/reader035/viewer/2022062804/56649e9f5503460f94ba10dc/html5/thumbnails/3.jpg)
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>
![Page 4: 10-02-2008 Advanced HTML Web Development Certificate Fred R. McClurg Software Engineer Kirkwood College Continuing Education & Training Services Cascading.](https://reader035.fdocuments.in/reader035/viewer/2022062804/56649e9f5503460f94ba10dc/html5/thumbnails/4.jpg)
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>
![Page 5: 10-02-2008 Advanced HTML Web Development Certificate Fred R. McClurg Software Engineer Kirkwood College Continuing Education & Training Services Cascading.](https://reader035.fdocuments.in/reader035/viewer/2022062804/56649e9f5503460f94ba10dc/html5/thumbnails/5.jpg)
5
The <link> Tag
Syntax:
<link attribute=”value” ... />
Example:
<head>
<link rel=”stylesheet”
type=”text/css”
href=”styles.css”
media=”all” />
</head>
![Page 6: 10-02-2008 Advanced HTML Web Development Certificate Fred R. McClurg Software Engineer Kirkwood College Continuing Education & Training Services Cascading.](https://reader035.fdocuments.in/reader035/viewer/2022062804/56649e9f5503460f94ba10dc/html5/thumbnails/6.jpg)
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” />
![Page 7: 10-02-2008 Advanced HTML Web Development Certificate Fred R. McClurg Software Engineer Kirkwood College Continuing Education & Training Services Cascading.](https://reader035.fdocuments.in/reader035/viewer/2022062804/56649e9f5503460f94ba10dc/html5/thumbnails/7.jpg)
7
The <style> Tag
Purpose:
Cascading Style Sheet information for one page
Example:
<head>
<style type=”text/css”>
h1 {color: gray;}
</style>
</head>
![Page 8: 10-02-2008 Advanced HTML Web Development Certificate Fred R. McClurg Software Engineer Kirkwood College Continuing Education & Training Services Cascading.](https://reader035.fdocuments.in/reader035/viewer/2022062804/56649e9f5503460f94ba10dc/html5/thumbnails/8.jpg)
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>
![Page 9: 10-02-2008 Advanced HTML Web Development Certificate Fred R. McClurg Software Engineer Kirkwood College Continuing Education & Training Services Cascading.](https://reader035.fdocuments.in/reader035/viewer/2022062804/56649e9f5503460f94ba10dc/html5/thumbnails/9.jpg)
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>
![Page 10: 10-02-2008 Advanced HTML Web Development Certificate Fred R. McClurg Software Engineer Kirkwood College Continuing Education & Training Services Cascading.](https://reader035.fdocuments.in/reader035/viewer/2022062804/56649e9f5503460f94ba10dc/html5/thumbnails/10.jpg)
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 */
![Page 11: 10-02-2008 Advanced HTML Web Development Certificate Fred R. McClurg Software Engineer Kirkwood College Continuing Education & Training Services Cascading.](https://reader035.fdocuments.in/reader035/viewer/2022062804/56649e9f5503460f94ba10dc/html5/thumbnails/11.jpg)
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 */
![Page 12: 10-02-2008 Advanced HTML Web Development Certificate Fred R. McClurg Software Engineer Kirkwood College Continuing Education & Training Services Cascading.](https://reader035.fdocuments.in/reader035/viewer/2022062804/56649e9f5503460f94ba10dc/html5/thumbnails/12.jpg)
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;}
![Page 13: 10-02-2008 Advanced HTML Web Development Certificate Fred R. McClurg Software Engineer Kirkwood College Continuing Education & Training Services Cascading.](https://reader035.fdocuments.in/reader035/viewer/2022062804/56649e9f5503460f94ba10dc/html5/thumbnails/13.jpg)
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
![Page 14: 10-02-2008 Advanced HTML Web Development Certificate Fred R. McClurg Software Engineer Kirkwood College Continuing Education & Training Services Cascading.](https://reader035.fdocuments.in/reader035/viewer/2022062804/56649e9f5503460f94ba10dc/html5/thumbnails/14.jpg)
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};
![Page 15: 10-02-2008 Advanced HTML Web Development Certificate Fred R. McClurg Software Engineer Kirkwood College Continuing Education & Training Services Cascading.](https://reader035.fdocuments.in/reader035/viewer/2022062804/56649e9f5503460f94ba10dc/html5/thumbnails/15.jpg)
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 */
![Page 16: 10-02-2008 Advanced HTML Web Development Certificate Fred R. McClurg Software Engineer Kirkwood College Continuing Education & Training Services Cascading.](https://reader035.fdocuments.in/reader035/viewer/2022062804/56649e9f5503460f94ba10dc/html5/thumbnails/16.jpg)
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” */
![Page 17: 10-02-2008 Advanced HTML Web Development Certificate Fred R. McClurg Software Engineer Kirkwood College Continuing Education & Training Services Cascading.](https://reader035.fdocuments.in/reader035/viewer/2022062804/56649e9f5503460f94ba10dc/html5/thumbnails/17.jpg)
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>
![Page 18: 10-02-2008 Advanced HTML Web Development Certificate Fred R. McClurg Software Engineer Kirkwood College Continuing Education & Training Services Cascading.](https://reader035.fdocuments.in/reader035/viewer/2022062804/56649e9f5503460f94ba10dc/html5/thumbnails/18.jpg)
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;}
![Page 19: 10-02-2008 Advanced HTML Web Development Certificate Fred R. McClurg Software Engineer Kirkwood College Continuing Education & Training Services Cascading.](https://reader035.fdocuments.in/reader035/viewer/2022062804/56649e9f5503460f94ba10dc/html5/thumbnails/19.jpg)
19
Universal Selector
Description:
Universal Selector matches any element (like a wild card)
Example:
* {color: red;}
![Page 20: 10-02-2008 Advanced HTML Web Development Certificate Fred R. McClurg Software Engineer Kirkwood College Continuing Education & Training Services Cascading.](https://reader035.fdocuments.in/reader035/viewer/2022062804/56649e9f5503460f94ba10dc/html5/thumbnails/20.jpg)
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;}
![Page 21: 10-02-2008 Advanced HTML Web Development Certificate Fred R. McClurg Software Engineer Kirkwood College Continuing Education & Training Services Cascading.](https://reader035.fdocuments.in/reader035/viewer/2022062804/56649e9f5503460f94ba10dc/html5/thumbnails/21.jpg)
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.
![Page 22: 10-02-2008 Advanced HTML Web Development Certificate Fred R. McClurg Software Engineer Kirkwood College Continuing Education & Training Services Cascading.](https://reader035.fdocuments.in/reader035/viewer/2022062804/56649e9f5503460f94ba10dc/html5/thumbnails/22.jpg)
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.
![Page 23: 10-02-2008 Advanced HTML Web Development Certificate Fred R. McClurg Software Engineer Kirkwood College Continuing Education & Training Services Cascading.](https://reader035.fdocuments.in/reader035/viewer/2022062804/56649e9f5503460f94ba10dc/html5/thumbnails/23.jpg)
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>
![Page 24: 10-02-2008 Advanced HTML Web Development Certificate Fred R. McClurg Software Engineer Kirkwood College Continuing Education & Training Services Cascading.](https://reader035.fdocuments.in/reader035/viewer/2022062804/56649e9f5503460f94ba10dc/html5/thumbnails/24.jpg)
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;}
![Page 25: 10-02-2008 Advanced HTML Web Development Certificate Fred R. McClurg Software Engineer Kirkwood College Continuing Education & Training Services Cascading.](https://reader035.fdocuments.in/reader035/viewer/2022062804/56649e9f5503460f94ba10dc/html5/thumbnails/25.jpg)
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>
![Page 26: 10-02-2008 Advanced HTML Web Development Certificate Fred R. McClurg Software Engineer Kirkwood College Continuing Education & Training Services Cascading.](https://reader035.fdocuments.in/reader035/viewer/2022062804/56649e9f5503460f94ba10dc/html5/thumbnails/26.jpg)
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>
![Page 27: 10-02-2008 Advanced HTML Web Development Certificate Fred R. McClurg Software Engineer Kirkwood College Continuing Education & Training Services Cascading.](https://reader035.fdocuments.in/reader035/viewer/2022062804/56649e9f5503460f94ba10dc/html5/thumbnails/27.jpg)
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?
![Page 28: 10-02-2008 Advanced HTML Web Development Certificate Fred R. McClurg Software Engineer Kirkwood College Continuing Education & Training Services Cascading.](https://reader035.fdocuments.in/reader035/viewer/2022062804/56649e9f5503460f94ba10dc/html5/thumbnails/28.jpg)
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>
![Page 29: 10-02-2008 Advanced HTML Web Development Certificate Fred R. McClurg Software Engineer Kirkwood College Continuing Education & Training Services Cascading.](https://reader035.fdocuments.in/reader035/viewer/2022062804/56649e9f5503460f94ba10dc/html5/thumbnails/29.jpg)
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;}
![Page 30: 10-02-2008 Advanced HTML Web Development Certificate Fred R. McClurg Software Engineer Kirkwood College Continuing Education & Training Services Cascading.](https://reader035.fdocuments.in/reader035/viewer/2022062804/56649e9f5503460f94ba10dc/html5/thumbnails/30.jpg)
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.
![Page 31: 10-02-2008 Advanced HTML Web Development Certificate Fred R. McClurg Software Engineer Kirkwood College Continuing Education & Training Services Cascading.](https://reader035.fdocuments.in/reader035/viewer/2022062804/56649e9f5503460f94ba10dc/html5/thumbnails/31.jpg)
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>
![Page 32: 10-02-2008 Advanced HTML Web Development Certificate Fred R. McClurg Software Engineer Kirkwood College Continuing Education & Training Services Cascading.](https://reader035.fdocuments.in/reader035/viewer/2022062804/56649e9f5503460f94ba10dc/html5/thumbnails/32.jpg)
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>
![Page 33: 10-02-2008 Advanced HTML Web Development Certificate Fred R. McClurg Software Engineer Kirkwood College Continuing Education & Training Services Cascading.](https://reader035.fdocuments.in/reader035/viewer/2022062804/56649e9f5503460f94ba10dc/html5/thumbnails/33.jpg)
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;}
![Page 34: 10-02-2008 Advanced HTML Web Development Certificate Fred R. McClurg Software Engineer Kirkwood College Continuing Education & Training Services Cascading.](https://reader035.fdocuments.in/reader035/viewer/2022062804/56649e9f5503460f94ba10dc/html5/thumbnails/34.jpg)
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;}
![Page 35: 10-02-2008 Advanced HTML Web Development Certificate Fred R. McClurg Software Engineer Kirkwood College Continuing Education & Training Services Cascading.](https://reader035.fdocuments.in/reader035/viewer/2022062804/56649e9f5503460f94ba10dc/html5/thumbnails/35.jpg)
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;}
![Page 36: 10-02-2008 Advanced HTML Web Development Certificate Fred R. McClurg Software Engineer Kirkwood College Continuing Education & Training Services Cascading.](https://reader035.fdocuments.in/reader035/viewer/2022062804/56649e9f5503460f94ba10dc/html5/thumbnails/36.jpg)
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;}
![Page 37: 10-02-2008 Advanced HTML Web Development Certificate Fred R. McClurg Software Engineer Kirkwood College Continuing Education & Training Services Cascading.](https://reader035.fdocuments.in/reader035/viewer/2022062804/56649e9f5503460f94ba10dc/html5/thumbnails/37.jpg)
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;}
![Page 38: 10-02-2008 Advanced HTML Web Development Certificate Fred R. McClurg Software Engineer Kirkwood College Continuing Education & Training Services Cascading.](https://reader035.fdocuments.in/reader035/viewer/2022062804/56649e9f5503460f94ba10dc/html5/thumbnails/38.jpg)
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>