[center][size=36pt][b]RMN Game Profile CSS[/b][/size]
[size=14pt][i]A handy, decently through rundown of how to make your RMN game profile blisteringly gorgeous.[/i][/size]



[b]This guide contains:[/b]
[b]1)[/b] What CSS Is, and What It Isn't
[b]2)[/b] Basic CSS Syntax
[b]3)[/b] Anatomy of a Game Profile
[b]4)[/b] Common Game Profile Modifications

...and a lot of [b]bold text[/b].[/center]



[size=16pt][b]Preamble[/b][/size]
[i]This is the part where I talk about stuff.[/i]

If you're a regular RMNer, you more than likely know what this pertains to, and you are encouraged to scroll down to the real meat of this guide. If you're a newcomer, read on.

[b]RPGMaker.net[/b] (hereafter referred to as RMN) offers a service to freeware game developers the world over in the form of [b]free hosting for their games[/b]. Through RMN, a developer creates and maintains a [b]game profile[/b], with which they can present information about their games along with other media, such as screenshots. Among other features, these profiles can be [b]customized with a unique look[/b] to help a game's presentation stand out. Take a look at [url=http://rpgmaker.net/games/146/]these[/url] [url=http://rpgmaker.net/games/902/]four[/url] [url=http://rpgmaker.net/games/1794/]game[/url] [url=http://rpgmaker.net/games/1882/]profiles[/url]. Notice how they are all radically different from the standard RMN look that you see on this very page? [b]This guide[/b] will show you how to do just that.





[size=16pt][b]What CSS Is, and What It Isn't[/b][/size]
[i]This is the part that consists of semantic BS.[/i]

There's a lot of languages used in computing; that's a given. Where does CSS fall, exactly?

A [b]programming language[/b] contains operational commands or structures (such as loops), as well as having variables and more often than not, arrays. CSS is [b]not[/b] this. You can't compile CSS into a standalone executable file because CSS [b]doesn't do anything[/b] in its own right - it instead defines a set of rules that another program (such as the browser you're viewing this page in) uses to present data.

A [b]markup language[/b], like HTML and XML, organizes and categorizes data. For example, you apply 
 and 
 tags in an HTML document to define certain bits of text as headings and paragraphs. These languages are used extensively on the web - the vast majority of the pages you view on a daily basis are in HTML format. Markup languages have a long and storied history with CSS, and I'll touch on that in just a moment. CSS itself, however, is [b]not[/b] a markup language.

You can think of CSS as a [b]supplement to a markup language[/b] - after you've defined the data, you use CSS to define the rule-sets used to show the data to a user. The most common mantra in web design and web development is that [b]data and presentation are to be kept separate from one another[/b]. This is accomplished by pairing a markup language with CSS.





[size=16pt][b]Basic CSS Syntax[/b][/size]
[i]This is the part where things get nerdy.[/i]

Let's dive right in, shall we?

[code]selector {
     property: value;
     property: value;
}[/code]

A [b]selector[/b] is just that - it selects a specific bit of data, such as a heading or a line, to apply those particular rules to.
A [b]property[/b] is a specific rule that you set for that bit of data. For a heading, you might change its font or alignment.
A [b]value[/b] is what you're setting a given property to. For the alignment property, you can center or right-align, among other possible values.

Now, let's pick apart some example CSS.

[code]#body { 
     background: #300000 
           url("http://rpgmaker.net/media/content/users/2171/locker/fake-link.png") 
           fixed no-repeat !important; 
     color: #cccccc;
}[/code]

[b](The url tags are a result of RMN's code tag being stupid - they appear on their own. Disregard them for now.)[/b]

This sample here sets rules for the [b]body[/b] tag of an HTML document. It sets a [b]background[/b] property and a [/b]color[/b] property. #300000 and #cccccc are [b]colors in hexadecimal[/b] - a dark red and a light gray, respectively.

The [b]values[/b] of the background property are as follows: a solid background color, a background image (fake-link.png), fixing the image to the page (ergo, it scrolls with everything else), setting it to no-repeat (ergo, it only shows one of that image instead of tiling it over the entire page), and setting it to !important.

What does [b]!important[/b] do? It prevents that property from being overwritten later in the CSS (assuming there isn't another !important later on). It's necessary due to the [b]cascading[/b] nature of CSS.

CSS stands for [b]Cascading Style Sheets[/b]. This refers to the way CSS properties "trickle down" to other properties - if you say the entire page has a red background, you don't need to specify that red background in every element of your page because it [b]cascades[/b] from the page property. Everything inside the page inherits the red background from the page itself.

Now, what happens when you give a bit of text a gray background? Well, it overwrites the red background for that bit of text. The selection will have a gray background, and everything else will have a red background. Easy.

This whole logic of inheritance and overwriting properties is great for you, the end-user of RMN's game profiles, because it means you don't have to re-write all of RMN's default CSS - everything from font family to spacing to columns. You only have to write the properties you want to overwrite - most often, colors of text or backgrounds.