• Web Development Training

    InterSource offers live instructor-led courses on all important web design technologies, including Ajax, CSS, Dreamweaver, Expression, Google, HTML, JavaScript, and Web Accessibility.

    These live classes are offered both on client sites, at our Geneva training center, and via a Web interface.

  • About Web Development

    Web design is the skill of creating presentations of content (usually hypertext or hypermedia) that is delivered to an end-user through the World Wide Web, by way of a Web browser or other Web-enabled software like Internet television clients, microblogging clients and RSS readers.

    The intent of web design is to create a web site-a collection of electronic files that reside on a web server/servers and present content and interactive features/interfaces to the end user in form of Web pages once requested. Such elements as text, bit-mapped images (GIFs, JPEGs) and forms can be placed on the page using HTML/XHTML/XML tags. Displaying more complex media (vector graphics, animations, videos, sounds) requires plug-ins such as Adobe Flash, QuickTime, Java run-time environment, etc. Plug-ins are also embedded into web page by using HTML/XHTML tags.

    Read More
  • Course Details Web Development

    Classes are offered at client sites, at our Geneva training center, and via a live web conference. For detailed course outlines and scheduled classes, please see below.

    To book training, navigate to the course you need, then:

    • For scheduled online classes, register from the choices indicated.
    • If you need an alternative date, time or location, or if you want a live classroom course, click on “request an offer for this course,” to complete the form.

Introduction to CSS Training

Course duration

  • 3 days

Course Benefits

  • Learn the benefits of CSS.
  • Learn to avoid using deprecated HTML tags and attributes.
  • Learn CSS syntax.
  • Learn to use <div> and <span> tags appropriately.
  • Learn all the common CSS properties and their values.
  • Learn to use CSS resets and normalizers.
  • Learn best practices for choosing units of measurement.
  • Learn how to select CSS fonts and to download and use new fonts.
  • Learn about color and opacity and to create backgrounds.
  • Learn to work with borders, margin, and padding (the box model).
  • Learn to style tables with CSS.
  • Learn to use positioning.
  • Learn to use transforms and transitions rotate, scale, and skew elements and create animations.
  • Learn about flex, grid, and multi-column layouts.
  • Learn to style lists and create drop-down and fly-out navigation menus.
  • Learn to use media queries to style pages for different device sizes and media.
Available Delivery Methods
Public Class
Public expert-led online training from the convenience of your home, office or anywhere with an internet connection. Guaranteed to run .
Private Class
Private classes are delivered for groups at your offices or a location of your choice.
Learn at your own pace with 24/7 access to an On-Demand course.

Course Outline

  1. Crash Course in CSS
    1. Benefits of Cascading Style Sheets
    2. CSS Rules
      1. CSS Comments
    3. Selectors
      1. Type Selectors
      2. Class Selectors
      3. ID Selectors
      4. Attribute Selectors
      5. The Universal Selector
      6. Grouping
    4. Combinators
      1. Descendant Combinators
      2. Child Combinators
      3. General Sibling Combinators
      4. Adjacent Sibling Combinators
    5. Precedence of Selectors
    6. How Browsers Style Pages
    7. CSS Resets
    8. CSS Normalizers
    9. External Stylesheets, Embedded Stylesheets, and Inline Styles
      1. External Stylesheets
      2. Embedded Stylesheets
      3. Inline Styles
    10. Exercise: Creating an External Stylesheet
    11. Exercise: Creating an Embedded Stylesheet
    12. Exercise: Adding Inline Styles
    13. <div> and <span>
    14. Exercise: Divs and Spans
    15. Media Types
    16. Units of Measurement
      1. Absolute vs. Relative Units
      2. Pixels
      3. Ems and Rems
      4. Percentages
      5. Other Units
    17. Inheritance
      1. The inherit Value
  2. CSS Fonts
    1. font-family
      1. Specifying by Font Name
      2. Specifying Font by Category
    2. @font-face
      1. Getting Fonts
    3. font-size
      1. Relative font-size Terms
      2. Best Practices
    4. font-style
    5. font-variant
    6. font-weight
    7. line-height
    8. font
    9. Exercise: Styling Fonts
  3. Color and Opacity
    1. About Color and Opacity
    2. Color and Opacity Values
      1. Color Keywords
      2. RGB Hexadecimal Notation
      3. RGB Functional Notation
      4. HSL Functional Notation
    3. color
    4. opacity
    5. Exercise: Adding Color and Opacity to Text
  4. CSS Text
    1. letter-spacing
    2. text-align
    3. text-decoration
    4. text-indent
    5. text-shadow
    6. text-transform
    7. white-space
    8. word-break
    9. word-spacing
    10. Exercise: Text Properties
  5. Borders, Margins, and Padding
    1. The CSS Basic Box Model
    2. Introduction to using Google Chrome DevTools with CSS
    3. Padding
    4. Margin
    5. Border
      1. border-width
      2. border-style
      3. border-color
      4. border-radius
    6. box-sizing
    7. box-shadow
    8. Exercise: Borders, Margin, and Padding
  6. Backgrounds
    1. background-color
    2. background-image
    3. background-repeat
    4. overflow
    5. background-attachment
    6. background-position
      1. Keywords
      2. Coordinates
    7. Creating a "hint" Class
    8. background-size
    9. background-origin
    10. background-clip
    11. Modifying the "hint" Class
    12. background
    13. Exercise: Backgrounds
  7. Display and Visibility
    1. display
    2. visibility
  8. Pseudo-classes and Pseudo-elements
    1. Pseudo-classes
    2. Styling Links with Pseudo-classes
    3. Styling Tables and Articles with Pseudo-classes
      1. :nth-child()
    4. Pseudo-elements
      1. content
    5. Using Pseudo-elements
  9. Styling Tables with CSS
    1. A Review of HTML table Elements and Attributes
      1. Spanning Columns and Rows
    2. CSS Properties and Styling Tables
      1. table-layout
      2. border-collapse
    3. Exercise: Styling a Table Exercise
  10. Positioning
    1. Normal Flow
    2. position
      1. Positioning with top, bottom, left, and right
    3. z-index
    4. float and clear
      1. float
      2. clear
      3. float, clear, and ::after
    5. Exercise: Positioning
  11. Transforms and Transitions
    1. transition
      1. transition-property
      2. transition-duration
      3. transition-timing-function
      4. transition-delay
      5. transition
    2. transform
      1. Rotation
      2. Scale
      3. Skew
      4. Translate
    3. Exercise: Transforms and Transitions
  12. Layouts
    1. Introduction to Flexible Box Layout Module
      1. Some Flexbox Properties
    2. Introduction to Grid Layout
      1. Some Grid Properties
    3. Multi-column Layout
    4. Exercise: Layouts
  13. CSS Lists as Hierarchical Navigation
    1. Exercise: Basic Vertical Navigation Bars
    2. Dynamic Drop-down and Fly-out Navigation Bars
    3. Exercise: Basic Drop-down Menu
    4. Exercise: Basic Fly-out Menu
    5. Exercise: CSS List Menus
  14. Media Queries
    1. What Are Media Queries?
      1. Breakpoints
      2. Media Types
      3. Syntax
    2. Font Awesome
      1. Finding and Using Icons
    3. Exercise: Breakpoints
    4. Exercise: Targeting Print

Class Materials

Each student will receive a comprehensive set of materials, including course notes and all the class examples.

Class Prerequisites

Experience in the following is required for this CSS class:

  • HTML
Prerequisite Courses

Courses that can help you meet these prerequisites:

Follow-on Courses
Since its founding in 1995, InterSource has been providing high quality and highly customized training solutions to clients worldwide. With over 500 course titles constantly updated and numerous course customization and creation possibilities, we have the capability to meet your I.T. training needs.
Instructor-led courses are offered via a live Web connection, at client sites throughout Europe, and at our Geneva Training Center.