Web Development Cascading style sheets separating content presentation

Web Development Cascading style sheets § § separating content & presentation inline vs. document vs. external sub-classes of elements pseudo-elements on to programming…

Introduction to Styles and Properties To ensure that future Web page authoring separates the definition of the elements in a document from how they appear, many of the display and formatting extensions that were added to the HTML language, such as the <font> element, were deprecated in HTML 4. 0 and in XHTML 1. 0 in favor of CSS

Introduction to Styles and Properties Cascading Style Sheets (CSS) are a standard set by the World Wide Web Consortium (W 3 C) for managing the design and formatting of Web pages in a Web browser

Introduction to Styles and Properties A single piece of CSS formatting information, such as text alignment or font size, is referred to as a style Some of the style capabilities of CSS include the ability to change fonts, backgrounds, and colors, and to modify the layout of elements as they appear in a Web browser

Introduction to Styles and Properties CSS information can be added directly to documents or stored in separate documents and shared among multiple Web pages The term “cascading” refers to the Web pages’ ability to use CSS information from more than one source

CSS Properties CSS styles are created with two parts separated by a colon: the property, which refers to a specific CSS style, and the value assigned to it, which determines the style’s visual characteristics Together, a CSS property and the value assigned to it are referred to as a declaration or style declaration

CSS Properties

Common CSS Properties

CSS Properties The properties available in CSS 1 are grouped into the following categories: § Color and background properties § Font properties § Text properties § Box properties § Classification properties

Inline Styles The most basic method of applying styles is to use inline styles, which allow you to add style information to a single element in a document

Inline Styles You use the style attribute to assign inline style information to an element You assign to the style attribute a property declaration enclosed in quotation marks

CSS Values The values you can assign to a CSS property depend on what type of property it is Some properties can be assigned a range of values

CSS Values For instance, you can assign any font name that is available on a user’s system to the font-family property For other properties, you must assign a value from a specific set of values

Length Units Length units refer to the units of measure that you can use in a style declaration to determine the size or positioning of an element Whether a length unit is used for sizing or positioning depends on the property and the element to which it is assigned

Length Units You assign a measurement value to a property by assigning the number that represents the measurement, immediately followed by the unit of measure

Color Units A color unit represents a color value that you can assign to a property You can assign a color unit to a property using any one of 16 color names defined in the CSS 1 specification

Color Units

Color Units Most graphical computer systems use the RGB color system for specifying colors You can also assign a color using the RGB color system

Content vs. presentation most HTML tags define content type, independent of presentation style sheets associate presentation formats with HTML elements § Remember, HTML style sheets are known as Cascading Style Sheets, since can be defined at three different levels 1. inline style sheets apply to the content of a single HTML element 2. document style sheets apply to the whole BODY of a document 3. external style sheets can be linked and applied to numerous documents

Inline style sheets <html>  <head> <title>Inline Style Sheets</title> </head> <body> <p style="font-family: Arial, sans-serif; text-align: right">This is a right-justified paragraph in a sans serif font (preferably Arial), with some <span style="color: green">green text</span>. </p> <p>And <a style="color: red; text-decoration: none; font-size: larger; " href="page 01. html">here</a> is a formatted link. </p> </body> </html> view page in browser Using the style attribute, can specify presentation style for a single HTML element § within tag, list sequence of property: value pairs font-family: Courier, monospace font-style: italic font-weight: bold font-size: 12 pt font-size: large fontsize: larger color: red color: #000080 background-color: white text-decoration: underline text-decoration: none text-align: left text-align: center text-align: right text-align: justify vertical-align: top vertical-align: middle vertical-align: bottom text-indent: 5 em text-indent: 0. 2 in

Inline style sheets (cont. ) <html>  <head> <title>Inline Style Sheets</title> </head> <body> <p>Here is an image <img src=“heckerb. gif" alt=“Barbara Hecker” style="margin-left: 0. 3 in; margin-right: 0. 3 in; vertical-align: middle; border-style: double; border-color: yellow"> embedded in text. </p> <ol style="list-style-type: upper-alpha"> <li> one thing <li> or another <ul style="list-style-type: square; whitespace: pre"> <li> with this <li> or that </ul> </ol> </body> </html> more style properties & values margin-left: 0. 1 in margin-right: 5% margin: 3 em padding-top: 0. 1 in paddingbottom: 5% padding: 3 em border-width: thin border-width: thick border-width: 5 border-color: red border-style: dashed borderstyle: dotted border-style: double borderstyle: none whitespace: pre list-style-type: square list-style-type: decimal list-style-type: lower-alpha list-style-type: upper-roman view page in browser

Inline style sheets (cont. ) <html>  <head> <title> Inline Style Sheets </title> </head> <body> <table style="font-family: Arial, sans-serif"> <caption style="color: red; font-style: italic; text-decoration: underline"> Student data. </caption> <tr style="background-color: red"> <th> name </th> <th> age </th> </tr> <td> Chris Smith </td> <td> 19 </td> </tr> <td> Pat Jones </td> <td> 20 </td> </tr> <td> Doogie Howser </td> <td> 9 </td> </tr> </table> </body> view page in browser </html> style sheets can be applied to tables for interesting effects

Document style sheets inline style sheets apply to individual elements in the page § can lead to inconsistencies as similar elements are formatted differently e. g. , might like for all H 1 elements to be centered § inline definitions mix content & presentation violates the general philosophy of HTML alternatively, document style sheets allow for a clean separation of content and presentation § style definitions are placed in the HEAD of the page (within STYLE tags) § can apply to all elements, or a subclass of elements, throughout the page

Document style sheets <html>  <head> <title>Document Style Sheets</title> <style type="text/css"> h 1 {color: blue; text-align: center} p. indented {text-indent: 0. 2 in} </style> </head> <body> <h 1>Centered Title</h 1> <p class="indented">This paragraph will have the first line indented, but subsequent lines will be flush. </p> <p>This paragraph will not be indented. </p> document style sheets ensure that similar elements are formatted similarly § can even define subclasses of elements and specify formatting p. indented defines subclass of paragraphs • inherits all defaults of <p> • adds new features to specify this newly defined class, place class="ID" attribute in tag note how "clean" the BODY is <h 1>The End</h 1> </body> </html> view page in browser

Document style sheets (cont. ) <html>  <head> <title> Inline Style Sheets </title> <style type="text/css"> table {font-family: Arial, sans-serif} caption {color: red; font-style: italic; text-decoration: underline} th {background-color: red} </style> </head> <body> <table> <caption> Student data. </caption> <tr><th> name </th> <th> age</th></tr> <tr><td> Chris Smith </td> <td> 19 </td></tr> <tr><td> Pat Jones </td> <td> 20 </td></tr> <tr><td> Doogie Howser </td> <td> 9 </td></tr> </table> </body> </html> view page in browser document style sheets are especially useful in formatting tables effectively separates content from presentation what if you wanted to right-justify the column of numbers? what if you changed your mind?

Pseudo-elements <html>  <head> <title>Title for Page</title> <style type="text/css"> a {color : red; text-decoration : none; font-size : larger} a: visited {color : black} a: active {color : orange} a: hover {color : blue} p: first-letter {font-size : large; color : white; background-color : darkblue} </style> </head> <body> <p>Welcome to my Web page. I am so happy you are here. </p> <p>Be sure to visit <a href="http: //www. cnn. com">CNN</a> for late-breaking news. </p> </body> </html> pseudo-elements are used to address sub-parts of elements § can specify appearance of link in various states : visited : active : hover § can specify format of first line in page or paragraph : first-line § can specify format of first letter in page or paragraph : first-letter Danger : changing the look of familiar elements is confusing Careful : current browsers view page in browser do not support all CSS 2

External style sheets modularity is key to the development and reuse of software § design/implement/test useful routines and classes § package and make available for reuse § saves in development cost & time § central libraries make it possible to make a single change and propogate external style sheets place the style definitions in separate files § multiple pages can link to the same style sheet, consistent look across a site § possible to make a single change and propagate automatically § represents the ultimate in content/representation separation

Modularity & style sheets <html>  <head> <title>Title for Page</title> <link rel="stylesheet" type="text/css" href="my. Style. css" title="my. Style"> </head> <body> <h 1>Centered Title</h 1> <p class="indented">This paragraph will have the first line indented, but subsequent lines will be flush. </p> <p>This paragraph will not be indented. </p> <h 1>The End</h 1> </body> </html> --> h 1 {color : blue; text-align : center} p. indented {text-indent: 0. 2 in} ideally, the developer(s) of a Web site would place all formatting options in an external style sheet all Web pages link to that same style sheet for a uniform look § simplifies Web pages since only need to specify structure/content tags view page in browser

How to show the creation date and URL information <html>  <head> <title>Java. Script preview</title> </head> <body> <TABLE width="100%" border=0> <TBODY> <TR> <TD align=left> <SCRIPT language=Java. Script> document. write("<font size=1><i>"+document. location+"</i></font>"); </SCRIPT> <TD align=right> <SCRIPT language=Java. Script> document. write("<font size=1><i>"+document. last. Modified+"</i></font>"); </SCRIPT> </TR></TBODY> </TABLE> </body> </html> For your assignment, you need to show the date and URL of the website The page's location and last modification date should be automatically displayed at the bottom. View the source for this Web page and cut-andpaste the appropriate your page in view text page into in browser order to accomplish