karenak Crown

Tags  →  html

Here's the Categorian Beginner's First Aid Kit - CONTENTS


Part One - Background Color

Part Two - Background Image

Part Two /a - Background with Photo

Part Two /b - Background Image Sizing

Part Three - Background for Blog Posts

Part Three /a - Background for Single Blog Posts


Part Four - Blog Width

Part Four /a - Move your Blog


Part Five - Photoblogging ? You can do better than that !

Part Six - How to post a photo and make it look good

Example - How to position text and images


Part Seven - Let's talk about fonts

Part Seven /a - Fonts in the Style Sheet - CSS

Part Seven /b - Fonts in the blog posts - HTML

Part Eight /a - Text Formatting - Basics

Part Eight /b - Text Formatting - Columns

General Formatting

Part Nine - Simple Borders

Part Nine /a - Advanced Borders

Part Ten - Linking

Part 11 - Embedding


Part I - Completely messed up your layout ?

Part II - Bandwidth Exceeded

Do it yourself

Create a semi-transparent image


Addendum I - Punctuation Is Powerful !

...to be continued

Suggestions for topics are welcome :-)

Here's the Categorian Beginner's First Aid Kit - Do it yourself - Semi-transparent image

How to create a semi-transparent image for your background

In Part Two /a of the Tutorials we learned how to use a semi-transparent image for our background. Here I want to show you how to create such a semi-transparent image.

This is done with a photo editing software. However, since there are thousands of such programs, I can realistically only show the principle involved and you'll have to see what your software of choice offers in that respect.

I do all my photo editing with Pixlr.com, a free online software that offers all the tools I need. To follow this tutorial just click the link and then select Create a new image

Start with naming the image. Then enter the width and height you want. (Ignore the presets).

I usually make mine very small (10x10px) so they load quickly and don't take up much space in my photo sharing account. However, 50x50px as in this example is ok too.

Most important: Click the Transparent checkbox !

1 Next we must select the color we want to use with the bucket tool. Double-click the black rectangle at the bottom of the toolbox, choose the color and confirm with OK.

2 Select the bucket tool.

3 Finally set the opacity. I usually create several images with varying opacity (80 / 70 / 60 / 50 etc) to see what looks best.

Then click File to save the image. Here it is essential, that you choose the right file type: PNG.

After clicking OK you get the usual file saving window.

When that is done, upload the image (or images) to your photo sharing account.

This picture shows you semi-transparent images in varying opacity: 80 / 70 / 60 / 50.

Now see Steps 2 and/or 3 in Part Two /a of the Tutorial to learn how to use it in your blog.

That is all :-)

>>>> Back to Index

Here's the Categorian Beginner's First Aid Kit - Part Eight /b

Text Formatting - Columns

CSS offers a columns property which is quite handy and allows us to ditch the tables which are so unwieldy.

However please note that so far Opera is the only browser that fully supports columns. Firefox, Chrome and Safari use a workaround and (unsurprisingly) the Internet Explorer cannot handle it at all. See example below.

Columns are defined as a class in the Style Sheet. It is really quite simple.

Add it to your Style Sheet

Click "Style" and add a new line at the end.

Since columns are for text, we simply use the P tag.

The code:

p.column { column-count: 2; column-gap: 25px; column-rule: 1px solid black; column-width: 150px; }

column-count defines the number of columns. Usually 2 or max. 3 columns look best. But that's up to you.

column-gap defines the space between the columns. The value is in px. Just test and see what looks good.

column-rule allows you to set a dividing line into the gap between the columns. It is optional. The definition is the same as with borders. So '1px solid black' will show a thin black vertical line.

column-width is optional too. The default value is 'auto' which means that your browser will calculate it for you. However, there might be cases when you wish to specify the width of your text.

Theoretically this would be all. However, as mentioned above, we'll have to think of Firefox, Chrome and Safari users. For Firefox we'll add a '-moz-' and for Chrome and Safari a '-webkit-'. So in fact we'll have to type the code 3 times in all. Like this:

p.column {
column-count: 2; column-gap: 25px; column-rule: 1px solid black; column-width: 150px;
-moz-column-count: 2; -moz-column-gap: 25px; -moz-column-rule: 1px solid black; -moz-column-width: 150px;
-webkit-column-count: 2; -webkit-column-gap: 25px; -webkit-column-rule: 1px solid black; -webkit-column-width: 150px;

Not difficult, just a bit irksome.

Click "Save"

How to use it

In your blog post type

<p class="column">

...type your text ...
and end it with



Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.

As you can see, you can easily format the text as you would any other text. So I inserted the image and used text-align:justify.


<p class="column" style="text-align:justify;"><img style="float: left; margin-right: 10px;" src="...path to the image..." width=80px;/>
...here comes the text... </p>

That is all :-)

>>>> Part Nine

Here's the Categorian Beginner's First Aid Kit - Part Seven /b

Let's talk about fonts (3)

This part of the tutorial will show you how to use a special font in the occasional blog post. As ever, there is a simple method and a more advanced method.

The simple method

This is the code:

font: font size 'font name'; color: color name;

font size can be set in px, pt or %

The correct font name is listed on the Google Web Font page as shown in part 1 of this tutorial.

Color name can be any color name or hex code.

As this code is CSS, we must make it acceptable to HTML by wrapping it into the 'style' attribute.

style="font: font size 'font name'; color: color name;"

Now we can attach the style attribute to an HTML tag like e.g.

<span style="font: 28pt 'Qwigley'; color: navy;">Here comes your text</span>


<p style="font: 28pt 'Qwigley'; color: navy;">Here comes your text</p>

and several others, though these two are the most useful.

These examples result in: Here comes your text

The advanced method

Let's say you always use a special font for poems. In this case, you define a 'class' in your style sheet and use it whenever you need it.

Step 1 - define the class

In your style sheet add the following line:

p.poem { font: 28pt 'Qwigley'; color: navy; }

p stands for the HTML <p> tag.

poem is the name of the class. It can be any name you like but make it short so it won't be a bother to use it in a blog post. You can define as many classes as you like. Remember the exact spelling. Using this in HTML is case-sensitive. So if 'poem' is in lower case here, you must type it in lower case in your blog post as well.

Classes can contain all kinds of formatting like background images, borders, padding, margin and so on.

Font size, font name and color name of course depend on which fonts you loaded from the Google Web Font page.

Now you can use that class in a blog post.

Step 2 - use the class

In your blog post type:

<p class="poem">Here comes your text</p>

which results in Here comes your text

And that's it :-)

>>>> Part Eight

Here's the Categorian Beginner's First Aid Kit - Part 11


Embed a video

To embed a video in your blog you need the "Embed Code". In YouTube you'll find it here:

Click "Share"

Then click "Embed"

Copy the code in the text box. All of it. Then paste it into your blog post.

Now you can format the blog post as usual, center the video, add comments etc. (Example)

Embed An Audio File

Works exactly the same way. Only sometimes the Embed Code is not so easy to find. As in Grooveshark.

Click "Options" of a song, then click "Share Song" and "Widget"

Then select "Widget" again. Specify size and color and then click
"Copy to Clipboard"

Paste the code into your blog post.

Format and add text or images as usual. (Example)

>>>> Back to Index

Here's the Categorian Beginner's First Aid Kit - Part Ten


Blogging without linking is only half the fun !

What do I need links for ?

With links you can take your visitors to places you have been and liked. If you reblog an image, just link back to the blog where you got it from. If there's a video on a page that doesn't offer embedding, just take a screenshot and link that back to the page.

The Basic Code

<a href=" ... path to the page... " > Text or image to click </a>

The Style Sheet determines the basic formatting of links. You can easily change it. But links can also be formatted indiviually.

Adjust the Style Sheet

In the Style Sheet look for a line that starts with

a { ... }

This is the definition for the links as such - if you want all the links to look alike, then adjust only this one line.

In order to change the looks of your review links, add this line to your style sheet:

.review a { ... }


.review a { font-size: 12pt; color: orange; text-decoration: none; }

You can also specify background, border, padding, margin etc.
If you read the previous tutorials all this will look familiar.

text-decoration can be none, underline, overline, line-through and blink. Please note that "blink" is not supported in Internet Explorer, Chrome and Safari (...and probably drives away visitors more quickly than the blink-frequency...).

Get fancy

Unlike other CSS/HTML code, the link can be made sensitive to the cursor ie. you can specify that it changes its appearance when the cursor hovers over it.

To achieve this, you merely add a line to your style sheet:

a:hover { ... }

and / or

.review a:hover { ... }


.review a:hover { font: Arial; font-size: 14pt; color: orange; text-decoration: underline; }

With this line you can make the link look completely different, thus catching your visitor's attention.

In addition to :hover you can also specify the looks for :active and :visited.

How to use it

Now that you have adjusted the Style Sheet, it's time to look at the HTML you need to add a link to your post.

Example for link with text

<a href="https://categorian.com/perm/post/id/1074940">Link to this post</a>

Link to this post

Example for link with image

<a href="https://categorian.com/perm/post/id/1074940"><img src="http://..."></a>

Example for individual formatting

<a href="https://categorian.com/perm/post/id/1074940"><span style="color: green; border: 1px dashed red; padding-left: 5px; padding-right: 5px;"> Link to this post </span></a>

Link to this post

Example for link with confirmation

This is a nice gimmick but not really useful to us bloggers. It's usually used to confirm a deletion. But it can also be used to warn the visitor that s/he will now leave this page. Still, just so you know it's there, here's an example.

<a onclick="return confirm('Are you sure you want to follow this link ?');" href="https://categorian.com/perm/post/id/1074940"> Link with confirmation </a>

Link with confirmation

>>>> Part 11

Here's the Categorian Beginner's First Aid Kit - Addendum 1

Punctuation Is Powerful !

Punctuation IS powerful - and never more so than when writing code.

When changing your Style Sheet or writing HTML in your blog posts take extra care to get all the punctuation right !

Watch those commas, semicolons, quotation marks, colons etc. with extra care. One tiny little mistake and the entire command will either be ignored completely or give you some unexpected results.

So check those , ; : " carefully before you click Save or Post.

>>>> Index

Troubleshooting 2 - About Bandwidth

What your blog will look like if you exceed bandwidth

How this happens

Free accounts on image hosting sites usually have a limit on the number of images you can upload, or the space you can use or the bandwidth you use. Or all of those.

Photobucket limits your bandwidth usage to 10GB per month. That is actually a lot.


if you exceed it, they will politely ask you to get a paid account and then mercilessly shut you down until the month is over Counting from date of creation of the account i.e. if you created the account on the 5th of any given month, bandwidth will be reset on the 5th of every following month..

So what IS this bandwidth thing ?

In this context, bandwidth is the amount of data transferred from photobucket to whichever computer called up a web page that shows one of your photos.

So whenever a web page calls Photobucket for one of your pictures, bandwidth is used - how much depends on the size of the image. (And the number of images of course)

How you can find out your bandwidth usage

In Photobucket click "Account Settings" and then "Account Status".

Why reblogging is NOT good !

If you reblog another person's image without uploading that image to your own photo sharing account, you will be using that person's bandwidth ...

...and however nicely you say thank you, you might just kill that person's account !

...and your blog post will show this instead of the image

How to limit your bandwidth usage

  1. Background Image

    Check the size of your background image.

    The best background images are the small tiles. In that case your browser will do all the work while bandwidth usage is minimal. (See Part Two of the tutorial)

    If you absolutely want a photo or big wallpaper for your background, check the size of the image. Use a photo editor to compress it. NEVER use a bmp file. Use png or jpg.

  2. Posting Photos

    As already mentioned in Part Four of the tutorial, you can set the width of your images with HTML.

    Don't do it.

    Reduce the size of your images in a photo editor. Even Photobucket offers that functionality.

    It really makes no sense to download an image with 1600px width when you have to reduce it to 800px width in your blog post. It takes longer to load and it uses too much bandwidth.

Here's the Categorian Beginner's First Aid Kit - Part Three /a

Background Image for a single Blog Post

In Part Three of this tutorial we learned how to set a background image for ALL our reviews / blog posts.

However, you might want to set a different background color or image for one single blog post. In that case you do not bother with the style sheet (although it can be done) but you simply enter the HTML code directly into your blog post.

The syntax

The code for the image itself is the same that we used in the Style Sheet for the page background (see Part Two of the tutorial):

background-image: url( http:// ... path to your image ... );

But this is CSS and in order to be able to use it in a blog post - which is done in HTML - we have to wrap it into the "style" attribute:

style="background-image: url( http:// ... path to your image ... );"

Now, the "style" attribute cannot stand alone. As an attribute, it merely provides additional information about an HTML tag - for example the DIV tag. So we use the DIV tag as a container for our background image:

<div style="background-image: url( http:// ... path to your image ... );"> ... your blog post text.... </div>

Please note that instead of the DIV tag you could also do this with the P tag (P = Paragraph) or the UL tag (UL = Unordered List = bulleted list) or several others. All of them can be the container of the "style" attribute and therefore of the background image.

Also be aware that you can add "background-position", "background-repeat" and "background-size" etc. according to what is wanted/needed. (See examples below)

How to use it

If you post a picture with the IMG tag and add no other code or text, the review will be just as big as the height of the image. (The width is determined in the style sheet)

This is NOT the case with the background image !

You determine the size of the blog post by the number of lines you enter - either text or empty lines. ONLY THEN will your container be filled with the background image. So if not all of your background image is visible, hit "Enter" a few times until it is !

Remember to also define the right text color - as in the style sheet this is done with

color: colorname;

Example 1 - For small, seamless images

<div style="background-image: url( http:// ... path to your image ... ); color: color name;"> ... your blog post text.... </div>

Example 2 - For photos

<div style="background-image: url( http:// ... path to your image ... );background-size: cover; color: color name;"> ... your blog post text.... </div>

Example 3 - As a decoration on the left side

<div style="background-image: url( http:// ... path to your image ... );background-repeat: repeat-y; color: color name;"> ... your blog post text.... </div>

Example 4 - For a background color

<div style="background-color: darkblue; color: gold;"> ... your blog post text.... </div>

>>>> Part Four

Here's the Categorian Beginner's First Aid Kit - Part Five

Photoblogging ? You can do better than that !

Why ? What's wrong with photoblogging ?

There are several things very wrong with photoblogging.

  1. You have no control over what happens with the image. If the page with the photo is taken down for whatever reason, you lose the image and have either a very ugly icon that says the page could not be found or an empty hole in your blog. If you photoblog the background image of your blog you might be surprised some day when the image is gone...

  2. You are stealing bandwidth and some site admins are quite allergic to that. Best case scenario: Instead of your photo you get an image like this:

    But it could also be something like this:

    Not so pretty, is it ?

Here's how to do it right

In order to post a photo in your blog you need the direct link to that photo (same goes for background images !)

So you need a place where you store all your images. I guess the two most popular ones are Photobucket.com and Flickr.com. There are tons of others. Just make sure that you choose one that offers "photo sharing".

Get an account. It's painless and free and done in seconds.

  • Upload the picture to your album.

  • Get the Direct Link !

  • In your blog click "post to blog"

  • Enter the following code:

    <img src="http://..... ">

    Paste that direct link in between those " "

  • Click "Post"

Read the following tutorials to learn how to position that photo, how to set the size and much more.

>>>> Part Six

Here's the Categorian Beginner's First Aid Kit - Part Six

How to post a photo and make it look good

The HTML tag to post a photo is:

<img src="http://...path to the image...">

This is the simplest form. It will place the picture on the left side of the post and that's it.

However, there is a lot you can do to improve on that:

Adjust the size of that image

Although I would always recommend to resize the image in a photo editor, you can set the size right here in your blog post.

Please note: I recommend setting either width or height because if you set both and make a slight error, you will distort the image.

<img src="http://...path to the image..." width="700">

Center that image

There are several ways to center an image. This is the simplest one:

<center> <img src="http://...path to the image..."> </center>

Put text next to that image

Sometimes you might want to place text next to the picture. The easiest way is this:

<img src="http://...path to the image" align="right">

...or align="left" of course

However, this simple method will place the text very close to the image, which might not look good.

This is why I prefer the following method:

<img src="http://...path to the image" style="float:right; margin-left:10px;">

You can let your image float right or left.

margin-left:10px will create a gap between text and image. You can change the number of px to your liking.

margin comes in 5 variations: left, right, top, bottom. Or without any attribute at all, which will set the margin right around the image.

I like style="..." because there are several other things we can use it for.

How about a border ?

This is the standard border:

<img src="http://...path to the image" style="border: 1px solid black;">

1px is a thin line. You can make that border as thick/wide as you like.

Borders can be solid, dotted, dashed, double, groove, ridge, inset, outset and hidden.

Borders can have any color you like. Just type in the color name or hex code of a color.

And now we will combine all that !

For this text to be placed next to the image, in addition to the image source, I used "style" to combine float, margin and border and then added width and wrapped all into one simple command.

<img src="http://...path to the image" style="float:right; margin-left:10px; border: 1px solid black;" width="200">

>>>> Examples

Here's the Categorian Beginner's First Aid Kit - Example 2

How to position text and images

Here are a few examples for the positioning of text and images in your blog posts.

Set two images side by side

Noting could be simpler:

You merely type one img tag after the other. If you want some space between them, you use "style" and "margin".

<img style="margin-right: 10px;" src="...path to the image..."> <img src=" ... Path to the image ...">

Set two images on either side of text

To set two images on either side of text, we use "style" with "float" and "margin" again.

Text alongside floating images should always be ended by adding

<br style="clear: both;" />

Thus all following elements will be placed BELOW the images.
<img style="float:left; margin-right: 10px;" src="...Path to the image..."> <img style="float:right; margin-left: 10px;" src=" ... Path to the image ..."> and here follows your text...<br style="clear : both;" />

Clear can be used with left, right and both.

Thank you Brian (Airtoob) for telling me about the "clear" - very useful indeed :-)

For your banner

A banner always looks nicer if you place your profile or welcoming text beside your image.

<img style="float:left; margin-right: 10px;" src="...Path to the image..."> ... your banner text...<br style="clear: left;" />

>>>> Part Seven

Here's the Categorian Beginner's First Aid Kit - Part Eight /a

Text Formatting - Basics

Basic Formatting Tags

HTML offers some basic tags for formatting text:

  • <b>
  • Text in bold
    Text in italic
    Text is underlined
    Text is deleted
    Text in superscript
    Text in subscript
  • </b>

Example for bold and underlined text: <b><u>Bold and underlined</u></b>

Align Text

<center> is probably the most important formatting tag when blogging. We have already seen it used for images, but it serves equally well for text.</center>


center is not our only option and eventually becomes boring. Let's see what alternatives we have...

This is when the property "text-align" comes in handy. It offers all the possibilites of aligning text and images.

text-align: right;

text-align can be left, right, center or justify.

However, "text-align" is just a property. And, as is the case with properties, it is owned - by the "style" attribute:


Now, depending on what we want to do, we can attach the style attribute to several HTML tags.

The <P> Tag

The <p> tag is used for paragraphs and thus predestined to be our first choice as a container for our text-aligning.

<p style="text-align:right;"> will set a paragraph on the
right hand side of your blog post.</p>

<p style="text-align:center;"> But you can also center the text.</p>

<p style="text-align:justify;">Or Justify might be useful sometimes. Use this to generally push your paragraphs around in your blog post. Make your reviews more interesting by formating them.</p>

The <DIV> Tag

Use the <div> tag if you want to format the entire blog post / review in only one way.

<div style="text-align:justify">

div works mostly like the <p> tag but it's supposed to define sections of a document. So basically it's used for formatting what affects the entire blog post while <p> is for the fine-tuning...

The <UL> and <OL> Tag

The <ul> tag is for Unordered (bulleted) Lists, the <ol> tag is for Ordered (numbered) Lists.

They both work exactly the same:

<li>another item</li>
<li>and a third one</li>

You can add the "style" attribute to the list itself <ul style="text-align: center;">

and / or to the items <li style="text-align: center;">

The <CENTER> Tag

Erm, yes, I know. This is strange. But it actually works.

<center style="text-align:right;"> Actually results
in the text being aligned right. </center>

There are more but I guess the list is already long enough.

>>>> Part Eight /b

Here's the Categorian Beginner's First Aid Kit - Part Nine

Simple Borders

Border is a recurrent topic and so here is some basic info about how to do borders.

Basic Code

This is the basic code for a border:

border: 1px solid black;

1px is the width of the border. It's a thin line just like the one you see on the left side of this paragraph. You can make that border as thick/wide as you like.

Borders can be solid, dotted, dashed, double, groove, ridge, inset, outset and hidden. Please note that some types of borders need more than 1px in width (see examples below)

Borders can have any color you like. Just type in the color name or hex code of a color.

1px                          solid
1px                          dotted
1px                          dashed
3px                          double
4px                          groove
4px                          ridge
3px                          inset
3px                          outset


Borders should always be used in combination with "padding".

Padding provides a space between the border and the text.

padding: 10px;

The number of px for the padding can be set to your liking.

How to use it

The code as shown above is CSS. This means that in the Style Sheet you can simply add it to an element that you want ALWAYS to have a border.

For example your reviews / blog posts:

.review { border: 1px solid black; padding: 30px; }

Or the header bar of your blog posts:

.review div.bar { border: 1px solid black; padding: 5px; }

However, you will probably want to use it mostly for images, single blog posts or a paragraph here and there.

In that case the CSS code must be smuggled into HTML territory and that is done by simply hiding the code in the style attribute:

style="border: 1px solid black; padding: 10px;"

Now we can attach it to the tags we use in a blog post:


Simply add it to the image tag (no padding necessary here):

<img style="border: 1px solid black;" src="..." width="..." >

Blog Post / Review

If you want to set the border around a review, use the div tag.

In the first line of your blog post type

<div style="border: 4px ridge blue; padding: 30px;" >

then write your review as usual and finish it with the last line as



Use the p tag if you want to set a border around a paragraph:

Start the paragraph by typing

<p style="border: 3px double green; padding:10px;" >

write your text and finish it with



You can also put a border around a single or several words:

Use the span tag for this. Padding is not needed here.

<span style="border: 1px dashed red;" > write the text and put the </span> right behind the word(s).

Advanced Borders

Borders are a very handy tool to style your reviews and there is a lot more one can do with them than shown in this tutorial. For more information please read the next part Advanced Borders.

>>>> Back to Index

Here's the Categorian Beginner's First Aid Kit - Part Nine /a

Please read Simple Borders first, if you haven't yet.

Advanced Borders

Simple Rounded Corners

This is the simplest way to create rounded corners:

border-radius: 10px;

This will set a 10px radius on all 4 corners

To create this border I used:

<div style="border: 4px ridge blue; border-radius: 10px; padding:25px;">

Advanced Rounded Corners

But you can define all 4 corners separately if you want to:

border-radius: 15px 60px 15px 60px;

Starting with the top left corner these 4 values define the corners in clock-wise sequence.

To create this border I used:

<div style="border: 3px solid green; border-radius: 15px 60px 15px 60px; padding:25px;">

Freestyle Rounded Corners

You can even define horizontal / vertical radi for all 4 corners

border-top-right-radius: 100px 230px; border-bottom-right-radius: 100px 230px; border-bottom-left-radius: 30px;

Available are: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius. The first value is for the horizontal, the second for the vertical radius.

To create this border I used:

<div style="border: 3px solid red; border-top-right-radius: 100px 230px;
border-bottom-right-radius: 100px 230px; border-bottom-left-radius: 30px; padding:25px;">

Partial borders

The border need not be complete. You can define merely one, two or three sides of the border and format each separately.

border-right: 6px double green; border-bottom: 6px ridge gray;

Available are: border-left, border-top, border-right, border-bottom.

To create these borders I used:

<div style="border-right: 6px double green; border-bottom: 6px ridge gray; padding: 25px;">

>>>> Part Ten