introduction to web authoring bill hart-davidson [email protected] aim: billhd30 session 11...

Introduction to Web Authoring

Bill Hart-Davidson

[email protected]

AIM: billhd30

Session 11

www.msu.edu/~hartdav2/wa.html

Today in Class…

Fun with CSS!

A brief profile of CSSA brief profile of CSS

Cascading style sheets is a specification created by the W3C which allows web developers to create style documents to control textual features and the positioning of objects on the page.

CSS lets you separate content from presentation.

What is CSS? • Multiple styles can be defined and used in

individual HTML documents and across multiple HTML documents (fonts, spacing/placement, colors)

• Browser follows an order of interpretation (aka, a cascade) of the style definitions

• 3 W3C CSS standards (CSS1 and CSS2 are current; CSS3 in development)

Browser: Rendered View

QuickTime™ and aTIFF (LZW) decompressor

are needed to see this picture.

Page.htmlpage.css

In most cases, you will have two documents controlling how a page looks on the screen. One html file and one css file.

Styles in HTMLStyles in HTML

In html, style attributes that describe how text or other elements should display can be incorporated into tags, thus:

<font face=“sans-serif” size=“-2”>Hi!</font>

Problems arise when you need to change styles frequently!

Some problems with integrated Some problems with integrated style/content?style/content?

• each instance of a style must be hand coded, meaning that any document with lots of style changes becomes labor intensive

• mantaining a consistent look and feel across pages is tough on a large site

• making style changes to multiple pages is difficult and very time consuming

Styles in CSSStyles in CSS

In CSS, style attributes can be defined once – either in the head of a document or in a separate style sheet document – and referenced whenever needed.

So if this represents my standard body text style:<font face=“sans-serif” size=“-2”>Hi!</font>

I can simply define the <P> tag to display all text as sans-serif, in the point size I want…

Styles in CSS, 2Styles in CSS, 2

I can simply define the <P> tag to display all text as sans-serif, in the point size I want…

P { font-family: Helvetica, Sans-Serif;font size: 9pt; }

The Logic of Styles in CSSThe Logic of Styles in CSS

CSS allows you to attach display information to most HTML elements. A CSS rule is the basic unit of a style sheet.

A rule first names an HTML element (like a body text paragraph <p>) and then describes how that element should display.

Thus, a rule contains a selector and a declaration.

Types of style sheets

• CSS defines 3 essential style sheets

• Inline

• Embedded

• Linked

Inline style

• Inline uses the style= attribute<p style="font-family: Arial,sans-serif;

font size: 28pt;">Here’s a paragraph with 28pt font size.</p>• Controls style on an element basis

Embedded style 1

• Embedded uses <style></style> tags

• Controls style on a page basis

• Use  to protect browsers that don’t recognize <style> tags

Embedded style 2 <html><head>

<style>



</style>

</head><body></body></html>

Linked style

• Linked style uses same syntax as embedded style but is in a separate .css file that you link to from the HTML file requesting the style

• Controls style more globally, spanning documents or an entire Web site

Linked style 2

• HTML file using the linked style uses <link> tag within <head> tag to link to it

<html><head><link rel="stylesheet" type="text/css" href="linked_style.css"></head>

Linked style 3

• Here’s the style definition in the

linked_style.css file

h1 { font-family: Arial,sans-serif; font-size: 48pt; font-weight: bold }

Style hierarchy

• Style sheets work together in a cascading manner• Inline trumps embedded and linked• Embedded trumps linked• So use linked for global, generic types of things

and keep to a minimum• Use other 2 types for fine tuning

CSS SyntaxCSS Syntax

CSS rules have the following structure:

selector {property1 : value; property2 : value}

P {font-family : sans-serif; font size : 9}

With this rule applied, everything enclosed by a <p></p> tag will display in sans-serif, 9pt.

Did he say

enclosed?

CSS will make your old HTML CSS will make your old HTML look uhhhhgly!look uhhhhgly!

CSS references objects – in most cases, chunks of text or images enclosed by tags – so you must define as an object any text that you want to reference in a style sheet.

This means: You have to close those <p> tags

CSS will make your old HTML CSS will make your old HTML look uhhhhgly, 2look uhhhhgly, 2

It also means…

• You define object Classes, ID’s and learn their properties and value ranges

• You learn to use wildcard tags like <div> and <span> to define sub-sections of text within the body of a document

• You have to get good at designing documents…thinking ahead what will help both content developers and readers

CSS Classes…naming objectsCSS Classes…naming objects

In CSS, a class refers to a particular category of a more general tag.

Let’ say you wanted odd and even table cells to be different colors for easier scanning…

TD {font-face : sans-serif; font-size : 12pt}.even {bgcolor : #FFFFFF}

.odd {bgcolor : #CCCCCC}

CSS Classes…cont.CSS Classes…cont.

In your HTML code for the table, you simply reference the class to invoke the style:

<td class=“even”>display this text with a white background</td>

<td class=“odd”>and this text with a grey background</td>

TD {font-face : sans-serif; font-size : 12pt}

.even {background-color : #FFFFFF}

.odd {background-color : #CCCCCC}

Getting more specific…ID’sGetting more specific…ID’s

You can set ID’s for specific kinds of objects too by giving them a unique ID name and set of display rules.

Let’s say, for example, we want a table row that serves as a column header… it could be different than our odd or even classes of rows and even different from our default row look.

An ID ruleAn ID rule

Here, I have added a new ID to our TR rules

Now, I can specify a row as a header:<tr id=“header”>Red, sans-serif, 12pt type on a white

background, por favor</tr>

TR {font-face : sans-serif; font-size : 12pt}

.even {background-color : #FFFFFF}

.odd {background-color : #CCCCCC}

#header {color : red}

<DIV> & <SPAN> are your <DIV> & <SPAN> are your friendsfriends

<div> and <span> tags allow you define exceptions to the general rules of your body text…and they are helpful tools for document designers and web developers

<div> is usually used to designate styles for block elements that should stand apart from the body text…like callout quotes. Everything inside a <div> tag takes on the <div> attributes…and you can specify classes and ids for <div> too!

More on <SPAN>More on <SPAN>

The <span> tag is usually used to change the display attributes of a short run of text or objects within a block-level element (such as a paragraph or table cell).

I might use <span>, for example, to define a look for code examples (like the one below) that is different than the body text…

<span class=“example”>TR {font-face : sans-serif; font size : 12pt}</span>

Seeing a document as a Seeing a document as a collection of objects…collection of objects…

All of these tags, attributes, rules, selectors, declarations…what do they mean?

They are all tools you use well ONLY if you can see a document as a collection of objects…so, let’s practice.

introduction to web authoring bill hart-davidson [email protected] aim: billhd30 session 11...

Documents