This “CSS in WordPress” series has been written by our awesome CSS and coding maestro, Brian. Thanks Brian!

You may have noticed on the last blog that we were writing colors as words when we wanted to change headings and paragraphs. While that is a usable CSS parameter, it can look very basic on the end result and is also quite limited in comparison to what a font color could be. For this blog, we will go over Hex colors. While not as readable to the CSS programmer, hex colors are a great habit to get into.

So here’s some code from the last blog:

h1{
color:red;
}

To change that same red to a hex value, we simply change

h1{
color: #ff0000;
}

However, for this example we want a shade lighter red, so let’s try

h1{
color: #ff4d4d<
}

For a great list of hex colors, including a color wheel to suit your own needs, try out W3 Schools Color Picker.

 

Now lets try changing the font of a paragraph on a HTML document. This is very easy. All you need to do is put in a font name. However not all computers or browsers are created equal, so it’s a good idea to put in a list of fonts, just in case your reader doesn’t have that particular font installed on their viewing device. CSS will try to use your fonts in the order you put them in, separated by a comma. Notice that our last font is longer than one word, so it is put in quotation marks.

p{
color: #0066ff;
font-family: Verdana, Times, "Trebuchet MS";
}

For a great list of fonts that are on most browsers, try cssfontstack. Adding in a custom font is a bit more complex, but very straight forward.

@font-face {
font-family: "My Font";
src: url(http://www.yourwebsite.com/mycustomfont.ttf) format("truetype");
}

p {
font-family: "My Font", Verdana, Times;
}

As you may have guessed, all you do is link your font and put it in the URL here, and put in the format.

Following this tutorial, you may end up with something like this:

Heading, I have a different font

Stay tuned for more CSS code and tutorials!

right-track-media-pyramids-150
To find the rest of Brian’s “Adding CSS to your Blog” blogs, click here: Adding CSS to your Blog