New Media Training

Cascading Style Sheets (CSS)

Course Overview:
In this course, you will be introduced to the concepts, techniques, properties, and values of CSS in a sequence that reflects a typical “building up” of design rules including learning how to control typography using text and font properties. The course will also explore the layout-oriented styles of CSS, including margins, padding, and absolute and relative positioning. Once you have established your layout, you can apply the finishing touches on your design, which might include customizing cursors, links, and forms, creating alternate style sheets, and many other techniques.

Course Prerequisites:
Students should have a good knowledge of HTML coding.

Target Audience:
Experienced HTML authors or Web designers/developers who want to use CSS to create more powerful, efficient, and standards compliant Web sites.

Course Duration: 2 Days instructor led

Course Outline:

Controlling Color and Typography
• Create an Embedded Style Sheet
• Apply Color
• Comment Your Code
• Modify Text Styles
• Modify Font Styles
• Create a Linked Style Sheet

Designing with the Cascade
• Create Class Styles
• Create ID Styles
• Create Contextual Styles
• Target Styles to Elements with Specific Attributes
• Create Style Sheets that Cascade
• Import Style Sheets
• Create Inline Styles

Designing Content Sections
• Control Margins and Padding
• Create Borders
• Control Element Dimensions
• Create Floating Elements
• Control Content Overflow

Controlling Layout with Positioning
• Controlling Layout with Absolute Positioning
• Create a Fixed, Multi-column Layout
• Create a Fluid, Multi-column Layout
• Control Layout with Relative Positioning
• Control the Display of Layered Elements
• Apply Fixed Positioning

Enhancing an Existing Design
• Customize Cursors
• Customize Link Styles
• Customize Forms
• Display and Manipulate Background Images
• Customize Lists
• Create Generated Content

Creating Alternate Style Sheets
• Create Accessible Style Sheets
• Apply User-Defined System Fonts and Colors
• Create a Print Style Sheet

External links: Adobe