DebC's Virtual University Notebook

This Web site provides links to the assignments for the Virtual University course, Introduction to Cascading Style Sheets.

• Week 1: CSS Basics: Fonts and Colours

Week 1 introduced the concept of an external CSS, the format of CSS rules, and properties related to font, text, and colour of elements.

The homework assignment required us to write our own external CSS to define styles for two files, template1.html and template2.html.

• Week 2: Embedded Style Sheets, Margins, Borders, and List-Style Properties

Week 2 introduced the concepts of embedded style sheets, contextual selectors, and properties related to white space and borders around elements, and properties related to list elements.

For the homework assignment, an embedded style sheet was included in:

• template1.html to override body and heading styles
• template2.html to override list styles and show examples of contextual selectors and different list positions.
• Week 3: Inline Styles; SPAN, DIV, and CLASS; Additional Design

Week 3 introduced the concept of inline styles,the SPAN and DIV tags, and CLASS rules.

For the homework assignment:

• The external stylesheet was updated to include a class selector .highlight
• Template 2 was updated to:
  • Include contextual selectors and a class selector .note in the embedded style sheet
  • Apply the class selectors using SPAN and DIV tags
  • Demonstrate use of floats through images in first list
• Week 4: Link Alignment, IDs, @import, and More; Pseudo elements; White Space

For the homework assignment, defined external styles and embedded styles in XHTML file to illustrate:

• first-letter and first-line pseudo elements
• anchor states
• line-spacing, letter-spacing, word-spacing, and vertical-align
• display:block; property and value
• hanging indents using margin and text-indent properties
• use of ! important to override rules
• Week 5: Positioning, Visibility, and Overflow

For the homework assignment, created an XHTML file and used embedded and inline style rules to illustrate:

• relative and absolute positioning
• z-index
• overflow