COSC 2206: Internet Tools
Cascading Style Sheets (CSS)

Online and local references

www.w3.org/Style/CSS is the official World Wide Web Consortium (W3C) standard for cascading style sheets

jigsaw.w3.org/css-validator/ is a CSS validator. You can upload a local css file and run it through the validator to see if there are any errors or suggestions.

Web Design Group CSS is a local version of a comprehensive reference for cascading style sheets by the Web Design Group. This is also available online at www.htmlhelp.com.

www.w3schools.com is an excellent site that contains tutorials on many topics such as CSS. The tutorials are interactive.

An inline style example

examples/inlineStyle.html

An example that illustrates the use of internal styles. They are specified in an element using the style attribute. Inline styles should be used sparingly since they defeat the purpose of separating document structure from style.

Embedded style sheet examples

examples/embeddedStyle1.html
examples/embeddedStyle2.html
examples/embeddedStyle3.html
examples/embeddedStyle4.html

In these examples the style sheet is specified in the document head using the style tag.

External style sheet examples

A timetable example

examples/timetable.html
examples/timetable.css

An online book example (from COSC 1046, Chapter 11)

../html/examples/javaChapter11/example.html
../html/examples/javaChapter11/java.css

An assignment style (from COSC 1046)

examples/assignment1.html
examples/docsmall.css

Style for this document

../doc-rel.css

Other examples

Box examples

examples/testBorder.html shows some examples of box borders

examples/float.html shows some floating text boxes

Background color and image tiling examples

examples/background1.html sets the background color
examples/background2.html sets a background image with no repetition
examples/background3.html sets a background image with tiling in both directions
examples/backgeound4.html shows a background image with tiling in x direction
examples/background5.html shows a background image with tiling in y direction
examples/background6.html shoes a background image that is fixed when scrolling

Font properties

examples/font.html shows the serif, sans-serif, cursive, fantast, and monospace generic font families in normal and italic style.

Text properties

examples/text.html shows word and letter spacing, left, right, centers and justified blocks (for example, paragraphs), paragraph indentation and line spacing.