History

A few years ago, I put my acting resume together for the web and I found that I was very frustrated with the presentation. It didn’t look the way an acting resume is supposed to look. So, I spent hours poking around the web looking for something that would present the unique format of an actor’s resume in a clean and simple way.

I found something but wanted nothing to do with it. Heck, I knew about it before I performed my first search. The <table> tag. There was no way I was going near that deprecated option.

If you’re a web person you’re hand is extended and I’m giving you the hi-5 you’re asking for. >SMACK!<

Tables do the job but they’re awful to screen readers and formatting the text, the columns, rows, etc. can be incredibly annoying. I needed something better, more versatile, more dynamic. I needed Cascading Style Sheets aka CSS.

What is CSS?

CSS is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language (ex: HTML). (Thank you Wikipedia.) In laymen terms, it’s the web tech (one file on your web server) that controls the color, size, font, background, etc. of your website from head to toe. Make a change in that one file and it cascades through your entire site. Hence the name. 😉

“And then?”

Knowing I needed the code so I could apply it to my website was the easy part. There was one issue…

There was no code to be found. Why re-create the wheel if it already exists?

This meant I needed to create it. Now, I normally don’t create CSS from scratch so this took some doing and some digging. Thanks to the Google and the Intertubes I was able to make magic happen!

Here, let me show you…

Without CSS

What does text look like when there is no formatting applied to it on the web?

It looks like… Agh! My eyes! They’re bleeding! I can’t read that.

Click on the image to see how awful it looks.

With CSS

What does text look like when CSS formatting is applied to it on the web?

It looks like… Pretty! The spacing… =o Wait, this is the same text as above but with CSS? Yep.

Click on the image to see it in its full glory.

Let’s do this!

You’ve seen the before and after results so I hope you’re excited and ready to lose some weight. Some HTML weight. =D

Imagine it this way… Some time next year I’m going to redesign my website again. If I want my resume to look the way it does above all I’ll need to do is paste the CSS I made into the CSS file and voila. Once the file is saved on the server with the update the text will jump into place. It’s that fracking fast and easy!

Let’s step back to the HTML code where all my content is stored.

Sample HTML

Here is a snippet of the code from my acting resume. You can see it in the images above but it’s easier to look at only a couple line because there is a whole bunch that goes into just three lines of resume CSS bliss.

I wanted to paste the code for you so you could take it and use it by filling in your own information but my CSS kept formatting it despite my best efforts with the <code> tag and playing around with the HTML. Hey! Stop frowning! I’ll post a comment with the code so you can copy it there. Mwahahahaahaaaaa! (That didn’t work either. If you’d like the sample code leave a comment below and I’ll send it to you.)

You got it, yea?

The title of the piece, the role I played, the production company, the director and the status of the project surrounded by a bunch of HTML. Easy stuff. Right? 😉

Actual result

This is what the code above creates when it uses the CSS I wrote:

“All this talk about this magical CSS you wrote? Where is it?”

Fabulous question oh Interweb traveler. Voila…

CSS

Below is the additional CSS you’ll want to include in your CSS file for your acting resume on your website.

/* Acting Resume — START */

/* Theatre */
.t1 {
display:block; width:220px; float:left; }

.t2 {
width:235px; float:left; }

.t3 {
width:220px; float:left; }

.t4 {
width:155px; float:left; }

.t5 {
clear:both;}

/* Readings, Poetry */
.r1 {
display:block; width:250px; float:left; }

.r2 {
width:150px; float:left; }

.r3 {
width:190px; float:left; }

.r4 {
width:155px; float:left;}

.r5 { }

/* Film */

.f1 {
display:block; width:220px; float:left; }

.f2 {
width:235px; float:left; }

.f3 {
width:220px; float:left; }

.f4 {
width:155px; float:left;}

.f5 { }

/* Voice-over */

.v1 {
display:block; width:375px; float:left; }

.v2 {
width:220px; float:left; }

.v3 {
width:140px; float:left; }

.v4 { }

.v5 { }

/* Credit: Created by Gary Ploski of http://garyploski.com & http://casthim.com */

/* Acting Resume — END */

Enjoy.

Wrapping things up

There you have it. There isn’t much more I can say but you might have questions.

Please take this CSS/blog and share it with your friends. All I ask is that you include the ‘Credit’ line in any instance it is used.

Techys, have at it!

“Donations are most welcome.” – me

Please use the PayPal button below.

 

 

 

Disclaimer(s)

There is no support included with this CSS. I wrote it for my personal site and it seemed like a good idea to share it with the acting world because we’re all strapped for cash.

At no time should anyone be charged to use this code. I am providing it for free. If you copy this code and charge for it… Shame on you. If you learn that you’ve been charged for the code demand a refund.

I’m not a web developer by day and know, with absolute certainty, that this code can be cleaner but I know it does the job.

If you write CSS regularly and would like to suggest better I am listening. Leave a comment below. =D

Are you a WordPress plugin developer and have an interest in writing a plugin that would make this easier… Oh yea! You would make the acting community über happy.

If you do not understand anything I wrote above but you want your resume to look the way it does on my site on your site, send this page to your web site developer. They’ll know what to do with it.

I hope this is helpful in some way to someone.

Until next time.

Intertube Site(s) using my code:

• http://www.miksmith.com.au/cv