Print style sheet
The reason you would want to do this is so that you could have the HTML page 'change' it's appearance automatically when someone visits your page with a particular type of device. These types of devices can include a typical desktop computer, a PDA (Windows CE device, Palm Pilot etc) and a printer among other devices!
I'm going to only be using 'print' and 'screen'.
Here's a sample pair of CSS links that point to different style sheets (from this site!), one for the printer to use and the other for a normal PC monitor to use:
<link rel="stylesheet" type="text/css" media="screen"
href="growth.css" />
<link rel="stylesheet" type="text/css" media="print"
href="growthprintpage.css" /> |
The code in the link that chooses which style sheet to use is this text:
The first ('media="print"') points to the style sheet that has been set up for printing while the other (media="screen") is set up for normal PC monitors. Nowadays most browsers know that if someone tries to print the page the style marked with: 'media="print"' should be used.
For the Style sheets i removed the back ground image change all text to black and increased font size. i then hid all images and the navigation as this is not needed for print documents. To do this use this bit of CSS code.
☆ If you wish you can add a print button but it is not a requirement for the print style sheet to work. The print button uses JavaScript to print the page:
<a href="#" onClick=" window.print(); return false">Print contents</a> |
Opacity with CSS
Simple bit of CSS but I had to look it up so thought I would post it!
filter: alpha(opacity=60) |
Example:
"This is an example of Opacity!!"
Fading in and out.
put within the <head> </head> tags. The duration controls the speed of the fade. (don't use a too long fade affect as this will annoy users browsing the site. I have chosen to use this affect through this site for now as I feel it adds a softer feeling to the site.
<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.4)"> |
Gradient Code
Here is a nice bit of HTML to create a gradient background, use this rather than repeating an image of a gradient.
style="filter:progid:DXImageTransform.Microsoft.Gradient
(GradientType=1, StartColorStr='#FF003399',
EndColorStr='#FF6699CC');" |
Example:
