<-- back to Battlereports.com

ZerG~LinG's CSS For Reporters 101

Hello everyone. This is a straight to the point, example oriented guide to using CSS in your reports to make everything look good, professional, and more readable. I consider myself a minor oracle in the ways of CSS, so hopefully I'll be able to teach everyone a few tricks. Have a good read.

This is how it's going to go down:

What is CSS?

In short, CSS is a language that compliments HTML, and determines the look of the HTML. That's it. CSS makes things look good, and allows you to make changes to entire sites with just a few keystrokes. We'll learn how in just a second, so hang on, people.

Why would i use it?

That's it for What and Why, now for the meat of the guide, the how. This is where people with short attention spans look for porn.

The styling of a report

First, you've written a report. We throw some very basic HTML in, using Notepad or a more expensive HTML editor. Namely, paragraphs, which seperate sections in your report, and maybe some headers to mix things up. Very, very basic stuff.

We also add a container around the report - I'm sure most of you are familiar with this. You could use a table, but the code is kinda bulky, so we use a simple <div> tag. A <div> tag is really just a container, and nothing in itself. Observe:

<html>
<head>
<title>My report!</title>
</head>
<body>

<div>

<h1>A really great report!</h1>

<p>Normally, if I have not discovered my opponent’s race by this point, I make a zealot before starting a cyber core. This game, however, my probe found zero at 12, the first place I looked. He was terran. He was rated C1, 2 levels above me, so I decided to cheese. I was going to be 4 DT drop.</p>

<p>I added a cyber core on 14 and another pylon on 15. My first goon was out and I used it to plug the ramp. Five seconds later the scouting SCV showed up. It took a few shots from the goon and turned to flee. I ordered the goon to pursue it. Normally, the goon can kill the SCV if it pulls a U-turn and attempts to scale the ramp. Zero did something he was not supposed to though. Instead of running straight back, he ordered his SCV to run in a small arc around my goon, which allowed it to get up the ramp with 10 HP remaining. I sent an emergency probe to intercept the enemy worker before it saw my base, but zero pulled another sharp turn and evaded the probe as well. I hate people who micro the workers well. I had to cancel the citadel of adun that I had started moments earlier. No 4 DT drop I guess.</p>

</div>

</body>
</html>

So far, no surprise anywhere, what we've got here is our barebones report. Take a look here.

Okay, now for the actual CSS. We add this to the code, at the very top, in the <head> tag:

<head>
<title>My report!</title>
<style type="text/css">

</style>
</head>

The bold code is our new addition. Everything we write inside the <style> tag is CSS, and will affect the document! This is what you need to start writing CSS - now it's time to learn some CSS tags. Let's jump straight to it:

<style type="text/css">

body {
background-color: #111111;
padding: 20px;
color: #eeeeee;
}

</style>

Here's what we told the browser, in laymans terms:

We will style the <body> tag. Everything inside the <body> tag will have a background color of #111111. The <body> will have a padding of 20 pixels. The color of the text inside the <body> tag will be coloured #eeeeeee.

Let's get to know a few more tags:

body {
background-color: #111111;
padding: 20px;
color: #eeeeee;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Arial";
font-size: 11px;
line-height: 180%;

}

The text inside the body tag should be displayed with the Lucida Grande font. If you don't have the first font choice, the text will be "Lucida Sans Unicode" - etc.
The text should be 11 pixels in size, and have a line-height of 180%;

Okay, we are beginning to see some advantages here: First, you can specify a number of fonts, for example, Gill Sans is a trendy font these days, but few people actually have it. Now you can still give the people who have it the aestetic pleasure, and ensure everyone else have an acceptable alternative!

Second, font-size. It's possibly to specify it in pixels, which allows you much more control than with the normal size="1". What the hell is size="1" anyway? One freightcruiser? One battlereporter cut in half? CSS gives you more control, and prettier text.

Third tag is one of my favorites, line-height. Line-height determines how far the lines are between eachother, which can dramatically increase readability.

Don't trust me? Check our updated example.

The report still streches all the way across the window, though. And very long lines makes it hard to read something, and isn't the best looking either.

Remember the <div> tag we wrapped around the report in the beginning? Let's revisit that, and give it a "class":

<body>

<div class="container">

<h1>My report!</h1>

Giving html tags a class (you can do it with all html tags) allows CSS to communicate with it. We now add this to our css, in the top in our <style> tag:

.container {
width: 500px;
padding: 20px;
border: 1px solid #aaa;
background-color: #222;
}

Notice the . infront of container. This tell the browser: I want to style class="container"

Simple enough, yes? The width: 500px; is self-explanatory, and makes our report a lot thinner. We add some padding here as well - keeping a good amount of space between the text and...

The border! Which we add with a border: tag. First we specify width, then type (I'll cover other types in a sec) and the color of the border. Notice I've used a clever shorthand: instead of saying #eeeeeee, we can shorten it a bit.

I've also given the container a different color than the <body> - this will help to mix it up a bit and seperate the actual report from the background a bit more.

Take a look at our example so far.

And booya, there's a very readable report, simple and professional looking. The actual CSS coding took a few minutes, and added some visual flair, punch and readabiity while still being a solid text-only!

A step further

Okay, so we learned some of the basic tags here, and we've been able to get a respectable result from it. In all essence, you could stop here and walk away laughing, knowing the basics. Alternatively, you could press on and learn a few more tags to play around with.

Remember, we can style anything with CSS, so let's get straight to it and tackle the <h1> tag we wrote the header in.

h1 {
font-family: Times, Georgia;
letter-spacing: -1px;
font-weight: 900;
font-size: 25px;
border-bottom: 1px dashed #666;

text-align: center;
}

As you can see, we've decided to style the h1 tag. The font-family should be recognizable - and we've chosen Times, followed by georgia if people, for some obscure reason don't have the most distributed font ever :-)

Following font-family is letter-spacing. Amazingly enough, this denotes the space between each letter. I've set it to a negative value here, to cram the letters together for an interesting effect.

Font-weight determines how heavy the text is. It goes from 100 to 900, and also includes the value "bold". You'll notice that I've decided on a very heavy version - you might want to experiment with font-weight: 100; on headers as well, it can make drab fonts look stylish.

Font-size is another familiar tag - as is border-bottom. Notice how we can be more specific this way, and say - hey I only want a border on the bottom. This time, I've made the border dashed. The final tag, text-align needs no introduction.

Now, with a little playing around, check out our report.

I'll cover a final thing before we wrap it up, and that's background images. Observe:

body {
background-color: #111111;
padding: 20px;
color: #eeeeee;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Arial";
font-size: 11px;
line-height: 200%;
background-image: url(war.jpg);
background-position: top right;
background-repeat: no-repeat;

}

Very simple code: We want the image war.jpg to be display in the background of the <body>. We want it placed in the top right, and we don't want it to repeat all over the page.

Excited? On the edge of your seat? Take a look at the final example.

It goes without saying that especially that last effect should be used with care and consideration - and is more a curiosity than an actual useful feature. See it performed expertly by my good man dialtone. Take away the last two tags, and replace the image with a pattern, and you've got your normal background pattern - backgroundcity.com style.

Linking your stylesheet

You've learned how to code css now - and use it in your report. A great way to learn new tags and other ways of doing things is to look at other peoples CSS code (no stealing!), and other you'll find that the stylesheet is externally linked to the HTML document. What you just learned is how to embed css directly into the head tag. However, when making large sites (br.com for example), you usually externally link the css file, as such:

<head>
<link href="reportstyles.css" rel="stylesheet" type="text/css" />
</head>

This way, instead of typing your CSS in the <style> tag inside the <head>, you link it, and just put the CSS directly in a .css file. Make a CSS file by firing up notepad, and just save as... reportstyles.css. Much like you would a html file, but with a different suffix.

See the source of this very document for a working example :-)

A general rule of thumb: When you've only got one document you want to style (like a report), embed the CSS - like you learned in this guide. If you use more than one document (like with a site) externally link it.

Lessons learned

The final word

Wanna learn more about CSS? Peek at others source code, search for it on google, and maybe even get a very good book on good html/css practices.

That's it - hope you learned something, and will now finally ditch bad formatting, meaningless <font> tags, and create even more, wonderfully readable battlereports :D

- Brian Andersen / ZerG~LinG / warsmith.org / mail me

 

 

 

Completely unrelated

badme: Let me see if I understand it.
badme: I can write this style
badme: Name it something
badme: And then invoke it whenever I want to and get the same effects?

me: yes.
badme: So like 'container' for one div, and like
badme: 'Sexy 60s Danish <3' for another div?

me: for example, in the guide, all the code
me: is inside <div class="code">
badme: AHHHHH
me: to make it stand out from the rest
badme: OMFG
badme: Dude
badme: I just had
badme: Eye-Opening Experience

I hope everyone else will be as amazed as badme.