Cascading Style Sheets

Cascading Style Sheets Provide means to control and change presentation of

HTML documents.

Allow the user to impose a standard style.

Three levels of specification: Inline level -- embeded in tag invocation.

Document level -- applied to a whole document.

External level -- Apply to a number of documents. Inline level has precedence over document level, which

has precedence over external level.

Cascading Style Sheets

HTML primarily concerned with content rather than style.

HTML tags have presentation properties for which browsers have default values.

Cascading Style Sheets are not technically HTML, but can be embedded in HTML documents.

Cascading Style Sheets

Cascading Style Sheet specification developed in 1996 ----> CSS1

CSS2 followed in 1998.

Current browsers do not implement all of CSS2.

Style is specified for a tag by the values of its presentation properties.

Browsers can ignore style sheets or use their own default values for presentation properties.

Level of Style Sheets

Inline style sheets appear in the tag itself. Document level style sheets appear within the

head of the document. External style sheets are in separate files,

potentially on any server on the internet. Format depends on the level of the style sheet

Inline Style Specification Format

Style sheets appears as the value of the style attribute style ="property_1:value_1;

property_2: value-2; ...property_n: value-n;”

Scope of inline style sheet is the content of the tag.

Document Style Specification Format

List of rules that are the content of the <style> tag.

The type attribute of the <style> tag must be set to "text/css"

The list of rules are not HTML. Hence, they must be placed in an HTML comment.

Documentation comments for the rule must use a different form -- use C comments: /* ... */

External style sheets format is a list as in document style

External Style Sheets

Written with the MIME type text/css A <link> tag is used to specify that the browser is to

fetch and use external style sheet file: <link rel = stylesheet type="text/css"

href="http://www.whereever.org/termpaper.css"> </link>

Can be validated

http:/jigsaw.w3.org/css-validator

/validator-upload.html

Style Classes Style classes allow different occurrences of the same tag

to use different style specifications

A style class has a name attached to a tag name:

p.narrow (property:value list)

p.wide (property:value list)

A class on an occurrence of a tag is specified with its class attribute

<p class ="narrow"> ... </p>

<p class ="wide"> ... </p>

Generic Style Classes

To apply style to more than one tag Defined using a generic tag (which must have a

name beginning with a period)

.really-big( ... ) It is used as if it were a normal style class

<h1 class ="really-big"> ... </h1>

<p class ="really-big"> ... </p>

Properties/Property Values

There are 56 different properties in 6 categories Fonts

Colors & backgrounds

Text

Boxes and Layouts

Lists

Tags

Will not discuss all. For more details go to: http://www.w3.org

http://www.w3.org/

Property Value Format Keywords: left, small, ... (Not case sensitive)

Length: numbers (may be with decimal points) px -pixels

in -inches

cm -centimiters,

pt -points

pc -picas (12 points)

em -height of the letter "m"

x-height -height of the letter "x"

No space is allowed between number and unit specs.

Property Value Format

<html>

<head> <title> Font Properties </TITLE> <style type = "text/css">  </style> </head>

Property Value Format

<body><p class = "big">If a job is worth doing, it’s worth doing right.</p><p class = "small">Two wrongs don't make a right, but they certainlycan get you in a lot of trouble.</p><h2 style = "font-family: 'Times New Roman'; font-size: 24pt; font-weight: bold"> Chapter 1 Introduction</h2><h3 style = "font-family: 'Courier New'; font-size: 18pt"> 1.1 The Basics of Computer Networks</h3></body></html>

Property Value Format (cont) Percentage -just a number followed by the

percent sign URL value: url(protocol://server/pathname)

Color Color name

rgb(n1, n2, n3)

Hex form: #XXXXXX

Property values inhereted by nested tags unless overridden

Font Properties

Font-family list of font names (browser picks 1st) Font-family: Arial, Helvetica, Courrier Generic fonts: serif, sans-serif, cursive, fantasy, and monospace (defined in CSS)

If font name has more than one word, single-quoted

Font-size lenght number of a name

Font-style: italic, normal

Font-weight: bolder, lighter, bold, normal

Font Properties

Font used to specify list of font properties

order must be: style, weight, size, name(s)

font: bolder 14pt Arial Helvetica

Font Properties

<html><head> <title> Font Properties </TITLE> <style type = "text/css">  </style> </head>

Font Properties

<body><p class = "big">If a job is worth doing, it’s worth doing right.</p><p class = "small">Two wrongs don't make a right, but they certainlycan get you in a lot of trouble.</p><h2 style = "font-family: 'Times New Roman'; font-size: 24pt; font-weight: bold"> Chapter 1 Introduction</h2><h3 style = "font-family: 'Courier New'; font-size: 18pt"> 1.1 The Basics of Parallel Programming</h3></body></html>


Complications: Monitors vary widely Browser vary widely

There are three color collections: Set of 16 colors garanteed to be dispalyable by all

graphical browsers on all color monitors The web palette of 216 colors One of 16 million different colors

Garanteed set of 16 colors:

Black 000000 Silver C0C0C0 Gray 808080 White FFFFFF Marron 800000 Red FF0000 Purple 800080 Fuchia FF00FF

Green 008000 Lime 00FF00 Olive 808000 Yellow FFFF00 Navy 000080 Blue 0000FF Teal 008080 Aqua 00FFFF

The web palette

Consist of 216 colors Use hex color value of: (look on back of book)

00 33 66 99 CC FF


The color property specifies forground of color elements

<h2 style="color:red">Apple</h2> The background-color property specifies the

backgound color elements

<p style="font-size:24; color:blue;

background-color:aqua">To make it softer, use aqua background!</p>


The background-image property

use with care

Alignment of Text Property text-indent allows indentation. Use

length of % Property text-align has possible values: left

(default), center, right, or justify Property float allows text to flow arround another

element: left, right, or none (default)

An element on the right with text flowing on its left can be obtained with default text-align value (left) for the text and right value for float on the element on the right.

Alignment of Text

Property margin-left allows to set margins arround an object.

<img src = "c210.jpg" style="float: right; margin-left: 0.5in; margin-bottom: 0.05in" />

Lists propertiesUnordered list:

List-style-type Bullets can be: disk (default), square, circle Setting it on the <ul> tag applies to all items:

<ul style = "list-style-type: square"> <li> ... </ul>

Setting it on the <li> it applies to just that item:

<ul> <li style="list-style-type:square">

First item </li>

<li style = "list-style-type: circle">

second item </li> </ul>

Lists propertiesUnordered list:

List-style-image: Could use an image for bullets in an unordered list<li style = "List-style-image:

url(bigbird.gif)">

Lists propertiesOrdered list:

List-style-type: Use to change the sequence values:

Property value Sequence type First fourdecimal Arabic numerals 1, 2, 3, 4

upper-alpha Uc letters A, B, C, D

lower-alpha Lc letters a, b, c, d

upper-roman Uc Roman I, II, III, IV

lower-roman Lc Roman i, ii, iii, iv

The <span> Tag

Used to define an element in the content of a larger element

The default is to leave content as it is

Use <span> to apply an inline style sheet to its content

<p>Now is the <span style = "font-size: 40; font-family: ariel; color: bue"> most </span> opportune time! </p>

Can be nested and can have id and class attributes

The <div> Tag

Usefull for style applications Used to create sections (or divisions) for which

style can be specified e.g. A section of four paragraphs for wich a particular

style is warranted.

Cascading Style Sheets

Documents

Transcript of Cascading Style Sheets