View Single Post
  #1    
Old December 30th, 2011 (09:36 PM). Edited July 26th, 2012 by twistedpuppy.
twistedpuppy's Avatar
twistedpuppy twistedpuppy is offline
Siriusly Twisted
CS
 
Join Date: Nov 2008
Nature: Timid
Posts: 1,371
CSS Guide & Helpful Tips



Introduction
If you've looked around a couple of threads in Trade Corner and PokéCommunity, you'll notice that some have been beautifully designed. This design is known as CSS, or Cascading Style Sheets. CSS is a style sheet language commonly used for styling web pages. Many PokéCommunity members use CSS to give a more personalized & organized look to their posts. In this guide, we will help you stylize your own posts with these helpful hints.




How It's Done
Below are listed codes for you to utilize in editing the appearance of your posts.
Putting it all together
You may find yourself wondering how to start your CSS coding. Well to put it all together you first need to start with a BB code. A BB code is a set of tags based on the HTML language. You may already be familiar with this, as it is commonly used around the forums to add color, size, font, or position your posts. To begin your CSS you'll need to start off with one of these codes.

Code:
[cd="(coding used here)"][/cd]
Alias of [css-div]

Code:
[css-div="(coding used here)"][/css-div]
Allows CSS usage in a div tag

Code:
[div="(coding used here)"][/div]
Creates a HTML block that accepts CSS.


Sizing Codes
Code:
height: (100px, 500px, 1000px);
Sets the size of the height.

Code:
width: (100px, 500px, 1000px);
Sets the size of the width.


Positioning Codes
Code:
position: (absolute, relative, static, fixed);
Sets the positioning for the CSS;
Static (always positioned according to the normal flow of the page)
Fixed (positioned relative to the browser window)
Relative (positioned relative to its normal position)
Absolute (positioned relative to the first parent element that has a position other than static).


Code:
padding: (1px, 5px, 10px);
Sets the spacing between the border and the content inside.

Code:
margin-top: (1px, 5px, 10px);
margin-bottom: (1px, 5px, 10px);
margin-left: (1px, 5px, 10px);
margin-right: (1px, 5px, 10px);
Sets the position of the border, padding, and content according to the px number.


Background Codes
Code:
background-color: (hex, rgb, color name);
Changes the color of the background.

Code:
background-image: url('http://www.imagesite.com/picture.png');
Displays a selected image as your background.

Code:
background-position: (top, bottom, center, right, left);
Sets the position of the background image.

Code:
background-repeat: (repeat-x, repeat-y, no-repeat);
Sets a background to repeat from left to right (repeat-x), repeat from top to bottom (repeat-y), or to not repeat at all (no-repeat).

Code:
overflow: (visible, auto, hidden);
Creates a visible, auto, or hidden scroll bar.


BorderCodes
Code:
border-style: (dotted, dashed, solid, double, groove, ridge, inset, outset);
Creates a border around the CSS;
dotted: Defines a dotted border
dashed: Defines a dashed border
solid: Defines a solid border
double: Defines two borders. The width of the two borders are the same as the border-width value
groove: Defines a 3D grooved border. The effect depends on the border-color value
ridge: Defines a 3D ridged border. The effect depends on the border-color value
inset: Defines a 3D inset border. The effect depends on the border-color value
outset: Defines a 3D outset border. The effect depends on the border-color value

Code:
border-width: (1px, 5px, 10px);
Sets the width of the border.

Code:
border-color: (hex, rgb, color name);
Changes the color of the border.


Font Codes
Code:
color: (hex, rgb, color name);
Changes the color of the font.

Code:
font-family: (arial, century gothic, times new roman);
Displays the font style of your choice.

Code:
font-size: (1px, 5px, 10px);
Changes the size of the font.

Code:
font-weight: (normal, bold);
Changes the font to normal or bold.

Code:
font-style: (normal, italic, oblique);
Changes the font's style to normal, italic, or oblique.

Code:
font-variant: (normal, small-caps, inherit);
Specifies whether or not a text should be displayed in small-caps (lower case letters capitalized).

Code:
letter-spacing: (1px, 5px, 10px);
Sets the size of spacing between letters.

Code:
word-spacing: (1px, 5px, 10px);
Sets the size of spacing between words.

Code:
line-height: (10px, 20px, 30px);
Sets the size of spacing between lines.

Code:
text-align: (center, right, left, justify);
Aligns the text according to position; center, right, left, justify (stretches the lines so that each line has equal width)



Example
In the example I'll be providing, I'll use the [cd=""][/cd] code to begin my CSS. So lets start off with the BB code, a background color, and a set height and width.

Code:
[cd="background-color: #C0C0C0; height: 200px; width: 200px;"]As you can see, I went with a silver background and a height and width of a 200px. Next we'll choose a font family, add color to the font, and a size for the font.[/cd]
As you can see, I went with a silver background and a height and width of a 200px. Next we'll choose a font family, add color to the font, and a size for the font.

Code:
[cd="background-color: #C0C0C0; height: 200px; width: 200px; color: black; font-family: arial; font-size: 10px;"]We choose black as the color of the font. Then Arial as the type of font, and finally a size of 10px for the font. Now for the final touch, we'll add padding.[/cd]
We choose black as the color of the font. Then Arial as the type of font, and finally a size of 10px for the font. Now for the final touch, we'll add padding.

Code:
[cd="background-color: #C0C0C0; height: 200px; width: 200px; color: black; font-family: arial; font-size: 10px; padding: 10px;"]We've added the padding and this is the final result of your CSS.
[IMG]http://floatzel.net/pokemon/black-white/sprites/images/228.png[/IMG]
As you can see all it takes is a few easy steps to complete your CSS.[/cd]
We've added the padding and this is the final result of your CSS.

As you can see all it takes is a few easy steps to complete your CSS.




Links

Below are some helpful links listed to further expand your newly found CSS skills.

CSS Tutorial at w3schools

The PokéCommunity Forums - BB Code List

PokéCommunity's CSS Help & Discussion Thread

December Hex Hub - Various color hex codes