Who should attend the course?
This course is designed for those with previous experience
of HTML or XHTML and who have a general understanding of CSS but need to gain an in depth
understanding of the latest techniques using CSS for web design.
How long is the
course?
3 Days
What are the benefits of attending?
By the end of this course
you will have a comprehensive knowledge of CSS and have built several CSS-based visual design
features. You will be able to create first class accessible web designs using CSS for presentation
and semantic mark up. You will also learn about cross-browser support for CSS and many of the
work-arounds used in common practice. Delegates will need a good grasp of web page mark up (html or
xhtml), some previous use of CSS and knowledge of di?erent web browsers and cross-browser
compatibility.
Course Outline
Semantic mark up
- HTML or (x)HTML
- DOCTYPE
- Semantics explained
- Document structure and flow
- Removing visual elements from mark up
- About web standards
- Validating
your mark up
CSS review and basics
- CSS syntax
- CSS
selectors
- Classes and ID’s
- CSS1 vs CSS2 vs CSS3
- The
cascade
- Inheritance
- Specificity
- Validating your CSS
Some basic CSS properties
- The box model
- Block vs inline
elements
- Div’s and spans
- Border properties
- Width,
height and max, min
- The auto property
Creative artwork and CSS
- Using images in CSS
- Applying texture
- Graduated fills
- Round corners
- Transparency and semitransparency
- Stretchy
boxes
- Creative typography
Layout principles with CSS
- Document flow
- Absolute positioning
- Relative positioning
- Static positioning
- Floating elements
Building layout with
CSS
- A centered container
- 2 column layout
- 3 column
layout
- Faux columns
CSS based navigation
- Mark up
structures for navigation
- Styling links with pseudo classes
- Building a
horizontal navigation bar
- Building a vertical navigation bar
- CSS drop
down navigation systems
Creating a CSS styled form
- Form mark
up
- Associating labels with inputs
- Grouping form elements together
- Form based selectors
- Changing properties of form elements
- Formatting text in forms
- Formatting inputs
- Formatting form
areas
- Changing the appearance of buttons
- Laying out forms
Styling a data table
- Basic table mark up
- Adding row and column
headers
- Simplifying table structure
- Styling row and column headings
- Adding borders
- Formatting text in tables
- Laying out and
positioning tables
Creating a print page
- Switching to a
different media for print
- Showing and hiding elements
- Altering layout
for print
- Changing font and font size for print
- Showing or hiding link
information
- Previewing and testing print styles
Working with other
media types
- Switching to a different media
- Delivery to other
devices
- Dynamically switching style sheets
- Accessibility
considerations
- Graceful transformation
Common CSS problems and
Hacks!
- Browser support issues
- Writing CCS rules for specific
browsers
- Has “layout” for IE
- Peekaboo bug and Holly
hack
- IE box model problem and Tan Hack
- Float clearing issues and :after
3 pixel jog
- Validating your CSS
- Common validation errors
Questions and answers
