Introduction to Web Authoring Ellen Cushman Cushmane@msu.edu Introduction to Web Authoring Class mtg. #4 www.msu.edu/~cushmane/wra210.htm our syllabus www.msu.edu/~cushmane/wa.htm old class page www.msu.edu/~cushmane/wa2.htm new class page
Today in Class… Review & Your questions. Brief Into to CSS coding. Workshop your pages. Homework: Work on your page! Text about you, an e-mail link, a table, external links to our class, images, and some basic css.
Review & Questions What are 3 types of links? What can I go over again for you? What new vocab did you learn last class? Why are there so many songs about rainbows?
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. >selling point<CSS lets you separate content from presentation. >/selling point<
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 Today we’ll work with the first two!
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>
Workshop Have a great weekend! Add your links to your page if you didn’t last time Add your css inline and embedded styles Send me your url if it’s changed. Make sure your page is showing on our new project page! If not, alert me in e-mail Have a great weekend!