Introduction to Cascading Style Sheets

[Pages:32]Introduction to Cascading Style Sheets

Pat Morin COMP 2405

Outline

? Motivation for CSS ? How to use CSS in your documents ? Formatting text with CSS

? Font properties ? Text properties

? Formatting lists with CSS ? Summary

2

HTML

? HTML (when used correctly) describes the different parts of a document

? Paragraphs, section headings, quotes, images, ...

? HTML (when used correctly) does not describe the formatting of a document

? HTML is a logical markup language not a physical markup language

? HTML was designed to be rendered on a wide variety of devices

? Graphical web browsers, text terminals, screen readers, ...

3

CSS

? CSS (Cascading Style Sheets) is for the formatting side of the Web

? CSS describes how rendered HTML documents should look

? CSS considers the physical and visual display of the document (the Style)

4

Advantages of CSS

? The use of CSS separates document layout from document content

? Different people can be responsible for the two parts ? Document author can focus on content ? Graphic designer can focus on layout

? A single file can control the look of an entire web site

? Easy to modify look of web site without affecting its contents ? Easy to obtain a consistent look (the R in CRAP)

? If done correctly, documents degrade gracefully on platforms that don't support visual formatting

5

Disadvantages of CSS

? More to learn

? CSS is powerful but complex

? Not fully supported on some browsers

? Even some modern browsers are not fully CSS 2 compliant

? The formatting is separated from the document

? Makes it hard to write a document and format it simultaneously

6

How to Write a Document

1.Decide what you want to write

First and foremost the content of the document is important Decide on the logical structure of the document

2.Write it

Write the document content Markup the document's logical structure

3.Format it

Use CSS to do formatting Add other formatting-specific data (e.g., navigation)

Points 1 and 2 should take the majority of the time

7

Using CSS

? There are three ways to use CSS ? External Style Sheets

? Uses the LINK tag (in the document HEAD)

? Inline Style Sheets

? The STYLE tag (in the document HEAD)

/* CSS information goes here */

8

 ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download