Curriculum Design and Instruction To Teach
Beginning CSS (Cassidy Style Sheets)Web
Development: From Novice To Professional:
Author: Charles Hayes:
In computing, Cascading Style Sheets
(CSS) is a stylesheet language used
to describe the presentation of a
document written in a markup language.
Its most common application is to style
web pages written in HTML and XHTML, but
the language can be applied to any kind
of XML document, including SVG and XUL.
The CSS specifications are maintained by
the World Wide Web Consortium (W3C).
CSS has various levels and profiles. Each
level of CSS builds upon the last, typically
adding new features and are typically denoted
as CSS1, CSS2, and CSS3. Profiles are typically
a subset of one or more levels of CSS built for
a particular device or user interface. Currently
there are profiles for mobile devices, printers,
and television sets. Profiles should not be
confused with media types which were added in
CSS2
Special Features Included In This
Curriculum Design and Instruction
Are:
* Phases For Conducting A Needs Assessment:
* Curriculum Design Supplement:
|A|. Subject-Questions-Answers:
* Curriculum Design Plan:
* Lesson Plans:
* Instructional Goals:
* Instructional Objectives:
* Instructional Activities:
* Instructional Evaluation Techniques:
* Standard Vocabulary:
* A Limited Glimpse:
Topics Include:
* Get To Know CSS:
@ Getting Started:
* Introduction:
1. Applying CSS to (X)HTML:
a. Preparing a Base (X)HTML Template:
b. Inline Styles:
c. Embedded Styles:
d. External Styles:
2. Importing and Combining Styles:
a. Print Style Sheets:
b. Other Style Sheets:
3. Maintaining and Organizing Style Sheets:
a. Multiple Directories:
b. Multiple Style Sheets:
c. Utilizing Screen Style Sheets
for Other Devices:
4. Effective CSS Syntax:
a. Defining a Style:
b. Commenting:
c. Flagging Rules:
d. Indenting for Clarity:
e. You're Ready to Proceed:
@ Core Concepts Of CSS:
* Introduction:
1. ID vs. Class:
a. IDs:
b. Class:
2. Using the Cascade:
a. The Cascade Through Varyiong Methods of
Application:
b. The Cascade Through Multiple External Style
Sheets:
c. The Cascade Through Imported Style Sheets:
d. Bottom of the Ladder:
e. Careful with the Cascade:
3. Grouping:
a. Group Exceptions:
4. Inheritance:
a. Parents and Children:
b. So How Does Inheritance Work?
c. Inheriting the Body:
d. A Word of Warning:
5. Contextual Selectors:
6. CSS Measurements:
a. Absolute Measurements:
b. Relative Measurements:
c. Pixels:
d. Percentage:
f. Ems:
7. Conclusion:
@ CSS Building Blocks:
* Introduction:
1. Divisions (Divs):
a. Adding a Div:
b. Adding Child Divs:
c. Divs and Contextual Selectors:
2. Dimensions: Width and Height:
3. Margin:
a. Margin Declarations:
b. Centering with margin: auto:
4. Padding:
a. Padding Declarations:
b. Padding Shortcuts:
5. Margin, Padding, and the Body Border:
a. Border Properties:
b. Bordering on the Obvious:
6. Conclusion:
@ Text:
* Introduction:
1. Why Is Text So Important?
a. Convey the Mood with the Right Font:
b. Clear Type Font Smoothing:
2. Primary Font Properties:
a. Specifying Fonts:
b. Font Shorthand:
3. Available Fonts:
a. Web-Safe Fonts:
b. Interesting Alternatives:
c. Be Careful with Fonts:
4. Default Browswer Display:
5. Apply Some Style:
a. Define Your Style Sheet:
b. Body Declarations:
6. Please, Please Use line-height!
a. Setting the line-height Using Percentage:
b. Other Line-height Values:
7. Letter-spacing (Kerning):
8. Other Key Font Peoperties:
a. font-weight:
b. font-style:
c. font-variant:
d. text-transform:
e. Combining Several Font Properties:
g. More Font Shorthand:
9. Getting Clever with Text:
a. Quote Me on This:
b. Indenting Paragraphs:
c. Ye Olde Drop Caps:
10. May the Font Be with You:
@ Color, Backgrounds, and Images:
* Introduction:
1. A Brief History of Color:
a. Web Safety First?
b. Specifying Color:
c. Using the 17 Named Colors:
d. Must We Be Web Safe?
e. Selecting a Color Palette for
Your Design:
2. Color for Text:
3. Background Color:
a. Adding Background Color to Text:
b. Adding Background Color to Headings:
c. Background for Other Elements:
4. Image Formats for Backgrounds:
a. GIF:
b. JPEG:
c. PNG:
d. Got the Picture?
5. Background Image:
a. Sensible Use:
b. Prepare Your Template and Style sheet:
c. Specifying a Background Image:
d. Repeat:
e. Position:
f. Attachment:
g. Background Shorthand:
h. Conclusion:
@ Lists:
* Introduction:
1. Why Use Lists?
2. The Unordered Lists:
a. Basic List CSS:
b. Using Background Images for List Bullets:
c. The Inline List:
d. Taking Control with IDs:
e. Grouping Items with Classes:
f. Nested Lists:
3. Lists for Navigation:
a. The Vertical Navigation Bar:
4. The Ordered List:
a. Controlling the Ordered List:
b. Creating Custom Numbers:
c. Declaring the Numbers Using the Unique Classes:
d. Dressing up the Ordered List:
5. Conclusion:
@ Links:
* Introduction:
1. Link Markup:
2. Default Link Styling:
3. Simple CSS Rules:
a. Setup:
b. Changing Link Color:
c. A Note About Order: LoVe HAte:
4. Other Useful Link Properties:
a. Text-decoration:
b. Using Borders with Links:
c. Adding Symbols with Background Images:
5. Targeting Links with Descendant Selectors:
6. Transforming a Navigation Bar with Links:
a. Prepare the Template:
b. Define All Shared Link Declarations
and Clickable Area:
c. Define Background Colors:
d. Highlight the Current Page:
7. Conclusion:
@ Tables and Definitions Lists:
* Introduction:
1. Tables:
a. A Note About Accessibility:
b. What Is a Table For?
c. The Not Very Occassional Table:
d. border-collapse:
e. Customizing Elements:
2. Definition Lists:
a. Definition List Markup:
b. A List Inside a definition List:
c. Care with Definition Lists:
d. Further Reading:
3. Conclusion:
@ Forms:
* Introduction:
1. Markup Refresher:
a. Form Elements:
b. Accessibility Aids:
c. Ready-Made IDs:
2. Browser Rendering of Form Elements:
3. Basics of Form Styling:
a. Prepare a File and Style Sheet:
b. The Form CSS Block Is Complete:
4. Three Approaches:
a. About Each Example:
b. Table-Based Forms:
c. Paragraph and Break Element Layout:
d. Definition List Layout:
e. So Which Approach Is Best?
5. Conclusion:
* Logical Layouts:
@ Layout Basics:
* Introduction:
1. Floats and Clearing:
a. The float Property:
b. Floating Images:
c. Clearing Floats:
d. Clearing Your Floated Image:
2. Positioning:
a. Basic Position Properties and Values:
b. Position This In Your Mind:
3. Conclusion:
@ Classic Layouts:
* Introduction:
1. Types of Layout:
a. Fixed:
b. Liquid:
c. Elastic:
d. Variable Fixed Width:
2. Before You Build:
3. Liquid Floated Two-Column Layout:
a. Masthead and Footer:
b. The Floated Sidebar:
c. Liquid Float Left, Float Right:
4. Liquid Floated Three-Column Layout:
5. Liquid Positioned Two-Column Layout:
a. Height Is Important:
b. Footer Woes:
6. Liquid Positioned Three-Column
Layout:
a. Fixed-Width Layout:
a. The Box Model:
b. Fixed and Floated Three-Column
Layout:
7. Conclusion:
Layout Manipulation:
* Introduction:
1. Switching Layout with Contextual
Selectors:
a. Setup:
b. The Body:
2. Faux Columns:
a. Get Set Up:
b. What About the Bos Model?
c. Fluid faux Columns:
3. Conclusion:
@ The Journey From Layout To Template:
* Introduction:
1. Masthead:
a. Basic Masthead:
b. Floated Right Content (Search Tool):
2. Headings:
3. Navigation:
4. Cool Footers:
a. Quirky Footer:
b. The Action-Packed Footer:
5. Conclusion:
@ Usability and Accessibility
Enhancements:
* Introduction:
1. Guidelines and Legalities:
a. Web Content Accessibility Guidelines:
b. Section 508:
2. User Style Sheets:
a. Important:
b. Inherit:
3. Being Helpful:
a. Styling Abbreviations and Acronyms:
4. Specialized Style Sheets:
a. Print Style Sheets:
b. Mobile/Handheld Style Sheets:
5. Conclusion:
@ Tips, Tricks, and Troubles:
* Introduction:
1. Rollover Images:
a. In the Old Days:
b. The (X)HTML:
c. The Image:
d. The CSS:
2. The Overflow Property:
a. Overflow Values:
b. Overflow:auto:
c. Overflow:hidden:
3. Combinging Classes:
4. Hacks and Filters:
a. Safe Hacks:
b. IE7 Is Coming:
5. Troubleshooting:
a. Common Problems:
b. Recommendations:
6. Conclusion:
@ Case Study: The Dead Goods:
* Introduction:
1. The Case Study:
2. The Process:
a. Design:
b. Content:
c. Presentation:
3. Setting Up:
4. Wireframing the Layout:
a. Bodywork:
b. Container:
c. Masthead:
d. Columns:
e. Footer:
f. Organized Layout:
5. Background Work:
a. Masthead Background:
b. Sidebar Background:
c. Main Column Background:
d. Footer Background:
e. Page Background:
f. Background Work Completed:
6. Text Treatment:
a. Back to Body:
b. Headings:
c. Column Text:
7. The Final Touches:
a. Logo As Home Link:
b. Main Navigation:
c. Login Form:
d. Footer Content:
8. Conclusion:
* STATE OF THE ART CURRICULUM DESIGN:
* NEW:
* REFERENCES:
* ILLUSTRATIONS:
* PHOTOS:
* PAPERBACK:
* TITLE PAGE:
* FONT SIZE: 8 TO 10 INCHES:
* FONT COLOR: BLACK-RED-BLUE & WHITE:
* TRANSPARENT FRONT PAGE:
* BLACK OR WHITE BACK PAGE COVER:
* BINDED:WIRE-0: BLACK OR WHITE COIL:
* 500 WHITE PAGES: 8x11 INCHES:
* ALLOW 3 TO 4 WEEKS TO RECEIVE ITEM:
* RECEIVE A DIPLOMA IN BEGINNING CSS
WEB DEVELOPMENT: FROM NOVICE TO
PROFESSIONAL AFTER PASSING THE
EXAMINATIONS IN THE CURRICULUM
DESIGN AND INSTRUCTION:
* ORDER EARLY WHILE SUPPLIES LAST:
