Cascading Style Sheets Introduction

This one-day course will help students to acquire the HTML skills necessary to develop more sophisticated layouts, font schemes, and interactivity for web pages. Cascading Style Sheets (CSS) enhances HTML and gives much more control of page layout and text formatting.

After completing this course, students will be able to:

• Use Style Sheets and Templates for a Uniform Design
• Centralize Style Specifications
• Understand Dynamic HTML (DHTML)
  

Target audience

All students should have a good understanding of HTML acquired through practical experience or attendance on an intermediate level course.

Course content

Introduction to Cascading Style Sheets

Building Style Sheets Setting up a Style Sheet • Example: Setting up a Style Sheet • Making a Style Sheet • Linking to the Stylesheet • Pre-exercise Instructions • Exercise 1: Creating a Style Sheet and Linking to it from an HTML document

Inheritance and Precedence Example: overriding HTML styles with CSS • Exercise 2: Overriding an HTML appearance specifications with CSS

The Three Ways of Specifying Styles 1) Linked Style Sheets • 2) Embedded Style Sheets • Inheritance and Precedence within CSS • Example: Using Embedded styles • Exercise 3: Using Embedded Styles • More on Precedence • 3) Inline Styles • Example: Using Inline styles • Exercise 4: Using Inline style declarations • Summary of Precedence • Class Selectors: adding flexibility to style declarations • New HTML tags for textblocks: < DIV> and < SPAN> • Example: Using Class Selectors and < DIV> / < SPAN> • Summary of Style Declaration Types • Exercise 5: Applying classes using < DIV> and < SPAN> tags

Properties Units of Measure

Fonts Typography: • Example: font properties • Exercise 6: Using CSS Properties to Make a Visual Poem

Colors & Backgrounds Colors and Backgrounds • Example: using colors and backgrounds • Using a background image as site-wide template • Controlling Tables more precisely with CSS • Exercise 7: Adding Colors & Backgrounds

Positioning Elements Example: Using Positioning to Enhance Layout • Z-index &Overlapping Elements • Exercise 8: Repositioning Elements for your visual poem • Overview: CSS Positioning Properties useful for DHTML

Dynamic HTML What is Dynamic HTML? • A brief history of DHTML • Components of DHTML • Uses of DHTML • Browser Compatibility Issues

An Introduction to JavaScript What is JavaScript? • What is JavaScript used for?

JavaScript as an Object-Based Language Properties and Methods Define an Object • Built-In Objects in Navigator (and MSIE 3.0 and later) • Changing Styles "on the Fly" in IE4 via JavaScript • The onMouseOver and onMouseOut Event Handlers • The this Keyword • Testing Whether the Browser Supports Dynamic Style Changes • Exercise 9: Dynamic Style Changes with IE4

Appendix A: Color Values and their Hex Triplet Equivalents

Appendix B: Netscape Layers Introduction to Layers • Nesting Layers • Naming Layers • Controlling the Z-Order of Layers • Relative vs. Absolute Positioning of Layers • Loading an External File as a Layer • Layer Width and Height • Inline Layers

Appendix C: Dynamic Style Changes in Netscape

Appendix D: Recommended Resources

About Courseware Company :: Instructor-led training courseware :: Self-study solutions :: Buy online today