Introduction to Web Authoring

Introduction to Web Authoring Session 11 Bill Hart-Davidson hartdav2@msu.edu AIM: billhd30 www.msu.edu/~hartdav2/wa.html

Fun with CSS! Today in Class…

A 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)

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

Styles 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 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 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, 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 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

Did he say enclosed? CSS 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.

CSS will make your old HTML 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 look 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 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. TD {font-face : sans-serif; font-size : 12pt} .even {background-color : #FFFFFF} .odd {background-color : #CCCCCC} 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>

Getting 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 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 friends <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> 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 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