all about stylesheets david lash chapter 4 cascading style sheets

IS 556 Fall 2003

All About StyleSheets

David LashChapter 4Cascading Style Sheets

2David Lash

What we are talking about…We will look at:

What are CSS Advantages and disadvantages Types of CSS

Look at embedded CSSLook at external CSS

Using Selectors Using Classes All About Properties

A big properties example

3David Lash

What are cascade style sheets?

Long before HTML was something called SGML A mark-up language that was

Output format independent – could generate word, pdf, html, etc output

Format style independent – size, color, font face was controlled separate from actual document (usually centralized).

Bottom line – document authors write content NOT style info (the editor decides how it should look).

HTML mixes these 2 – (within HTML you specify content and style stuff.)

So W3C decided to create cascade style sheets to allow authors to separate display format from document content.Note: Just FYI, this is not part of PHP, but sort of

a add-on, built as part of HTML

David Lash

Cascading Style Sheets!

The basic idea: Separate style information from text content

What do they do? Specify a common set of styles and spacing

instructions for elements on a page. E.g., a web site with 5 different pages, might use

style sheets to specify things like: Common size for headers, default font type, background images or colors, margin sizes and and other page styles.

5David Lash

CSS – Advantages/disadvantagesSome advantages of using CSS:

Control - Offers greater page layout controls for all pages at a site. E.g., can specify margin, indents, line spacing, element positioning, font size, etc.

Style Separate From Document Structure Smaller Size? - Can decrease document size - E.g.,

(reducing the number of FONT tags) Maintainability - Easier site maintenance

Disadvantages: Browser Support - Not supported in browsers

earlier than I.E. 3.0 or Netscape 4.0. Browser Implementation - IE and Netscape

implement the standard differently.

Netscape and IE implement many elements slightly different so need testing with both browsers.

6David Lash






7David Lash

Types of Style Sheets Style sheets are typically used as a separate file.

Then every page that wants that “style” links to the sheet.

Still, style sheets can be used in 3 different ways: External Styles - Collect the style information in an external file and link

them into all the needed files at your site. For example, would provide a file that has all style information (like color of

headers) and include or link that file into all pages of your site. Would specify the style for a particular line of text in the document.

Embedded Styles - Embed the style sheet on the top of the document. For example, would specify the default color for all items in this web page.

Inline Styles - Put the style information in-line the text of the document. Would specify the style for a particular line of text in the document. (highest

precedence).

Note: Its called cascading style sheets because inline style specsOverride, embedded style specs, embedded overrides external.

8David Lash

Basic Embedded example

Could place the following at the top of HTML document: <HTML><HEAD><STYLE TYPE="text/css">

H1 {Color: red; font-size: 24pt; }

H2 { Color: green; font-size: 12pt; }

</STYLE> <TITLE> This is a sample web Page with emphasis added</TITLE></HEAD><BODY>

Notice use of 2 selectors with general syntax: selector:{property:value}

Note the “style” tag

Selector - identifies the element to be affected. Includes things like H1, H2, P, EM, LI EM.

property:value - identifies a stylistic property to be defined with some value. Includes things like color: red, font-site:

12pt, font-face Verdana. http://condor.depaul.edu/~dlash/website/interesting.html

9David Lash

External (or linked) Style Sheets

Use external file with style information Very powerful can link css file to one or more HTML

documents that want that "style" Here is an example:

http://www.depaul.edu/~dlash/website/externalExample.html The magic line to include the link tag in the

<head>...</head> is:

<LINK REL="STYLESHEET" HREF="stylesheet.css" TYPE="text/css">

Here is entire contents of file stylesheet.css H1 { Color: red; font-size: 36pt; } H2 { Color: green; font-size: 24pt; } P {margin-left: 44pt; }

10David Lash






11David Lash

Using CSS SelectorsType Selectors – Can use lots of

different HTML elements: For example, H1 { Color: red; font-size: 36pt; }

H2 { Color: green; font-size: 24pt; } P {margin-left: 44pt; } EM, I { color: green; }

B { color: red; font-size: 18pt; } H1 {Color: red; font-size: 24pt;

H2 { Color: green; font-size: 12pt; } EM { Color: red; }

http://condor.depaul.edu/~dlash/website/externalExample2.html

12David Lash

Classes In CSS We already have a way to create a style for HTML elements

Handles situations like all H1 is big and green, or italic items are blue How do you override these for some items?

Can defined special classes For example can occasionally make some elements look different than

others?

E.g., suppose this is in a file called stylesheet3.cssEM, I { color: green; } B { color: red; font-size: 18pt }

H1.important {font: 36pt "Comic Sans"; Color: Blue}

H1.normal {font: 24pt "Arial"; Color: red}

The first part denotes the HTML element.

The second part denotes the “name” or label for the element.

Defines the element and property to set.

13David Lash

Using the class ….

Once linked to this style sheet. Have to different ways to create H1 elements:

<H1 CLASS="important"> Check It Out! </H1>

This is an important header<H1 CLASS="normal"> … </H1>

See example at http://condor.depaul.edu/~dlash/website/externalExample3.html

14David Lash

Another way to use style classes

Can also create a generalize class that can be included anywhere and is not tag specific.

Use the DIV command. E.g., inside the stylesheet: DIV.smallprint { font-size: 8pt; color: teal }

Then inside HTML document could do: <DIV CLASS="smallprint">

For example http://condor.depaul.edu/~dlash/website/externalExample4.html

15David Lash

Selectors - Special Built-in Classes

There is a set of classes that are special built-in. One set is used within the <A> tag.

For example here is a style sheet: A:link { color: red } A:visited { color: maroon }

A:active { color: lime } Here is an example

http://condor.depaul.edu/~dlash/website/externalExample5.html.

16David Lash






17David Lash

Properties - font-family font-family - specifies a family of fonts to use Values: list of fonts to use Applies to: all elements Example:

P { font-family: Veranda, sans-serif } Notes:

There are 5 possible font-families it is like specifying a generic name. It is a good idea to make one of these last in the list 1. sans-serif (e.g., halvetica or arial) 2. monospaces (e.g., courier or new courier) 3. cursive (e.g., Zapf-chancery) 4. serif (e.g., Times) 5. fantasy (e.g., western, impact, or some other display

oriented font)

18David Lash

Properties - font-style

font-style - specifies between the normal (default), italic, and or oblique font-face within a font-family. (oblique is slanted text, italic is slanted with more cursive characters.) Values: normal | italic | oblique Applies to: all elements Example:

H1 { font-style: italic }

Notes: Bold is part of the font-weight not font-style.

19David Lash

Properties - font-weight font-weight - specifies the weight or boldness of

the font to use. Values: normal | bold | bolder | lighter | 100 |

200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 Applies to: all elements Example:

STRONG { font-weight: 700 } Notes: Allows either a descriptive tag (normal,

bold, bolder or lighter) or a number. Normal is the default = 400. Typical bold is 700. Not all numbers may be supported within a particular font-family and browser have inconsistent support of this feature

20David Lash

Properties - font-size font-size - specifies a size of font to use Values: absolute size | relative size | length

percentage Applies to: all elements

As can be seen from above can be specified 3 different ways: Absolute size

• Values: xx-small | x-small | small | medium | large | x-large | xx-large • Example: H1 { font-size: x-large } • Notes: These are descriptive terms that reference a table of sizes

kept in the browser. Relative Sizes

• Values: larger | smaller • Example: H1 { font-size: larger } • Notes: specifies size relative to the parent object.

Length Sizes • Values: number + em | ex | px | pc | mm | cm | in • Example: H1 { font-size: 24pt}

21David Lash

Font-size cont - Length sizes can be specified differently …

Code Unit Description

px Pixel Number of pixels relative to the monitor resolution

pt Point A unit of measuring type (from publishing) equal to 72 pts = 1 inch

pc Pica A unit of measurement from publishing. 1 = pts or 1/6 inch

em Em A relative measurement equal the with of the capital M in the current font

ex Ex A relative measurement for the height of the width of the letter X in the current font.

in Inches Measures in inches

mm Millimeter Measures in millimeters

cm Centimeter

Measures in centimeter

22David Lash

Properties - font-colorcolor - specifies the color of the element.

Values: color_name | RGB Hex Value | RGB New Values

Applies to: all element Notes: As can be seen from above, specify 1 or 3

ways color_name: Use 1 of the 16 color names.

• values - aqua, gray, navy, silver, ... • Example:

– STRONG { font-style: italic; color: purple } RGB values: Use hex value that fill in the RGB values.

• values - 000000, ..., FFFFFF • Example:

– STRONG { font-style: italic; color: #FF00FF } RGB New Values

• values - rgb(255,0, 255) or rgb(100%, 0%, 100%) • Example:

– STRONG { font-style: italic; color: rgb(255, 0, 255) } – STRONG { font-style: italic; color: rgb( 100%, 0, 100%) }

23David Lash

Properties – line-height

line-height - sets height of lines. Values: normal | number | length |

percentage Applies to: all element Notes: As can be seen from above,

specify 1 or 3 ways Examples:

P ( line-height: 1.2 }

P { line-height: 1.2em }

P { line-height: 120% }

24David Lash

Properties – text-indent

text-indent - specifies the amount of indentation from the far left.

Values: length | percentage Applies to: block level elements Notes: As can be seen from above,

specify length or percent of normal text Examples:

P.first { text-indent: 3em }

25David Lash

Properties – background color

background-color - specify the color or RGB value for background color.

Values: color name | RGB value Applies to: all element Notes: Sets the background color of the

element. Examples:

P.warning { background-color: red }

STRONG { font-weight: 900; background-color: silver }

26David Lash

Properties – background color

background-image - specify the background image for an element.

Values: URL Applies to: body tag Notes: Sets the background image for

element. Examples:

BODY { background-image: URL(back.gif) }

Clearly this means with a CSS with this one tag, I can linkinto all my HTML documents and get common background.

27David Lash

A large example

Suppose you placed the following in a file called stylesheet6.css

P.first { text-indent: 12pt } H1.title { text-transform: uppercase } H2 { font-size: 33pt } H1 { color: red } EM { font-size: 18pt; font-style: Times, serif; color: FF00FF } STRONG { font-weight: 900; background-color: silver } BODY { background-color: yellow }

http://condor.depaul.edu/~dlash/website/externalExample6.html

28David Lash

Summary …We will look at:





all about stylesheets david lash chapter 4 cascading style sheets

Documents