Inline Style Sheets – CSS Tutorial Part 2

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.

<p style=”color:red; font-family:verdana; margin-left:20px”>
This is the text on the page that will be affected
</p>

So, what we’ve done is taken the old <p> (paragraph) tag and added a style that will affect everything up until we close the paragraph with the </p> 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

or

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. In the next issues, let’s look at each one and see what is possible, see what values are available for each property.
Let’s discover the wonders of CSS.




Share this post using these icons:
Facebooktwittergoogle_pluslinkedinmail

Related Posts