Assignment:

Work on your final project.

Reading

Book: CSS Mastery
Chapter: 9 – Bugs and Bug Fixing

Lecture Notes

Contact Form

I’ve bundled my php contact form (demo on my portfolio) in a php site template. This template provides a header.php and footer.php with a couple of pages that include them (contact.php and index.php):
phptemplate.zip

The contact form itself uses two files: contact.php and handler/email.php. The email.php file handles server side validation and processing, redirecting back to the contact.php form with the result.

Media types

CSS can be limited to only apply if the display space is of a certain type. This is managed with the media attribute of the style tag, or the @media construct in an external stylesheet.

Some common types:

screen
handheld
print
…more

Examples:

...
<head>
   <link media="print" type="text/css" src="print.css" />
</head>
...

@media print {
   body {
      background-color:#fff;
      color:#333;
   }
}

Font Sizes: px VS. pt vs. em vs. %

You have several options when defining font-sizes in CSS.

12px: this is literally 12 pixels
16pt: used for print, 1 point is 1/72 of an inch
1em: 100% of the current font scale
100%: 100% of the current font scale

1em and 100% look the same but there are some minor differences. Some browsers handle how these elements inherit a little differently.

body {
font-size:100%;
}
.largeBox {
font-size:120%;
}
.smallBox {
font-size:80%;
}

body {
font-size:1em;
}
.largeBox {
font-size:1.2em;
}
.smallBox {
font-size:.8em;
}

In Class

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>Font-Sizing and Media Type</title>
   		<link type="text/css" src="main.css" rel="stylesheet" />
        <!-- same as previous -->
   		<link media="all" type="text/css" src="main.css" rel="stylesheet" />
        <!-- overrides for special devices -->
        <link media="print" type="text/css" src="print.css" rel="stylesheet" />
   		<link media="screen" type="text/css" src="screen.css" rel="stylesheet" />
   		<link media="handheld" type="text/css" src="handheld.css" rel="stylesheet" />
 
		<style type="text/css"><!--
@media print {
   body {
      background-color:#fff;
      color:#333;
   }
   .smallBox {
   	display:none;
   }
}
 
@media handheld {
 
}
 
/* all css */
body {
background-color:#CC0000;
color: #fff;
font-size:1em;
}
.largeBox {
font-size:1.2em;
}
.smallBox {
font-size:.8em;
}
 
.pxBox {
font-size:16px;
}
 
.ptBox {
font-size:12pt;
}
		--></style>
	</head>
	<body>
		<div class="largeBox">
			<p>The quick brown fox jumps over the lazy dog</p>
		</div>
		<div class="smallBox">
			<p>The quick brown fox jumps over the lazy dog</p>
		</div>
 
        <div class="pxBox">
			<p>PX: The quick brown fox jumps over the lazy dog</p>
		</div>
		<div class="ptBox">
			<p>PT: The quick brown fox jumps over the lazy dog</p>
		</div>
 
	</body>
</html>

Intellectual Pirates

Week 9