COM3075 Cascading Style Sheets

Advanced · 1 credit · MDC - Media, Design, and Communication Arts

Description: Students develop accessible and standards-compliant Web pages using current techniques for advanced cascading style sheets (CSS).
Prerequisite: COM2055: Web Design 2
Parameters: Access to a computer work station and the Internet. Note: Validation of work can be done at http://validator.w3.org.

Outcomes The student will:

1 differentiate among the use of inline, embedded and external style sheets
2 demonstrate standard CSS coding practices for design, navigation, images, forms, tables, positioning, accessibility and cross-browser issues
3 show that CSS syntax is made up of selectors and declaration blocks
- 3.1 identify commonly used style declarations and selectors; e.g., type, class, id, child, adjacent, pseudo-class, and first-child pseudo-class
- 3.2 explain when to use appropriate selectors
4 determine when to import or link a style sheet
5 understand how the browser differentiates among the different styles; e.g., hierarchy
6 identify and understand the types of rendering; e.g., quirks mode and compliance mode
7 create navigation for a Web site using either a vertical, horizontal or tab-based system
8 determine whether to use inline, embedded and/or external style sheets in a Web site
- 8.1 incorporate appropriate properties, values and unit identifiers regarding:
  - 8.1.1 fonts
  - 8.1.2 anchors
  - 8.1.3 text
  - 8.1.4 lists
- 8.2 create/modify images to be used as both stand-alone and background, using:
  - 8.2.1 borders, background and padding properties
  - 8.2.2 float and margin properties to enhance image
- 8.3 apply the following properties to tabular data to ensure that what is being viewed is accessible and attractive:
  - 8.3.1 border
  - 8.3.2 caption
  - 8.3.3 font
  - 8.3.4 text
  - 8.3.5 padding
  - 8.3.6 colour
  - 8.3.7 the :nth-child pseudo-class notation
  - 8.3.8 the “hover” value applied to the “tr” tag
- 8.4 modify/create a form that accepts user input using input and text areas, radio button, check boxes, drop-down lists and buttons, considering:
  - 8.4.1 labels
  - 8.4.2 fieldset
  - 8.4.3 legends
- 8.5 use appropriate styles on each of the form elements to ensure the form is accessible and attractive to the user/client
- 8.6 test the Web site in more than one browser, or in a different version of the current browser, to check for cross-browser compatibility and fix all incompatibility issues using appropriate cross-browser techniques; e.g., getting .png image transparency in IE6
- 8.7 use appropriate id and class attributes appropriately
- 8.8 use enhanced layout properties: clear and position
9 identify copyright restrictions and permissions and put them into practice
10 present a selection of work completed in this course to an audience
- 10.1 assess work regarding:
  - 10.1.1 how the elements and principles of design help facilitate good composition in his or her work
  - 10.1.2 the technical and creative aspects of the work; e.g., clean coding, attractive
  - 10.1.3 areas of concern/difficulty (if applicable)
  - 10.1.4 meeting school and community standards; e.g., appropriate language
  - 10.1.5 the use of tools and equipment
- 10.2 participate in peer/teacher assessment
- 10.3 add the selected work to a portfolio
11 apply consistent and appropriate work station routines
- 11.1 demonstrate good health and safety practices; e.g., posture, positioning of hardware and furniture
- 11.2 demonstrate security for hardware, software, supplies and personal work
12 demonstrate basic competencies
- 12.1 demonstrate fundamental skills to:
  - 12.1.1 communicate
  - 12.1.2 manage information
  - 12.1.3 use numbers
  - 12.1.4 think and solve problems
- 12.2 demonstrate personal management skills to:
  - 12.2.1 demonstrate positive attitudes and behaviours
  - 12.2.2 be responsible
  - 12.2.3 be adaptable
  - 12.2.4 learn continuously
  - 12.2.5 work safely
- 12.3 demonstrate teamwork skills to:
  - 12.3.1 work with others
  - 12.3.2 participate in projects and tasks
13 create a transitional strategy to accommodate personal changes and build personal values
- 13.1 identify short-term and long-term goals
- 13.2 identify steps to achieve goals