In this little tutorial we’re going to create simple playing cards using only HTML and CSS (without image files). The purpose of this article is to cover the basics of how CSS and HTML work together. Note: This tutorial assumes you have a basic knowledge of HTML.
Intro to CSS
First lets go over how and where to use CSS. There are three main ways to use CSS in an HTML document.
1. Inline Styling
The first way you can use css is to place the CSS code in and HTML element’s style attribute. For example:
<p style="font-style: italic">My CSS formatted text.</p>All the text between the specific styled <p> tags will be italic. No other text will be italicized unless the same style attribute is added to that text’s HTML element. This method is generally frowned upon due mainly to the fact that it creates much longer and larger web pages that are harder to maintain in the long run.
2. Internal Style Sheet
Another option is to place your CSS in between <style></style> tags usually in the <head> of your HTML document. For example:
<style type="text/css">;
p { font-style: italic; }
</style>Now any text in the entire HTML document that is in between <p></p> tags will be italicized. There is no need to use style=” ” anymore because it’s already defined. This method is best for page specific styling like a custom blog posts and should also be avoided when possible. You can use this anywhere you’d like in an HTML document but keep in mind that any the CSS loaded prior to the CSS in a style element will be overridden by the new style.
3. External Style Sheet
The 3rd and most common way to use CSS is through an external file containing all the style tags to be used on an entire website, server, program, etc. The file is usually hosted on the same server, ends in .css, and is called in the head of a HTML document through the <link> element. For example.
<link rel="stylesheet" type="text/css" href="style.css" />;the file “style.css” could look like this:
body { font-family: verdana,arial,helvetica,sans-serif; font-size: x-small; background-color: #FFFFFF; color: #000000; }
p { font-style: italic; }
a {text-decoration: none; }
h1 { font-family: verdana,arial,helvetica,sans-serif; color: #E47911; font-size: small; }
h2{margin-bottom: 0em; }
h2 { margin-bottom: 0em; }
h3 { margin-bottom: 0em; }
.small { font-family: verdana,arial,helvetica,sans-serif; font-size: xx-small; }
#big { font-family: verdana,arial,helvetica,sans-serif; font-size: x-large;}Note: .small would apply to any HTML element with a class name of “small.” #big would apply to any HTML element with an ID of “big.” For example:
<div class="small">This text will be extra-extra-small.<div>
<p id="big">This text will be extra-large.</p>Creating Playing Cards
Now that you know a little about CSS and HTML, lets make some cards.
Content
In the body of your HTML create One div element with the class name outline with 2 DIVS inside named “top” and “bottom.”
<div class="outline">
<div class="top"></div>
<div class="bottom"></div>
</div>The first div will be the outline of the card and hold everything else we need in our card. The “top” and “bottom” divs will hold our card’s number or letters, and symbols respectfully. So lets add our card’s content.
<div class="outline">
<div class="top"><span>A</span><span>♥</span></div>
<h1>♥</h1>
<div class="bottom"><span>♥</span><span>A</span></div>
</div>As you can see we’ve added our card’s suit and rank. I’ve decided to use ♥ for a heart suit here but you can use any suit you’d like by using ♠, ♣, or ♦ Also notice we’ve added span elements to individually wrap our card’s suit and rank in the top and bottom divs.
When rendered, we get something like this:
♥
Not quite a playing card, but we can see we’re getting there. Now for the styling!
Styling
Now lets style our card. I like to start with the standard HTML elements first then work my way down the page.
body { background: #339900; }
span { display: block; }Through our body styling we’ve changed our pages background color to a “poker table” green. We’ve also set up our span elements so that they align one on top of another instead of side by side. We now have something like this:
♥
So let’s style our divs:
body{ color: #CC0033; background: #339900; }
span{ display: block; }
/* new div styling */
.outline{ width: 110px; text-align: center; padding: 10px; margin: 10px; background: #FFF; color: #cc0033; }
.top{ text-align: left; }
.bottom{ text-align: right; }Through .outline, we’ve defined the width of our card, centered the text, added 10px of padding and margin for spacing, changed the background color of the div element to white, and changed the text color to a dark red (in that order). For the .top and .bottom div we’ve just aligned our text to either the left or right accordingly. So now we have something like this:
♥
Well that’s more like it. We could stop here as technically we have a card but we want our card to be a little more realistic. To do this, we can use CSS to add rounded borders and drop shadows. Unfortunately, this will not work in Internet Explorer however IE9 will be here soon! So for Opera, Firefox, Chrome, etc let’s add the following to our CSS:
body{ color: #CC0033; background: #339900; }
span{ display: block; }
.outline{ width: 110px; border: 0px solid black; text-align: center; padding: 10px; margin: 10px; background: #FFF }
.top{ text-align: left; }
.bottom{ text-align: right; }
/* shadow * rounded corners */
.shadow{ box-shadow: 1px 1px 3px #000; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; }
.rounded{ border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; }This is sort of a catch all method for creating shadows and rounded corners using box-shadow, or a browser specific box-shadow. The settings edit the shadows distance and blur amount as well as color and the rounded border’s corner radius. Feel free to play around with these for a better understanding of what each one does.
You may have noticed that we didn’t add .shadow or .rounded anywhere in our HTML. Luckily, we can add more than one class to an element’s class attribute. So to tie in our CSS we need to go back and add shadow rounded to our outline div element in the first line of our HTML like so:
<div class="outline shadow rounded">
<div class="top"><span>A</span><span>♥</span></div>
<h1>♥</h1>
<div class="bottom"><span>♥</span><span>A</span></div>
</div>Finally, you should have your completed playing card! Only 51 more cards to go.
♥
Well I hope you enjoyed this article. Play around with the height and width, add texture/images if you’d like. Let me know what you think.
Update
Please note this is a very old article from 2010. If I were to rewrite it today (and not use TailwindCSS), I would change a few things (e.g., the span tags are not necessary, would probably use flex, etc.). That said, I’m leaving it up for posterity as it’s still relevant. If you’d like an updated version or have any questions, let me know!
