HTML\CSS Coupon Script

Question

Does anyone know how to create a coupon (printable is even better) with HTML & CSS? Forgive the horribly simple question, I don't do much of any web development :)

Thanks in advance.

EDIT: EDIT: Seth posted his answer again, which I accepted, thus I removed the answer from here (it was just a copy of his original deleted post).

Answer 1

I'm guessing you want

.coupon {
   width: 250px;
   padding: 10px;
   text-align: center;
   border: 3px dashed #ccc; }

  <div class="coupon">15 points for your reputation</div>

around a div? Or something more involved?

I stole it from here.

Answer 2

I'll not cover the HTML part of the question because that's very , very basic, and very specific to yourself.

For print specific styling, in your HTML mark-up you can add a stylesheet explicitly for print media, like so:

<link rel="stylesheet" type="text/css" media="print" href="my-printable-style.css"/>

You can also do this directly in an existing CSS doc, by using CSS directives, like so:

//sample ripped from http://www.w3schools.com/CSS/css_mediatypes.asp
@media screen
  {
  p.test {font-family:verdana,sans-serif;font-size:14px}
  }
@media print
  {
  p.test {font-family:times,serif;font-size:10px}
  }

but this is generally viewed as the weaker tool because it can lead to confusion and maintenance problems to bloat a single document like this, and it achieves the same as the element based method.

For a good run down of some printable CSS issues read this list apart article.

Answer 3

This article has all the information you need in a simple and understandable way. Hope it helps you.

Answer 4

Thanks for the question... Was looking this up myself.