Text
Prerequisites
Styleclass
Text Color
color: red
There are many 'basic' colors you can use (red, blue, green, black, gray, purple) but you can also use hex codes. These are much more specific and are very useful. I use this site for hex codes. It has a drop-down box at the top, which gives you a color picker. From there, you can copy the hex code for any color you can imagine!
Hex codes are a 6-number/letter combination code preceded by a pound symbol (#). For example; #92b7ec is a shade of blue.
Text Alignment
text-align: center
Text can be aligned to the left, right, and center.
Fonts (+ Web-Safe Fonts)
font-family: arial
Fonts are basically styles of text. They change the look of letters and numbers. There are thousands of fonts, and many places to download them.
However, I wouldn't recommend using fonts that are not web-safe. To explain what this means, everyone has fonts installed on their computer. But not everyone has the same fonts installed. If you use a font that someone else does not have, their browser will default it to something else. This can cause issues with how your template looks, as different fonts are different sizes.
For a list of web-safe fonts, go here.
Bold, Italic, Underline, Etc.
Bold
font-weight: bold;
Italic
font-style: italic;
Oblique
font-style: oblique;
Overline
text-decoration: overline
Underline
text-decoration: underline
Line-through
text-decoration: line-throughText Shadow
text-shadow: 2px 2px 1px #ae514d, 1px 3px 1px #7c3835
This adds a shadow to your text that you can adjust.
URL's (Links)
There are many things you can do with links. This is the base code.
a {color: red;}
This is the basic one. It defines what all links will look like.
a:visited {color: green}
This changes the appearance of links if that the viewer has already visited.
a:hover {color: blue;}
If you use this, you can change the appearance of a link when it's hovered over. You can do a lot of things with this. Some ideas are text-shadow and letter-spacing.
Outlining Text
There are two methods to do this. I'll go over each one individually, and also explain how they can both be used in combination with each other to create unique effects.
Text Stroke
Example 1
-webkit-text-stroke: 3px #d0b0c8; color: white; font-size: 50pt;
Text-shadow
Example 2
color: white; font-size: 50pt
text-shadow:
3px 3px 0 #000,
-3px -3px 0 #000,
3px -3px 0 #000,
-3px 3px 0 #000,
3px 3px 0 #000;
Text-shadow & Text-stroke
Example 1
-webkit-text-stroke: 2px #d0b0c8; color: white;
text-shadow:
3px 3px 0 #d0b0c8,
-7px 5px 0 #000,
1px -1px 0 #d0b0c8,
-1px 1px 0 #000,
1px 1px 0 #000; font-size: 50pt
Example 2
webkit-text-stroke: 3px #d0b0c8; color: white; font-size: 50pt;
text-shadow:
3px 3px 0 #000,
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;