karenak Crown



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


Padding

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:


Image

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

</div>



Paragraph


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

</p>



Word

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