Quick Navigation
Using CSS in Web Design Course
Overview
The course is designed to provide an introduction to the power of Cascading Style Sheets (CSS) to control the look and feel of your HTML documents in an organised and efficient manner. You will use fonts, colours, leading, margins, typefaces, and other design elements of a web document to create well designed pages that can be completely restyled with only a few changes to your CSS code.
Audience
Web designers needing to use Cascading Style Sheets to create good design structure on web pages.
Course Objectives
At the end of this course, delegates will be able to create well designed pages (with fonts, multicolumns, graphics, colours, hyperlinks and input forms) that aim to provide a good overall user experience.
Prerequisites
You should have a good working knowledge of HTML.
Course Contents (2 days)
- Introduction to Web Page Design
- The Basic Purpose of CSS
- When to use a Table
- Parts of a CSS Rule
- Types of CSS Rules
- CSS on Properties and Elements
- Where to define CSS Styles
- Putting CSS into Perspective
- CSS is good for Colour, Fonts, and Images
- Multiple Style Sheets, Users, and CSS
- What CSS can’t do by itself
- CSS and Web Accessibility
- Accommodating older browsers
- Make modern browsers more accommodating
- Digging Below The Surface
- Applying CSS to HTML Documents
- How Inheritance Works in CSS
- Selectors and Structure of CSS Rules
- Selectors:
- Element Type, Universal, Class, ID,
Pseudo-Element, Pseudo-Class,
Descendant, Parent-Child,
Adjacent, Attribute
- Element Type, Universal, Class, ID,
- Grouping Selectors
- Expressing Measurements
- Absolute & Relative Values
- Page Layout with CSS
- CSS Web Site Design
- Advantages of CSS Design
- CSS Positioning
- Multi-Column Layouts
- The CSS Box Model
- Display property
- Float and Clear properties
- Absolute, Relative, and Positioning Contexts
- More on Positioning Page Blocks
- Measurement Units & Types Influence Design
- The z-Index Property & Overlapping Content
- Styling Text and other Content with CSS
- How to Specify Colours
- Setting body Colour
- Transparency, Colour, and User Overrides
- Interesting Uses of Colour
- Using Fonts
- How CSS deals with Fonts
- The font-family and font-size Properties
- HTML sizes V CSS Sizes
- Variability across browsers/Platforms
- Other Font properties
- Standard V Non-Standard Font Families
- Specifying Font Lists
- Using Nonstandard and Downloadable Fonts
- Text Effects and the Cascade
- The span Element
- Text Alignment as a Design Technique
- Horizontal and Vertical Spacing
- The line-height, letter-spacing and
word-spacing properties - Text Decorations
- Shadowed Text without Graphics
- Styling Hyperlinks
- Styling Lists with CSS
- Cascading and Inheritance
- Cascading basics
- Sort Order
- Specificity
- Origin
- Weight
- Adding Graphics
- Alignment of Images and Text
- Placing Text On Top of Images
- Clipping HTML Content
- Improving the User Experience
- Basic List Styling With CSS
- Enhancing the look of a Menu
- Creating a Submenu within the Main Menu
- Using a Background Image as a fixed canvas