Single post in Guide to CSS: Beginner to Expert
Forum Index > PokéFarm > Guides > Guide to CSS: Beginner to Expert >
Guide to CSS, Beginner to Expert
CSS is commonly used on this website to create all sorts of templates. Maybe you've wanted to make your own or get into learning CSS for other applications. This is a guide to some of the CSS used on PFQ. Keep the following things in mind:
- Whatever you create on PFQ must meet all legibility guidelines. I hold no responsibility if you choose to ignore them.
- Feel free to use this thread to ask for assistance getting something to work.
- Do not ask for critiques on templates here. Ask in the ABC Clan instead.
- Things exclusive to PFQ, such as pkmn panels, can all be found under PFQ codes.
- If something does not seem understandable and needs further elaboration, let me know! I have extensive knowledge of CSS, so I may leave out important additional information that could help others without realising it. Also, if I misspell a word or phrase, tell me! I would rather get it fixed than cause extra confusion.
- All PFQ Rules apply 100% of the time.
These are useful when the same value is used multiple times within a template. If I wanted to change the dark grey in this template, instead of finding every place the colour is used, I can simply change the value of the variable and every location the variable is used is updated to the new colour. The value does not necessarily need to be a colour, but can be any value used with the different properties.
Introduction to CSS and Styleclass
Basic CSS
[css=]Text[/css]
Within the brackets resides declarations.
[css=background:navy;color:lightgrey;]This is a block that has a navy blue background and text colour light grey.[/css]
This is a block that has a light grey background and text colour navy blue.
Every declaration ends with a semicolon (;
), this allows the browser to recognise when a declaration is over and move to the next declaration. For more flexibility over your code, I recommend not using the [css][/css] tags, but rather classes and style tags. This way you can repeat a class without having to copy the css for it each time you utilise it.
Basic Terms
An element is anything you can see or click, such as text, links, and images. Everything you can interact with on a webpage are elements. .classclass
{ backgroundproperty
: navyvalue
; width: 50pxunit
; color: lightgrey;declaration
}
The stuff inside the {curly brackets} is called the declaration block or simply a block.
Units
There are several types of units, but only the most common and useful ones are listed here: - Pixels (px): an absolute unit, equivalent to 1/96th of an inch, this is relative to the viewing device - Point (pt): an absolute unit, equivalent to 1/72nd of an inch, used for text sizes - em: a relative unit, relative to the font-size of an element (ex. 2em is two times the size of the current font) - rem: a relative unit, relative to the font size of the root element - Percent (%): a relative unit, often used for widths to make templates mobile friendly, calculates a percentage of the space available to use only that portion of itStyleclass
Styleclasses are essential for creating templates. They allow for an easier way to control styling within the template. To create a class use[styleclass=className][/styleclass]
. Using a [style]
tag, you can reference this class using .className
. In order to reference the class, you MUST include the period before the class name. Alternatively, you can shorten [styleclass]
to [sc]
.
[styleclass=outerClass][styleclass=innerClass]Some text can go in here[/styleclass][/styleclass]
[style].outerClass {width: 95%;background: #325032;border: 3px solid #520000; padding: 1%;
.innerClass{background: #6E456E;width: 90%; padding: 1%;border: 2px dashed darkcyan;color: gold; }}[/style]
This code results in the following:
Some text can go in here
Please note that you can use multiple
[style]
tags, but it is recommended to use only one as you can include as many classes and declarations as you like within the block.Classes are case sensitive so .class and .Class are considered two unique classes.
Please keep in mind your names that you choose. Choosing a name like fjfhfbfj would be useless if you were to go back to modify the code. Try to utilise names that are useful and easily understood that way you can figure out what the purpose of the class is.
Some Notes to Keep in Mind
Spacing
See how that code up there is all on a few lines? This can make it difficult when you have a lot of CSS to find exactly where a problem may arise. While everyone has a different technique to align the code, I recommend a style similar to below to aid in being able to find errors in your code and modify at a later date than when a template was first created.
[style]
.outerClass
{
width: 95%;
background: #325032;
border: 3px solid #520000;
padding: 1%;
.innerClass
{
background: #6E456E;
width: 90%;
padding: 1%;
border: 2px dashed darkcyan;
color: gold;
}
}
[/style]
Naming Conventions
This is personal preference. However, there are some methods that are common across programmers that I will list:
- Camel Case: First letter of every word is capitalized with no spaces or symbols between words, ex. UserAccount, FedEx, WordPerfect. A variation common in programming is to start with a lower case: iPad, eBay, fileName, userAccount.
- Pascal Case: this is a subset of Camel Case where the word starts with uppercase. Thus, UserAccount is in Pascal Case but not userAccount.
- Snake Case: Words within phrases or compound words are separated with an underscore, ex. first_name, error_message, account_balance.
- Kebab Case: similar to Snake Case, but using hyphens instead, ex. first-name, main-section.
- Screaming Case: This refers to names in uppercase, ex. TAXRATE, TAX_RATE.
In this guide, I will be using camel case for classes and kebab-case for variables.
Nested Classes
As seen in the above example, I set .innerClass
inside the brackets for .outerClass
. This is an example of nested classes. By nesting classes, this allows for anything that uses the same class outside of [styleclass=outerClass]
to remain unaffected by defining only within that class. This is especially helpful when a template gets quoted, the template's styles won't affect code outside of its template, which can lead to legibility issues. Always use a class to basically "wrap" the entire template and make sure to put all styling within the brackets for the "wrapper" class you create.
Multiple Classes
Sometimes you need one section to have styles from two different classes. Rather than using a second [styleclass]
, you can name a second (or more) class by putting a space between the separate classes like [styleclass=className alsoClassName]
. This is commonly used for tabs on PFQ, forcing the tabs to always be horizontal ([styleclass=tabbed_interface horizontal]
).
In the PFQ Codes section, I will go into more detail tabs and how to use them.
Variables
You can use variables within the[style]
tags. They're very useful if you use the same value multiple times within a template. To initialise the variable, use @ and give the variable a name.
@variable: #0236FE;
@variable = #0236FE;
@variable
is the variable name, #0236FE
is the value. You can utilise either :
or =
to separate the variable name from the value.
Let's modify the example used above to use variables.
[style]
@accent1 = #325032;
@accent2 = #520000;
.outerClass
{
width: 95%;
background: @accent1;
border: 3px solid @accent2;
padding: 1%;
.innerClass
{
background: #6E456E;
width: 90%;
padding: 1%;
border: 2px dashed @accent2;
color: gold;
}
}
[/style]
Some text can go in here
Similar to classes, name your variables something useful! If not, you may not remember the purpose of the variable if you modify the template at a later date.
Buying:
BSDs 20 ZC
Prisms 70 ZC
BSDs 20 ZC
Prisms 70 ZC
