Inline Cascading Style Sheets

mastering cascading style sheets header

2. Inline Cascading Style Sheets

animated pipe smoking dragon cartoon image

To use inline styles, you use the, .... (drumroll please).... style tag, otherwise known as the style attribute. Did you guess correctly? You can say yes, No one will ever know but you.

If you've ever taken a peek inside your html or source code, then you may have seen these little critters there because that's where they like to live. For the purpose of our lesson, we've captured one of these elusive style tags and placed it on the page right below here where you can get a good look at it in the light.

<p style=

There, it doesn't look so scary now does it? Kind of harmless really. The problem is right now, it doesn't know what to do, so it's just sitting there patiently awaiting instructions.

They are very obedient and follow orders extremely well as long as the instructions come in a clear voice which they can understand.

Let's have some fun with it and give it something to do.

This is the text on the page that will be affected

So, what we've done is taken the old (paragraph) tag and added a style that will affect everything up until we close the paragraph with the tag.

In the example above, if you haven't already guessed, we used the style tag to change the color to red, use the verdana font and apply a left margin of 20px.

If we would have used sans serif font instead of verdana, then we would have placed that inside of single quotes like 'sans serif'. Anytime you use two words inline, you must enclose in single quotes.

Taking a closer look at the example above and see what makes it work.

We used the style= followed by a set of instructions. The first part of the instruction is known as the property and the second part is known as the value.

property:value

The first property we wanted to specify was the color and the first value was red. You separate the property and value with the colon:

color:red

When using more than one property and value, separate those with the semi-colon => ;

color:red; font-family:verdana

color:red; font-family:'sans serif'

Remember, two words needs to be enclosed in single quotes when being used inline.

Pretty simple, right? I know you are nodding your head enthusiastically. Tell me more, I can almost hear you saying.

What properties can I define for my fonts?

Excellent question!! I knew you were catching on!

The most common things you may like to define are as follows:

font-family
font-style
font-variant
font-weight
font-size
line-height
word-spacing
letter-spacing
text-decoration
text-transform
text-align
text-indent
vertical-align

That's cool, but... what do they do?

I'm glad you asked. Let's look at each one and see what is possible, see what values are available for each property.

We'll be sticking with the (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

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.

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

font-style

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

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

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

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

Use this to set an exact size by selecting a percentage

line-height

normal

This is the default

Number

Number multiplied by the current font size to set distance between lines
Length

Use this set set a fixed distance between the lines

%

Sets the distance between lines based on the percentage of current line size so the 1.4 and 140% are essentially the same. Maybe the programmers do have a mean streak.

word-spacing

This sets the distance between words. I can hear you saying, “Nooooo”, haha, Yes, it is! Choose between normal, which is default or set a length. It is possible to use a negative number here to crunch the words together or overlap.

letter-spacing

I know, I know. Obvious huh? As with the word-spacing, you can also use a negative number to crunch the letters together, while leaving the distance between words the same, unless you specified that to be different.

text-decoration

Guess what this one does. Bingo! It decorates the text. Choose from any of the options below, which I think are pretty self explanatory. If you were working in a section of underlined text, you could use the “none” tag to flip out of it for a bit.

none
Default decoration. Text has no special decorations like below.

underline
Creates a line underneath the text, like hyperlinked text.

overline
The opposite of underlined. One of our evil programmers had dyslexia and nobody had the heart to tell him so they just left this one in.

line-through
Creates a line through the middle of the text. This is a mandatory decoration for internet marketing because product prices, days left and copies available fluctuate on a minute to minute basis. This allows you to quickly cross out the ~~$29.99~~ and list it for $19.99, but only for ~~8 hours~~, ~~4 hours~~, 2 more hours but you better hurry 'cause there's only 12, 8, 5, 2, 1 copies left!

blink
Doesn't work in IE or Opera, so why even use it??

subliminal
Creates an unconscience reaction to the text on your page, forcing the surfer to follow your instructions without question. Ok, I made that one up, there's no such value! Don't we wish!!

text-transform

Finally, one that is not so obvious! Here you can set all characters to all caps, 1^st letter of each word caps, no caps, etc..

none
Default, will appear as it is typed. If you were working in an all caps section you could flip out of it for the specified text and it would resume when this tag was closed.

capitalize
Use this to capitalize the first letter of each word

uppercase
Set all letters to caps

lowercase
All letters are lowercase, no caps

text-align

Determine how the text is to be aligned. You can select from left, right, center and justify. Left is the default and will be how it is displayed if this property is not set, depending on the surfers browser or any other specifications set in your internal or external style sheets.

text-indent

Set either the length or percent. You can use a negative number here. If you have other text, table or pictures to the side, this can place the text on top of it.

vertical-align

baseline
Places at the baseline. Common around pictures.

sub
Created subscript, which will place the character slightly lower than the surrounding characters as you would expect to see in H2O which is a common example of subscript.

super
Creates superscript which is common in pricing, $19.⁹⁹, this could be used in conjunction with the decoration:underline to create $19.⁹⁹

top
The top of this character will align with the top of the tallest element on the line. Generally used with images.

text-top
Aligns with the top of the parent element. Huh? You probably won't see much of a difference between top and text-top. Top, aligns with the tallest element on the line where text-top uses the parent elements font, so if you were working in a size 24px font, you could create some new text with a size 12px font and use text-top and it would magically rise above the base line and the top would be even with the size 24px text.

middle
Aligns in the middle of the element, common for pictures.

bottom
Aligns with the bottom of the lowest element in the line. Common with pictures.

text-bottom
Works like the text-top, only it's the bottom.

length

You can raise or lower by setting specific px (pixels), pt, (points) inch (uh.. inches), mm (millimeters), cm (centimeters), pc (picas) or em (ems, will cover later).

%

Set by calculating a percentage of the line height value. May use negative number for this value.

Now that you have an idea about what can be done with fonts, let's go ahead and play around with it a bit.

Let me introduce to you the background element. Since we are still working on paragraphs and text, this won't be about the page background but rather placing our text on a background.

Using this code...

Here's our nice white text on a blue background.

You could alternatively use an image

Here's our nice white text on a background image

...would place our white text on a blue background. If you like, you can take a quick break, stretch your legs and come back ready to get some hands on!

Ok, since you're reading this, I'll assume that you've either had your break and are ready to get to it or you're just so eager to get started that you skipped the break. Either way, congratulations on making it this far. Hopefully, you've come to see that CSS is understandable and that you shouldn't be afraid to dig into it.

When working with your actual pages or external .css files, you should always make a back up copy before making any changes. This way you can feel free to change one thing at a time then see what it changed, then just rinse, wash and repeat until you get it the way you like.

Having your page or .css file backed up is like working with a big ol' etch a sketch, if you mess up, just shake it and start over. I feel a little silly saying this but if you have a laptop and are about to shake it... STOP!!

Ok, why don't you go ahead and open up your favorite text editor and create a new blank page. Write out a paragraph or two, or copy and paste from somewhere else and then look at your html code.

Remember our <p style= critters from above? Of course you do! Go ahead and start adding and changing around some of the elements and values from above just to get a feel for it. Once you're comfortable with that, we'll move on to some other elements.

Hi, I take it that you've mastered the font-size and text-transform elements by now and are ready to tackle something a little heartier.

Good! Let's jump into Internal Style Sheets.

1. Introduction to cascading style sheets - 2. Inline cascading style sheets - 3. Internal cascading style sheets

- 4. External cascading style sheets