Cascading Style Sheets

Post on 18-Jan-2016

28 views 0 download

description

Cascading Style Sheets. SP.772 May 6, 2002. CSS. Useful for creating one unified look for an entire web site. Helps to seperate style from content. Can be used for creating absolute positioning. History. The W3C released the specs for CSS1 in 1996. - PowerPoint PPT Presentation

Transcript of Cascading Style Sheets

Cascading Style Sheets

SP.772

May 6, 2002

CSS

• Useful for creating one unified look for an entire web site.

• Helps to seperate style from content.

• Can be used for creating absolute positioning.

History

• The W3C released the specs for CSS1 in 1996.• Both browsers quickly implemented the specs.• BUT both also added their own custom tricks, some

of which were based on predictions of the CSS2 standard

• In mid-1998 the CSS2 standard came out.• I will be presenting information based on CSS1

– It is supported by 4.0+ versions of both browsers

Defining CSS

• Styles can be defined in three different ways.– The style tag

<style>…</style>

– An embedded style attribute<p style=“color:red”>

– An external style sheet<link ….>

The style tag

<style type=“text/css”> <!-- h1 {color: blue; font-style: italic}--></style>

• The style tag must be closed• For CSS the type is always text/css• The html comment tags are optional allowing for

backwards compatibility.– Not often used in practice.

Embedded style attribute

<b style=“color:black;

text-decoration:overline,underline;”>text</b>

• Most tags accept style as a valid attribute.

• Best used for one-shot styles or special cases.

An External Style Sheet

<link rel=stylesheet type=“text/css” href=“mystyles.css”>

• Let’s you link an extenal file.– Great for using the same styles on many pages

– The file should have only CSS and no html in it.

• Links should be located in the header.• You can have multiple link tags in a single

document.

CSS syntax

• There are two parts to a CSS statement the class selector and the attributes.– The selector says who to apply the style to.– The attributes say how to format the selected

portion

P {margin-left: 5em; margin-right: 5em;}

Selectors

• The selector indicates what elements the style should be applied to.

• By default this is all elements of the group indicated. – eg: all the <b>, <i>, <p> tags

• There are 3 kinds of subgroup selectors:– Class selectors– ID selectors– Contextual selectors

Class Selector

• Class selectors names should follow the same syntax you would use for a javascript variable name.– Allows the potential for scripting

• To create one you simply choose a valid element name and append your class name with a period.

• You can create a general class by simply ommitting the document element.

Class selector Example

<style>

P {font-size: 14pt; margin-left: 2em; margin- right: 2em}

P.narrow {color:blue; margin-left: 5em; margin-right: 5em

.mygeneric {color: yellow}

</style>

<p>This paragaph is normal </p>

<p class=“narrow”>This paragraph is narrow and in blue</p>

<span class=“mygeneric”>This would be yellow<span>

ID Selector

• ID selectors let you define a rule that applies to only one element in the entire document

#special3 {border: 5px ridge}

<p ID=“special3”>This text is special</p>

Contextual Selector

• Allows you to apply a pattern only to a particular context.

<style type=“text/css”>P {font-size 14pt; color: black;}P EM {font-size: 16pt; color red}

</style>– In this example only text in a emphasized

section inside a paragraph will be in red.

More On selectors

• You may select multiple selctors by seperating them with a commah1, h2, h3, h4 {color: green}

• There’s all kind of wacky stuff in the CSS2 spec you can read up on.

Properties

• Basic syntax:– The properties are enclosed in curly braces– Properties are seperated from one another by

semi-colons– Properies are serperated from their values by

colons.• Each property must have atleast one value

• Multiple values are separated by commas

Property Values

• There are 5 kinds of property values– Keyword properties: underline, visible, ettc.

• Not case-sensitive

– Length properties: 1in, 4px, 5cm

– Percentage values: line-height: 120%

– url property values: url(service://server.com/pathname)

– Color propety values: rgb(5,10,230)

Length Property Values

• In units of:– Relative:

• em: height of ‘m’ in the current font

• ex: height of ‘x’ in the current font

– Pixels• px

– Absolute• in, cm, mm,

• pt: Points (1/72 of an inch)

• pc: Picas (twelve points)

Color property values

• Can be specified by– Keyword: red, blue, green, black…– 3-digit hex: #78C --> #7788CC– rgb as

• Decimal rgb(255,255,255)

• Percentage rgb(50%,50%,50%)

• Don’t leave space between rgb and opening parenthesis

Property list

• There are more than I can list, but here’s a list of most that work for both browsers

• background, background-color, background-image, border-color, border-style, border-width, clear, clip, color, display, float, font-family, font-size, font-style, font-weight, height, line-height, margin, padding, position, text-align, text-deocration, visibility,

• There are many more.

DIVS

• Divs are a great tool for positioning

• The <div> tag is used for containing other tags or text, but applies no information on its own,

• By embedding a style into you div you can assign it an absolute or relative position

Positioning attributes

• Top and left indicate the offset from the upper left corner of the “positioning context”

• Width and height indicate the size of the div• Z-index: a non-negative interger value is

used for determing stacking precedece. Higher number are on top

• Visibility: either inherit, visible, or hidden

Absolute positioning

<div id=“logo” style=“position:absolute; left:100px; top:50px”><img src=“mylogo.gif”>Look at my logo!<div>