Single post in Guide to CSS: Beginner to Expert
Forum Index > PokéFarm > Guides > Guide to CSS: Beginner to Expert >
Beginner to Intermediate Codes
- Comments
- Backgrounds
- Borders
- Text
- Float
- Lists
- Tables
- Cursors
- Pointer Effects
- Navigation
Comments
I'm going to kick this off simple. Comments. Something might not be working properly yet and perhaps you wanna add in a couple of lines to remove later, or remove something to test something else to work out what is causing the issue. You can also add comments to explain something in case you reference the code later and to make it easier to understand after some time has passed and you haven't looked at it later. To use them, you can do// COMMENT HERE
is a single line comment. For multiline comments, you can use /* COMMENT HERE */
instead. These are only used within style tags.
To add comments within the template itself using brackets:
[
NEW LINE NECESSARY, next bracket doesn't necessarily need to be on a new line.
]
However, this will not work for BBCodes that you need commented out. Instead, you can use the following:
[*
[b]Text that should be bold, but would be commented out instead. Make sure the next bracket ends on a new line.[/b]
*]
Backgrounds
Sizing
In order to create a template, you need to set up the size of it. Using thewidth
and height
properties, you can set up the size of your template.
When setting a width, use percentages rather than pixels except for about me templates, which have a set width of 310px. This allows post and signature templates to be mobile friendly.
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.
[sc=whExample]Some text here to show an example of width and height.[/sc][style]
.whExample
{
width: 75%;
height: 55px;
background: black;
}
[/style]
Some text here to show an example of width and height.
If you wish to set a starting height or width that can adjust as necessary, utilise min-width
, max-width
, min-height
, or max-height
.
[sc=whExample]Some text here to show an example of min-width and min-height. This grows as content is added.[/sc][style]
.minwhExample
{
min-width: 10px;
min-height: 25px;
background: black;
}
[/style]
Some text here to show an example of min-width and min-height. This grows as content is added.
[sc=whExample]Some text here to show an example of max-width and max-height. This grows until the max limit is reached where it would overflow from the box.[/sc][style]
.maxwhExample
{
max-width: 250px;
max-height: 75px;
background: black;
}
[/style]
Some text here to show an example of max-width and max-height. This grows until the max limit is reached where it would overflow from the box.
Margins/Padding
Box Model Diagram pulled from here
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.
[sc=padmarExample]This gives 15px spacing around the outside of the box on all four sides and 5px padding inside of the box on all four sides.[/sc][style]
.padmarExample
{
max-width: 250px;
max-height: 75px;
background: black;
padding: 5px;
margin: 15px;
}
[/style]
This gives 15px spacing around the outside of the box on all four sides and 5px padding inside of the box on all four sides.
You can also set each side differently: margin: 10px 5px 15px 20px;
(top margin is 10px, right margin is 5px, bottom margin is 15px, left margin is 20px); margin: 10px 5px 15px;
(top margin is 10px, left and right margins are 5px, bottom margin is 15px); margin: 10px 5px;
(top and bottom margins are 10px, right and left margins are 5px); margin: 10px;
(all four margins are 10px). The values work the same for the padding
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 ofborder-box
. In order to have the height and width exactly the size you want with the padding and margin included, you can use box-sizing: border-box;
.
[sc=boxSExample]Box-Sizing Example here! See how it's a rectangular shape and not the expected square shape?[/sc]
[style]
.boxSExample
{
width: 250px;
height: 250px;
padding-top: 10px;
padding-left: 3px;
}
[/style]
Box-Sizing Example here! See how it's a rectangular shape and not the expected square shape?
[sc=boxSExample]Box-Sizing Example here! Expected square shape instead![/sc]
[style]
.boxSExample
{
width: 250px;
height: 250px;
padding-top: 10px;
padding-left: 3px;
box-sizing: border-box;
}
[/style]
Box-Sizing Example here! Expected square shape instead!
Background Colour
As seen above, I set the background to black using thebackground
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.
[sc=rgbaExample]This sets the background to black with an opacity of 65%.[/sc]
[style]
.rgbaExample
{
width: 75%;
height: 55px;
background: rgba(0,0,0,65%);
}
[/style]
This sets the background to black with an opacity of 65%.
You can find more information about the different types of colour values here.
Make sure your background complies with the legibility guidelines, whether you use an image or colour for a background. If you define a background, you MUST define the text color as well. Colour contrast must be a minimum of 4.5:1 though anything within 4.5:1 to 7:1 is up to moderator discretion.
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 thebackground-clip
and background-origin
properties do the same thing, except background-clip
applies to colour backgrounds, while background-origin
applies to image backgrounds.
Declarations:
- background-clip: border-box;
This is default. This makes the background start at the top left corner of the border.
text
- background-clip: padding-box;
The background starts at the top left corner of the padding.
text
- background-clip: content-box;
This makes the background start at the top left corner of the content. (Basically, the padding will be around the background too.)
text
Background Images
To set a background, you usebackground: url('IMGURLHERE');
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. Usingbackground-size: VALUEpx VALUEpx;
you can adjust its size. You can use the pixels unit or the percentages as the unit.
To make a background mobile friendly, you can use
background-size: 100% auto;
.Background Repeat
If you need an image to repeat rather than cut off, you can usebackground-repeat: repeat;
. Or use the value no-repeat
to prevent it from repeating. If you only want it to repeat one way, you can use repeat-x
or repeat-y
.
Background Position
The default value for this is top left. The values are straightforward, so I'll simply list them off. Values:left top
, left center
, left bottom
, right top
, right center
, right bottom
, center top
, center center
, and center bottom
.
Background Attachment
These affect how the background appears when scrolling through the page. The values arescroll
(the background image will scroll with the page, this is default), fixed
(the background image will not scroll with the page), and local
(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:background: bg-color bg-image bg-position/bg-size bg-repeat bg-origin bg-clip bg-attachment;
. 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 useborder: #px solid COLOUR;
.
[sc=borderEx]Border Example[/sc]
[style]
.borderEx
{
border: 2px solid #676767;
}
[/style]
Border Example
You can set up each border differently using border-left
, border-top
, border-bottom
, and border-right
. You can also set each part separately like this: border-width: #px;
, border-style: solid;
, and border-color: COLOUR
. The different style values you can use are: solid
, dotted
, dashed
, inset
, double
, grooved
, outset
, ridge
, or none
(for no border).
Gradient Border
This bit of code is rather advanced. Please do not attempt it if you are just starting to learn CSS.
[style]
.gradBorder
{
width: 60%;
height: auto;
padding: 6px 14px 2px 16px;
border-top: 5px solid #d2ff52;
border-bottom: 5px solid #91e842;
background-position: 0 0, 100% 0;
background-repeat: no-repeat;
background-size: 5px 100%;
background-color: white;
color: #41680D;
background-image: linear-gradient(to bottom, #d2ff52 0%, #91e842 100%), linear-gradient(to bottom, #d2ff52 0%, #91e842 100%);
}
[/style]
See how the border has a gradient?
Border Radius
Maybe you don't want the corners to meet perpendicularly. To round the corners, useborder-radius: #px;
. 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.
[sc=borderRadius]Rounded corners[/sc]
[style]
.borderRadius
{
border: 2px solid #676767;
border-radius: 10px;
}
Rounded corners
Border Outline
To use, you dooutline: black dashed 2px;
. Outline is a border that outlines the actual border.
[sc=outlineEx]In this example, the border is solid brown and the outline is dashed pink.[/sc]
[style]
.outlineEx
{
border: 3px solid #7d4627;
background: #c9d8c5;
outline: #edd9c0 dashed 2px;
color: #527d98;
padding: 5px;
}
[/style]
In this example, the border is solid brown and the outline is dashed pink.
Outlines do not follow a border radius, so keep that in mind if you use this and a border radius.
Text
Text Colour
Whenever you set a baackground, you must set a text colour as well usingcolor: COLOUR;
. 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, usefont-size: #pt;
. 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 usingtext-align: VALUE;
, with the possible values of left
, right
, center
, or justify
.
Fonts
There are hundreds of thousands of different fonts, but not all are considered websafe fonts. To modify the font, usefont-family: VALUE;
. All websafe fonts are listed here.
Font Styles
You can use[b][/b]
to bold text, and similar codes as well to underline or strikethrough text, or you can use CSS to achieve the same effect. Using font-style: italic;
you can italicize words. To bold text, use font-weight: bold;
; to underline, overline, or strikethrough text, use text-decoration: underline;
(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. Usingtext-transform: uppercase;
, you can modify that. You can also use the value small-caps
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,text-shadow: h-shadow v-shadow blur-radius color;
, 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:[style]
.txtShadowEx
{
color: black;
font-size: 25pt;
text-shadow:
1px 1px 0 white,
-1px -1px 0 white,
1px -1px 0 white,
-1px 1px 0 white,
1px 1px 0 white;
}
[/style]
Text outlined!
You can also use the text-stroke
property.
[style]
.txtStrokeEx
{
-webkit-text-stroke: 1px white;
color: black;
font-size: 25pt;
}
[/style]
Outlined!
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:a{color:VALUE;}
Headers
To modify headers, you useh1
. h2
, and h3
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 useoverflow: hidden;
so that it doesn't fall out of the content box.
There's also the
overflow: auto;
which allows the text to scroll. However, this is only allowed when text is not meant to be read, such as for displaying long codes. Use of this code is otherwise forbidden in any templates, including about mes.Spacing
You can add extra spaces between each letter usingletter-spacing: #px;
or between words using word-spacing: #px;
.
Line Height
You can also add or remove space between lines as well usingline-height: #px;
.
If you want to center a singular line of text in a content box, you can set the height of the content box to the same as the line-height.
Text Indent
In essays, people indent each paragraph. You can usetext-indent: #px;
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 dofloat: left;
or you can change the value to right
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 useclear: both;
to make sure both left and right sides are "cleared" and the classes after are pushed underneath. Changing the value to left
or right
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.[sc=container][sc=floatedBlock]My floated block.[/sc]This is the text that will flow around the block I have created. Some length will be necessary to get it long enough to the bottom of the block. But this will allow the text to flow around it as if it was still present in the flow.[/sc]
[style]
.container
{
width: 100%; // sets width of container
text-align: justify; // justifies the text so you can see where the margins give space for the text
.floatedBlock
{
float: right; // floats box right, can be set to left, if you do, change margin-left to margin-right
margin-bottom: 5px; // gives some space to the bottom to push text from its bottom
margin-left: 5px; // pushes text away from the left side in the flow
width: 75px; // sets the width of the block
border: 1px dotted #a00; // shows outside of the block
padding: 2px; // padding for the text within
}
}
[/style]
My floated block.
This is the text that will flow around the block I have created. Some length will be necessary to get it long enough to the bottom of the block. But this will allow the text to flow around it as if it was still present in the flow.Lists
Lists are very useful. There are two types of lists: ordered lists and unordered lists. you can reference them usingol
and ul
respectfully. The list items itself are referenced using li
.
List Style
You can change the default bullet point usinglist-style: list-style-type list-style-position list-style-image
. 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 url('IMGURL')
. Make sure to credit the image you use, even if you created it!Tables
To reference tables, usetable
to reference the table as a whole, tr
to reference a table row, th
to reference a table header, and td
to reference a table cell.
Centering
To center a table, usemargin: 0 auto;
to align it. This doesn't affect the vertical alignment, but centers it horizontally.
Empty Cells
You can hide empty cells usingempty-cells: hide;
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 useborder-spacing: #px #px;
to adjust the spacing between cells.
Vertical Alignment
To vertically align content within a table, usevertical-align: middle;
which allows you to center the content vertically inside each cell. To center it horizontally, you can still use text-align: center;
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 usecursor: VALUE;
and adjust the value to one of these: alias
all-scroll
cell
col-resize
row-resize
copy
crosshair
n-resize
e-resize
ne-resize
nw-resize
help
none
not-allowed
progress
wait
text
vertical-text
zoom-in
zoom-out
You can also set it to an image using
url('URLIMG')
, however you cannot use them in templates, but you may use them in personal skins.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 usingpointer-events: none;
which would not allow items to be opened in a new tab. To refuse allowing text to be copied, you can utilise user-select: none;
. You can also have it set to the value all
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
Buying:
BSDs 20 ZC
Prisms 70 ZC
BSDs 20 ZC
Prisms 70 ZC
