Getting Started with Fonts
Today we are talking about text/fonts. We are going to go over most of the basic text properties and after that we will do a few things we can’t do with the Appearance Editor.
First lets look at changing the font properties:
h1 {
color: black;
font-size: 36px;
font-stretch: expanded;
font-weight: bolder;
}
Here we are customizing Header 1, this will change the title of your website. We are setting the color of the font to black. The font-size to 36px (px stands for pixels).
IMPORTANT NOTE: Do NOT put a space between your number and px:
font-size: 36 px;
font-size: 36px;
These last two lines are stuff you can’t do in the appearance editor. Setting font-stretch to expanded will stretch out the text which will make it looks bigger and setting font-weight to bolder will make the text bolder than bold. After all, bolder is better!
Once you look at your website now, you will notice that your font on the title’s will look much bolder and nicer. Let’s expand on this!
A Couple other things you can’t do with the Appearance Editor
One thing I want to show you a lot is things you can’t do with the appearance editor. The first one is font-variant:
h1 {
font-variant: small-caps;
}
font-variant is a property that defines which case your font is drawn. Setting it too small-caps will make it so all of the letters are in ALL-CAPS and the uppercase letters will be enlarged! It looks super cool too!
You may notice that I have shadows under the text, well let me show you how to do that!
Here is the second one: text-shadow:
This is a more intermediate property since it takes two arguments however can take more to customize it. The third argument we add changes the color!
h1 {
text-shadow: 2px 2px #999;
}
text-shadow is a property that define the size and color of well… the text shadow! It’s horizontal position is 2px to the right of the text, and the vertical position is 2px below the text. We are setting the color to the hexadecimal value #999 which will give you a nice grey color.
Once you view your website you will notice something: text shadows looks super awesome!
This should be what your code looks like after this part:
h1 {
color: black;
font-size: 36px;
font-stretch: expanded;
font-weight: bolder;
font-variant: small-caps;
text-shadow: 2px 2px #999;
}
Thanks for reading this tutorial on how to use Custom CSS. I will be adding more parts to this if you are interested in customizing your website even more than even the Appearance Editor can. In the next part, I will be showing you some gradient backgrounds, and custom shadows to stylize your edublog further!
– Aidan Schulmeister