CSS Guide 2: The (very) Basics of CSS

No, not THAT CSS...

Alright, Gax users, it's time to start making your Gax page suited to your liking. The first section of this guide will explain a little about the two basic parts of any "rule" of CSS, and the next part will specify how the parts of a CSS rule can be manipulated- we'll need that knowledge for customizing our gax modules, which I'll feature in CSS Guide 3.. (If you haven't read CSS Guide 1, please do so- It's got important information about the terminology here, and more general info about CSS.)

First, a little info on CSS. Every CSS stylesheet is broken up into rules- these are the actual commands given to the browser regarding the style in which the page is rendered.

Every rule in CSS is broken into two main parts: A selector, and a declaration- written in this format:

selector {declaration;}

The selector in a CSS rule tells the browser what tags you want this rule to apply to- literally, "selecting" which parts of the content of the page will be affected by this rule.
The declaration in a CSS rule tells the browser what to do to the selected elements. Each declaration is itself two parts: A property and a value. The property of a declaration is what part of the selected element is to be changed, and the value is states what the property is set to. Examples may include rendering text a certain color, making a column a certain width, and so on. This means one complete CSS rule takes this form:

selector {property:value;}

Selectors can be very broad, such as selecting all "img" tags- any rule written with that selector would affect all images on that page. They can also be very narrow, written to affect only a single element on every page. Since most Gaxers will probably want to move individual boxes around, these very specific selectors will be those we're focusing on. Declarations can be thought of in much the same way- subtle changes (changing text to dark gray, for example), or very broad (You can chose to not display certain things at all!)

Every CSS rule must have at least one selector, but if you wish to add more, you can- just separate each selector with commas. Each rule must also contain at least one declaration, but it's perfectly ok to have multiple declarations in one CSS rule. Here's an example of a multiple selector, multiple delclaration rule, selecting "h1" (heading 1) and "h2" (heading 2) tags, and declaring two properties (color takes on a value of "red", and height takes on a value of "2in"):

h1, h2 {color:red; height:2in;}





And now, to the examples!

Try to think of your Gax page as a grid- this grid has several boxes contained within it, and each of these boxes holds some major elements of your page. Most of the largest boxes are shaped like columns (they're also called "col"s in the code for the site)- vertical pillars that each encapsulate many of the boxes visible on your gax page. These columns are invisible and serve as containers- for example, the "Hello, *USERNAME*", "Promote this Page!", "Check out these Gax Exclusives", and "GAXER Chatter" boxes are all contained within a column. (There's also another, hidden box below Gax Chat reserved for ad space- maybe someday, eh?) These large "columns" all serve the same purpose, so they're all given a "class"- an identifying title given to a group of similar elements on a page. Not many of the individual elements on the Gax page have individual IDs- they're mostly all grouped into classes. This is important to know, because when we define CSS rules pertaining to certain parts of the gax page, we'll have to be very specific to only select exactly which part of the page we want to apply a certain rule to.

(In CSS, you can use an ID as a selector if you write it like this:

#WHATEVERIDNAMEHERE

the "#" tells CSS that what comes immediately after it is an ID. A class can be specified like this:

.WHATEVERCLASSNAMEHERE

where the "." tells CSS that it's dealing with a class.)

If you're thinking ahead at this point, you might wonder, "Well if nothing has a unique ID, how are we going to select just one thing on the page?" Luckily, CSS allows us to use selectors in very specific ways to pick between elements that are classed similarly.

The two main selection specifiers we'll be using are "child of" (>) and "sibling of" (+). In this context, "Child of" means any element that is written as a part of another element- remember how the gax chat box is coded inside a column? It's therefore considered a "child" of that column, since it's entirely within it. If you instead wanted to look at the gax picture inside of the gax chat box, you would call the picture a "child" of the gax chat box, and a "grandchild" of the column- These relationships are based on how the page is coded, not how they appear on the screen. It's also actually a little more complicated then that, but these guides aren't meant to be a full tutorial on CSS, just a short-walkthrough to help you do some basic tweaking of your gax page. The box in the gax chat containing all the chatters icons is also a child of the gax chat box- since it is a child of the box, and the gax chat picture is a child of the box, those two elements are considered "siblings"- they have the same parent, the box containing the gax chat.

How do we use this in code? Just like this. For the sake of simplicity let's say the gax chat box is classed "ALPHA" in the code, that the gax chat picture is classed "BETA", and that the current chatter's icon picture box is classed "CAPPA". Since none of these elements have unique IDs, if we write a rule like

.CAPPA {display:none;}

we'll be telling every element with a class of "CAPPA" (remember we're specifying a class, so we need to use a period before it's name) that it's display property should be set to a value of "none". How do we get around this? If you inspect the code of the page, you'll notice that the gax chatter icons picture is the only "CAPPA" classed element that is a child of the gax chat box. This means to specify the gax chatter icons picture, we could use this rule:

.ALPHA > .CAPPA {display:none;}

That rule only targets elements of class CAPPA, who are children of class ALPHA. Since we already determined that the gax chatter icons picture is the only element to fit that description, it means that rule would target only the gax chatter icons picture, setting it's display property to "none" (which simply means it won't display).

And if we wanted to select the gax chat picture, we could write this rule:

.CAPPA + .BETA {display:none;}

That rule states that we want to select any element of class "BETA" that specifically follows any element of class "CAPPA". The elements in the rule must be written in order, and all the elements that are siblings of the element you're selecting must be written in order, up to the specific element you're targeting. This means that the preceding rule wouldn't target any elements of class "BETA" that weren't immediately preceded by an element of class "CAPPA".

I know this is a lot to get your head around- I'll give it a break for now. If you don't understand it fully, don't worry- I'm going to be very specific in the next CSS Guide, and we'll (finally!) be getting to specific examples of how to change the individual elements of your gax page.