CSS Etiquette

Introduction


CSS isn’t terrible to use, or even to learn, so try not to be intimidated by it. The purpose of this page is to give you a brief overview of CSS code and how to use it. This is meant only as an overview so that you understand the basic concepts, more information can be found here (it’s what I used to learn, in fact): http://www.w3schools.com/css/

So, what is CSS?


CSS stands for Cascading Style Sheet, it’s a language that describes how html code should be displayed.

How does it work?


Without going too in depth, the easiest way to explain it goes like so: Elements of your campaign site are split into many things called elements, Ids, and classes; they are used by your CSS code (via a selector) to identify them. This allows the code (in a code block called a Declaration) to change specific things on your site using properties and values. Ascendant membership is required to do CSS that is all stored in one main area (referred to as External CSS), that’s the kind I’ll be covering here.

Here is an easy to digest snippet of CSS:
.campaign-public-layout #content { max-width: 1400px !important; }
.campaign-public-layout #content is the selectors,
{ max-width: 1400px !important; } is the declaration,
max-width: is the property that you are changing,
1400px !important; is the value that you are setting the property to.

Commenting your code


Comment your code. Always comment your code. I can’t stress this enough. Comments look like this: /* Hello I am a comment! */. Comments make your code readable and easy to understand, this is helpful to you when you want to change something three months down the line and it’s helpful to anyone else who is trying to read your CSS for pointers. I create a comment that acts as a header, then nest further comments to explain what is being altered and how. Here’s an example:

/* TAGS */
/* Color Coded Tagging */
/* use these lines to change the font color and background color */
/* data-tag= is the tag (case sensitive), background-color: is the "bubble" color around the tag text, color: is the color of the tag text */
.campaign-public-layout #content a[data-tag="player"] {background-color: #365BCE;
color: #ffffff;
-webkit-border-radius:1000px;
border-radius:1000px;
padding:0.1875em 0.625em 0.25em;
font-size:0.875em;}

That last bit above wouldn’t make as much sense without my comments. My actual CSS uses spaces to indent the comments but they didn’t show up here. Anyways, comment your code.

The !important Value


This value is one that you place in your code to make your change override other CSS changes (such as those that Obsidian Portal applies automatically in some circumstances). Don’t overuse it, that’s generally considered bad coding because it can cause unintended interactions with other CSS code. Sometimes using it is required.

Elements?


Elements are (poorly defined as) the parts of your page that code with simple html, such as <p> h1 h2 etc.
Elements look like this: p (that targets the html code for a paragraph break: <p> for example)
Element Selectors are really simple, they look like this:
There’s nothing there, elements don’t actually have a specific selector character. Therefore to select an element, type the “name” of the element that you are targeting, like this: p or h4
I generally don’t specifically use this selector unless I’m coding inline.

IDs


IDs are another way of identifying certain parts of your html, think of them like specific instances of Elements.
Elements look like this: content
You can create IDs yourself as part of your html code, in a manner sort of like creating a class. Like so: Place this bit id="insertyouridnamehere" inside your target code. See here for more info: http://www.w3schools.com/tags/att_global_id.asp
To select an ID use an octothorpe (that’s the # symbol) in front of the ID name, as shown here: #content or #empire or #shinra etc.

Classes?


Classes are the bread and butter of the CSS that I’ll be covering here, and there seems to be a class for darn near everything. Identifying the class you need is sometimes the most difficult part of using CSS.

Classes look like this: campaign-public-layout
Class Selectors are deceptively simple, they look like this: .
To select a class, place the class selector (a period) before the name of the class you are targeting, like this: .campaign-public-layout or .item-index.campaign-public-layout .character-list-item
It works pretty easily, the more classes you select (as in the second example above) the more specifically the CSS is applied.
Creating your own classes is fairly simple as well, I did it using this code on my Rituals page <div class="ritual"> . The class=“ritual” part is the important bit, like IDs it needs to be contained within some other code (hence the div).

A note about selectors!


To apply your CSS changes to multiple selectors, separate them with a comma like so: .ritual, #shinra, p. That group of selectors would allow one chunk of CSS code to apply to the .ritual class, the #shinra ID, and the p element. That specific combination is quite unlikely but that’s not the point of the example. The point is you can apply changes to lots of things by seperating their selectors with commas.

CSS Etiquette

Testbed Abersade Abersade