Internet Business Centre - information for online business




Marketing Materials - Save up to 80%

3. Inline CSS part 2

Inline Style Sheets Part Two

Please don’t forget that if you copy and paste any paragraph tags from these pages, you will need to remove a space between the < and the p and the space between the < and /. I had to put them in so you could see the code otherwise WordPress applies the tag to this page. What can you do huh? word-spacing

< p style="word-spacing:20px">
< p style="word-spacing:-0.4px">

This sets the distance between words. 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

< p style="word-spacing:10px">
< p style="word-spacing:-0.4px">

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

< p style="text-decoration:line-through">

Guess what this one does. Yup, 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.

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

overline – The opposite of underlined. Not really sure why it’s there, I’ve never thought of any use for it.

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, and looks horrible anyway, so why even use it??

text-transform

< p style="text-transform:capitalize">

You can set all characters to all caps, 1st letter of each word caps, no caps, etc..

none – Default, will appear as it is typed.

capitalize – Surprisingly, 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

< p style="text-align:center">

Sets how the text is to be aligned. You can use 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

< p style="text-indent:15px">< p style="text-indent:-15px">

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

< p style="vertical-align:super">

baseline – Places at the baseline. Common around pictures.

sub – Created subscript, which will place the character slightly lower than the surrounding characters.

super – Creates superscript which is common in pricing.

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. 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.

< p style="vertical-align:28px">

Length – You can raise or lower by setting specific px (pixels), pt, (points) inch (inches), mm (millimetres), cm (centimetres), pc (picas) or em (ems).

< p style="vertical-align:120%">

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

Now that you some idea about what can be done with fonts, time to do something with it.

Background element first. 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…

< p style="background: red; color: white;">Here’s our nice white text on a red background.< /p> …would place our white text on a red background.

You could alternatively use an image

< p style="background: url(my_cool_image.gif);color: white;">Here’s our nice white text on a background image< /p>

Just a sanity point here, if you are changing css, always make sure you can bail out back to a previous version if things go horribly wrong. It may surprise you to know that it is possible to make mistakes, and your page can turn pretty nasty. Just a thought!

Comments are closed.