Backgrounds

Sizing

In order to create a template, you need to set up the size of it. Using the and properties, you can set up the size of your template. You can refrain from setting the width so that it is applied implicitly (automatically handled by the browser), however, you may have less control over the width as a result. The minimum width is 300px per legibility guidelines. If you wish to set a starting height or width that can adjust as necessary, utilise , , , or .

Margins/Padding

When using margins and padding, this box model is useful to keep in mind when it comes to sizing. Margins adjust from the outside of the content box while padding adjust from the inside of the content box. You can also set each side differently: (top margin is 10px, right margin is 5px, bottom margin is 15px, left margin is 20px); (top margin is 10px, left and right margins are 5px, bottom margin is 15px); (top and bottom margins are 10px, right and left margins are 5px); (all four margins are 10px). The values work the same for the property.

Box Sizing

Sometimes you want a box a certain size, but you don't want to do the math to adjust the size of the content box based on other properties used. The width and height properties (and min/max properties) includes content, padding and border with the value of . In order to have the height and width exactly the size you want with the padding and margin included, you can use .

Background Colour

As seen above, I set the background to black using the property. You can use some colour names (all of which you can find listed here). You can also use rgb, rgba, hsl, hsla, or hexadecimal values. You can find more information about the different types of colour values here.

Background Gradients

Background gradients can be fickle. You can find all of the different types of gradients here. I recommend using a gradient generator to get it working exactly as you want, such as this one here.

Background Clip/Origin

Both the and properties do the same thing, except applies to colour backgrounds, while applies to image backgrounds. Declarations: - This is default. This makes the background start at the top left corner of the border. - The background starts at the top left corner of the padding. - This makes the background start at the top left corner of the content. (Basically, the padding will be around the background too.)

Background Images

To set a background, you use When you use any images, background or otherwise, you must include a credit to the creator of the image, even if you made it yourself (crediting your own work is always a good practice!).

Background Size

Maybe your image is too large or it doesn't fit how you want it. Using you can adjust its size. You can use the pixels unit or the percentages as the unit.

Background Repeat

If you need an image to repeat rather than cut off, you can use . Or use the value to prevent it from repeating. If you only want it to repeat one way, you can use or .

Background Position

The default value for this is top left. The values are straightforward, so I'll simply list them off. Values: , , , , , , , , and .

Background Attachment

These affect how the background appears when scrolling through the page. The values are (the background image will scroll with the page, this is default), (the background image will not scroll with the page), and (the background image will scroll with the element's contents). These usually don't need to be used.

Background

You can shorten some of these into one line like this: . You can leave out anything you don't intend to modify. If you use both the position and size in this line, you must include that slash to differentiate them. Usually this is best used to set the background image, colour (if using instead of image or as a fallback if the image doesn't load), and the position.

Borders

Basic Borders

To set up a border around your content box, you use . You can set up each border differently using , , , and . You can also set each part separately like this: , , and . The different style values you can use are: , , , , , , , , or (for no border).

Border Radius

Maybe you don't want the corners to meet perpendicularly. To round the corners, use . You can use pixels or percentage for this. The higher the number, the more rounded the corners are. You may want to add some extra padding so that text doesn't overlap on the border.

Border Outline

To use, you do . Outline is a border that outlines the actual border.

Text

Text Colour

Whenever you set a baackground, you must set a text colour as well using . If you set a text colour, set the background as well! Remember to keep the contrast at 4.5:1 bare minimum.

Font Size

You can modify the size of your text. For the most part, headers being the main exception, you must keep your font between 10pt and 15pt. Some leniency is given to headers to be slightly larger, but text cannot be wrapped entirely in header tags. To do this, use . You can ONLY use the point unit for this property due to the legibility guidelines.

Alignment

Most of the time, text is aligned to the left side, but this can be adjusted using , with the possible values of , , , or .

Fonts

There are hundreds of thousands of different fonts, but not all are considered websafe fonts. To modify the font, use . All websafe fonts are listed here.

Font Styles

You can use to bold text, and similar codes as well to underline or strikethrough text, or you can use CSS to achieve the same effect. Using you can italicize words. To bold text, use ; to underline, overline, or strikethrough text, use (change the value to overline or line-through for a line over the text or strikethrough respectfully).

Text Transform

For text in all lowercase or uppercase, you don't necessarily have to always type in that way. Using , you can modify that. You can also use the value to make every letter uppercase but in a smaller font as if it was still lowercase.

Text Shadows

You can give your text a shadow. Be careful with this as if it makes your text illegible, it can break legibility guidelines and you could be asked to change or remove it. To use, , with h-shadow being how far to move the shadow from the origin horizontally and the v-shadow the same vertically. Multiple shadows can be separated with a comma.

Text Outlines

There are two ways to create an outline on your text. One is using the text shadow property: You can also use the property.

Links

You must set a link colour when setting a background as well, however, simply setting the text colour will not change the links' colour. You must set it as following:

Headers

To modify headers, you use . , and in place of a class. You can adjust their size this way, colour, and every other property you need.

Overflow

Sometimes you have a set width and need to fix it. Usually, you can just adjust the height, but you can also use so that it doesn't fall out of the content box.

Spacing

You can add extra spaces between each letter using or between words using .

Line Height

You can also add or remove space between lines as well using .

Text Indent

In essays, people indent each paragraph. You can use to indent the first line of each paragraph.

Float

Float allows you to have an image or class on the left or right of another image or class. To use, you do or you can change the value to if you want the image or class to float to the right instead. Any text from the other class will flow around the item. To fix that, should that be wanted, you can use clear.

Clear

To use, you can use to make sure both left and right sides are "cleared" and the classes after are pushed underneath. Changing the value to or to clear left or right side floated elements respectfully.

Text Flow Around Floated Object

Sometimes you have an image or block that you want text to flow around, so here's how to do it. While I used text in the block, you can use an image instead for a similar result.

Lists

Lists are very useful. There are two types of lists: ordered lists and unordered lists. you can reference them using and respectfully. The list items itself are referenced using .

List Style

You can change the default bullet point using . You can find all of the values for list-style-type here and list-style-position here. To use an image, you just have to use . Make sure to credit the image you use, even if you created it!

Tables

To reference tables, use to reference the table as a whole, to reference a table row, to reference a table header, and to reference a table cell.

Centering

To center a table, use to align it. This doesn't affect the vertical alignment, but centers it horizontally.

Empty Cells

You can hide empty cells using rather than having blank cells showing on your table.

Border Collapse

This is not often used, but you can find details about it here should you need to use it to separate cells. You can use to adjust the spacing between cells.

Vertical Alignment

To vertically align content within a table, use which allows you to center the content vertically inside each cell. To center it horizontally, you can still use to center it that way.

Cursors

You can change the cursor, such as I did for the tabs in this template to make it similar to if you were clicking a link. Just use and adjust the value to one of these: , , , , , , , , , , , , , , , , , , , and . You can hover over any of these to see what they look like.

Pointer Events

There are two types of pointer events. By default, you can select text or right click an image to open in a new tab. Alternatively, you can prevent the latter by using which would not allow items to be opened in a new tab. To refuse allowing text to be copied, you can utilise . You can also have it set to the value so that on click, all of the text is selected, making it easier to copy (such as for forms).

Navigation

- Introduction to CSS - Beginner to Intermediate Codes (you are here) - Intermediate to Expert Codes - PFQ Codes - Resources - FAQ

Horizontal Rule

To modify horizontal rules made using , you select it using from which you can recolour the line using both the and properties (you need to include both or on mobile there will be a gap in the middle!). You can also set it to an image! Make sure to set the height of the horizontal rule to the same size of the image or it will cut off. There are many effects you can do with these. I personally love the faded effect because it's simple looking and not terribly distracting. All of these codes are here for you to use if you wish. Change the colours to match your template! Fade effect: Double curved effect: Curved effect:

Columns

Everything about columns and using them can be found in my journal at this post. Adding it directly to this post messes with the tabs due to how it is styled, but feel free to ask any and all questions you have here or message me directly. There's another way to use columns but is a lot less flexible and cannot be used as easily as a result, but you can read more about the properties here.

@Media

To make things mobile friendly, you can use queries. For more details, you can read about it here, but I recommend using the built in classes through PFQ rather than media queries, which are outlined in the PFQ Codes section of the guide.

Positioning

Sometimes you may need to move something or move it in some way. There are a few different values for it, but two of them are not allowed on PFQ and will not be discussed as a result. To use, is the property and the default value. Static just means that the elements are rendered in order of flow and cannot be modified. Changing the value to renders the element or class relative to its first positioned non-static parent/ancestor element (as it may not necessarily be the direct parent). Using the value allows you to position the element or class relative to its original position using the following properties: , , , and . For example, adds 25px to the left position, effectively moving it right 25px. You can use percentages instead. Be careful using this property as it can affect child elements.

Z-Index

Z-index is used for layering. Sometimes you to hide something under another element and on hover show it. You can use the z-index property and change it when something else is hovered over it to show it, or to layer something above or below another element. Use to change the ordering. There are no units used and the number can be negative.

Display

I'm going to list each value used for the property and then the use of each with the exception of two that I will be going more in depth with at the end. There's , displays an element as an inline element and any height and width properties will have no effect (links are an example of an inline element); , displays an element as a block element, it starts on a new line, and takes up the whole width (headers are an example of a block element); , displays an element as an inline-level block container, the element itself is formatted as an inline element, but you can apply height and width values; and which hides the content completely and is removed from the flow.

Flex

Flex is a really handy tool that allows things to be curated for mobile and PC. It's amazing for anything that could use a table or has content formatting similar to a table. The first thing you want to do is create a container to contain all of the flex items, which are classes within the container class: I've also already added two styleclasses to represent two items within the flex box. Some properties you must apply to the parent container while others you can apply to the individual items. I'll start by listing everything that goes in the parent container. First, you must set the display: . Next establish which direction you want the items to flow in using . The value flows in a row in the same order it is listed, flips the order but still flows in a row, flows in a column in the same order it is listed, flips the order but flows in a column. Now you can set how it wraps. By default, it will try to fit everything on the same line, but you can change that using which is the default I just mentioned, value will allow the items to wrap to the next line or column if there isn't enough space available, and will wrap into multiple lines or columns from bottom to top instead of top to bottom. Generally, is the best value for this. You can combine these two properties into for example, or whichever two values you need. Now you can choose how to align the items using which centers the items, is the default value and packs them at the top left corner and flows in the direction as you specified without modifying, evenly spaces the items on each line with the first item on the starting line and the last item on the final line, gives each item the same space on each side (which means double the space between middle items due to both having that unit of space on their left and right), and which spaces everything equally. Next is which centers everything vertically even if the items are not the same height. The only only other value I would consider using is to make each item the same height. You can use and or simply to determine the exact spacing between items. RG is short for row-gap and CG is short for column-gap, though if the values are the same, you only need to list it once. Now you can modify the individual items. Using you can set the order that they display in the flex box instead of reorganising the code to be in that order. Next is for each item. If you need one to be larger than the others, you can raise the number to be bigger by that amount (a value of 2 would be as close to twice as large as it can make it). Similarly, allows an item to be slightly smaller. The property is what allows the items to be "flexible" and move to a new line as necessary. A good guide to using flexbox and some of the other values not mentioned can be located here.

Grid

Grids are good for things that are two dimensional, while flex is better for simple layouts. Grids are great alternatives to using a table as it will automatically place as many items in a row as can fit on the viewer's display port (monitor/screen). Similar to flex box, you set up a container class and then the items within it. There's a lot of elements to setting these up and using so I will be offering free to use grid tables in the future, but a detailed guide to setting up your own can be loacted here.

Visibility

Visibility is used to show or hide an element or class. Note that even if you use , the space that the element or class takes up is still present. To completely hide the element and remove from the space, use instead.

Fonts

You can use non-websafe fonts as well, however it can be a little more complicated to use. While there are other ways to have custom fonts, I recommend using Google Fonts to find them.

Transform

You can modify an element using transform. Note that whatever effect you use still needs to meet all legibility guidelines! The property has several values it can take. Some examples are , , and . You can read about each type of value here as there is quite a list, but these three are the most common of them and do exactly as they sound.

Animations

This is one section that I want to get someone else to assist with explaining as it is rather complex and a good portion of it does not work on PFQ.

Transitions

The first way is to use the property, which allows for something to ease into another version. This gets mixed with the selector to transition, for example, text from white to pink. You can also do something more complex like this about me that I made, where the image turns over like a card. To use place in the block that does NOT have the hover selector used. It functions like this: where property is the property you would like to transition (color for the example I gave above) or use the keyword all to affect every property, duration is how long you want the transition to last (I recommend around .5s for most transitions, though it may be slower or faster), timing-funtion can be a number of values (most commonly used are linear, ease-in, ease-out, and ease-in-out, the full list can be found here), delay (which is optional) can delay the start of the transition by however long you set it.

Animation

The other way is using the property. PFQ has some animations that it uses. The name of each animations is: pulse, fade, pling, spin, nice_mainstar, nice_star, nice_popin, and nice_popout. These can be used within a post, however, make sure not to use it in a way that could be too quick and flash rapidly. To create your own animations, you would create a declaration. These cannot be used within a post, but only in your site skin. To set up the animation you wish to create, use one of the following: The first version is useful for when you have just the start and stop properties you want and only want those two values. The second is used for multiple stops so it does a few things (such as change text from a purple to pink to green) before it hits the end. The numbers for it can be changed, but the 0% and 100% need to be present. It can have more values in between (such as 82% if you wanted) with the same set up within it. After creating the animation, you need to apply it to something. Within the declaration block that you want it to apply to, use . You can read more about each property here. Here's an example for skins that spins eggs when hovered over them (which is free to use):

Navigation

- Introduction to CSS - Beginner to Intermediate Codes - Intermediate to Expert Codes (you are here) - PFQ Codes - Resources - FAQ

Tooltips

Tooltips are useful for certain things in posts. To modify them, use the following code to modify them: The affects the content of the tip while affects the content that is to be hovered over for the tip. You can add more properties to make them seem fancier or otherwise more decorative.

Progress Bars

Progress bars are used to track things, such as a collection of summons or currency. Modify them using the following code:

PKMN Panels

The first long section changes the background colour for the liked berry, the second long section does the same for the disliked berry, from there, the background of the pkmn panel, progress bar for the exp to the next level, link of the pokemon, and tooltip content when hovering over the different berries.

Tabs

I'm not going to go into detail about how to utilise vertical tabs due to how complicated they are and each template will require different codes to get it to work, but the default tabs are set to vertical that turn to horizontal tabs when on mobile. To create the basis of tabs within the template, use the following BBC: You must use the brackets at the end of each tab's styleclass and the beginning of the next one if you do not wish for the tabs to be forced to a new line after switching tabs and moving the tab content boxes down. To modify the styles of the tabs, use the following CSS: The is used to modify the tabs as an entirety, modifies the start of the tabs with the unordered list used for it, while the modifies each individual tab, the affects when each tab is hovered over (in this case it only changes the cursor, but you can add other properties to change on hover as well), the affects the tab contents. Any property can be added or modified to any of it to design the tabs as you would like, such as a box-shadow.

.mq#

There are built in classes to modify based on screen width. Below are the cutoffs for each class:

Class	Max-Width
.mq1	320px
.mq15	480px
.mq2	640px
.mq25	800px
.mq3	960px
.mq35	1240px
.mq4	1280px
.mq45	1440px
.mq5	1600px

To utilise the classes use , replacing ELEMENT with whatever element or class you want to modify for the select screen's widths. For most mobile devices, is used. By default, all codes affect without issue and it is unnecessary to include.

@import

Some people really want to protect their codes, or shorten it in some forme, especially with the character limit in place for signatures. This is possible by using a custom skin, without having to actually use it as your skin. Pull your entire code, including variables (you can keep the variables in the custom CSS, but you cannot leave the variables in the template with the rest of the code in the custom CSS area. Create a new skin, paste the code in the Extra CSS, then go back to your template. Use the following code to import that code into your template: Replace the striked out part with your own shortcode provided on your party page, separating each letter/number with a slash.

Navigation

- Introduction to CSS - Beginner to Intermediate Codes - Intermediate to Expert Codes - PFQ Codes (you are here) - Resources - FAQ