CSS Properties and Values – CSS Tutorial 3

We’ll be sticking with the <p> (paragraph) tag to keep this simplified for the time being but you can also use style tags with other font tags and not just the paragraph tag. Like your <H1> (heading) tags for instance. We’ll get back to this a little later though. Just wanted to mention it so I wouldn’t freak you out later.

font-family
<p style=”font-family:arial”>

You can choose your favorite font for this. One thing to keep in mind with the property is that everyone may not have your favorite font installed on their machine. If no other font is defined as a back up, then the browser will use it’s default font. You can choose an alternate font by placing more than one in the value section. You do this by separating each value with a comma.

<p style=”font-family:arial, serif”>

This tells the browser that if arial is not installed on the surfers machine, to use the generic serif font.

font-style
<p style=”font-style:italic”>

Choose from normal, italic or oblique, if you can tell the difference between italic and oblique please refer me to your optometrist so I can get a new prescription for my glasses.

font-variant
<p style=”font-variant:small-caps”>

Your choices here are “normal” and “small-caps”, which should have been called “all caps” instead because that’s what it does. So, I can sense you’re scratching your head right now and wondering, “why would I every need to use the “normal” tag?”. Hmm, this tells me that you’re thinking in the right direction!

We’ll jump ahead for a moment, not quite time travel, but a definite leap forward in this tutorial. If you were using an Internal or External Style Sheet and had your paragraph text set to small caps, you might want to jump out of small caps for a bit and have a small section of normal text. Ah ha!!

font-weight
<p style=”font-weight:bold”>

Choose from normal, bold, bolder & lighter. Alternatively, you could choose a number 100, 200, 300, 400, 500, 600, 700, 800 or 900 with 400 being equal to “normal” and “700” being equal to bold.

font-size
<p style=”font-size:large”>

xx-small, x-small, small, medium, large, x-large, xx-large
Medium is generally the browsers default size, so you may see at one size and someone else at another.

smaller, larger
These two when used, will adjust themselves according to the parent element. If the section you were working in was defined as small and you used “larger”, then the “larger” value would adjust your new area to medium.

Length
Use this to set an exact size by selecting a pixel size
<p style=”font-size:18px”>

%
Use this to set an exact size by selecting a percentage
<p style=”font-size:75%”>

line-height
<p style=”line-height:120%”>

normal
<p style=”line-height:normal”>
This is the default

number
<p style=”line-height:1.4″>
Number multiplied by the current font size to set distance between lines

length
<p style=”line-height:16pt”>
Use this set set a fixed distance between the lines

So far, today’s properties and their values.
I absolutely want to avoid information overload, so we’ll discuss more important parts of the font properties in a next issue.




Share this post using these icons:
Facebooktwittergoogle_pluslinkedinmail

Related Posts