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