introduction to web authoring bill hart-davidson hartdav2@msu.edu aim: billhd30 session 11...
Post on 22-Dec-2015
219 Views
Preview:
TRANSCRIPT
Introduction to Web Authoring
Bill Hart-Davidson
hartdav2@msu.edu
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>
<!--
h2 { font-type: Arial,sans serif; font-size: 40pt; font-weight: bold }
-->
</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.
top related