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

2. 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

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

4. 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

5. 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

6. 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

7. CSS Properties

8. Common CSS Properties

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

10. 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

11. 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

12. Some properties can be assigned a range of values
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

13. 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

14. 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

15. 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

16. 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 CSS1 specification

17. Color Units

18. You can also assign a color using the RGB color system
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

19. 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
inline style sheets apply to the content of a single HTML element
document style sheets apply to the whole BODY of a document
external style sheets can be linked and applied to numerous documents
lower-level style sheets can override higher-level style sheets

20. Inline style sheets
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:12pt font-size:large font-size: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:5em text-indent:0.2in
<html>
<!-- style01.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="page01.html">here</a>
is a formatted link.
</body>
</html>
view page in browser

21. Inline style sheets (cont.)
<html> <!-- style02.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.3in;
margin-right:0.3in; 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.1in margin-right:5%
margin:3em
padding-top:0.1in padding-bottom:5%
padding:3em
border-width:thin border-width:thick
border-width:5
border-color:red
border-style:dashed border-style:dotted
border-style:double border-style: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

22. Inline style sheets (cont.)
<html>
<!-- style03.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>
<tr>
<td> Chris Smith </td> <td> 19 </td>
<td> Pat Jones </td> <td> 20 </td>
<tr> <td> Doogie Howser </td> <td> 9 </td> </tr>
</table>
</body>
</html>
style sheets can be applied to tables for interesting effects
view page in browser

23. 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 H1 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

24. Document style sheets
<html>
<!-- style04.html -->
<head>
<title>Document Style Sheets</title>
<style type="text/css">
h1 {color:blue;
text-align:center}
p.indented {text-indent:0.2in}
</style>
</head>
<body>
<h1>Centered Title</h1>
<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>
<h1>The End</h1>
</body>
</html>
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
view page in browser

25. Document style sheets (cont.)
<html>
<!-- style05.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>
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?
view page in browser

26. Pseudo-elements
<html>
<!-- style06.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="
for late-breaking news.
</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 do not support all CSS2 features
view page in browser

27. 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

28. Modularity & style sheets
<html>
<!-- style07.html -->
<head>
<title>Title for Page</title>
<link rel="stylesheet"
type="text/css"
href="myStyle.css"
title="myStyle">
</head>
<body>
<h1>Centered Title</h1>
<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>
<h1>The End</h1>
</body>
</html>
<!-- myStyle.css -->
h1 {color : blue; text-align : center}
p.indented {text-indent:0.2in}
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

29. How to show the creation date and URL information
<html> <!-- style08.html --> <head> <title>JavaScript preview</title> </head> <body>
<TABLE width="100%" border=0>
<TBODY>
<TR>
<TD align=left>
<SCRIPT language=JavaScript>
document.write("<font size=-1><i>"+document.location+"</i></font>");
</SCRIPT>
<TD align=right>
document.write("<font size=-1><i>"+document.lastModified+"</i></font>");
</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-and-paste the appropriate text into your page in order to accomplish this.
view page in browser

30. On to programming…
You are now ready for assignment 5.