Edit Your Themes Stylesheet

Sunday, July 24th, 2011 | Posted bySteve (Admin)

Edit Your Themes Stylesheet – Pt 4 Borders

Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic.

Edit Borders using your theme’s stylesheet, you can edit the border properties of the elements on your page, including images, title bars, advert holders, headings etc.

Now I have to be honest here, borders are one area that I never paid much attention to, I guess because most themes I have tried have automatically had borders set to “0″ or “none” & therefore they have not really been brought to my attention as it were.

However once they had been brought to my attention & I had done some research & played around a little by editing my borders, I was amazed to see what a difference it had made to my website. No profound changes really, not like a total change of theme, but more subtle changes yet it added a little something to the overall look and feel of the theme.

Therefore this article is going to try and enlighten you on how to edit your themes stylesheet & what sort of borders are available for you to use. By using the CSS border properties you can specify the border width, style and colour of an element’s border.

Border Width

The border-width property is used to set the width of the border. The width is set in pixels, or by using one of the three pre-defined values: thin, medium, or thick.

Note: The “border-width” property does not work if it is used alone. Use the “border-style” property to set the borders first, even if you simply set the style to “solid”

Example:

heading h2
{
border-style:solid;
border-width:5px;
}
heading h3
{
border-style:solid;
border-width:medium;
}

Border Style

The border-style property specifies what kind of border to display. None of the border properties will have ANY effect unless the border-style property is set!

Border-Style Values

none: Defines no border

dotted: Defines a dotted border

dashed: Defines a dashed border

solid: Defines a solid border

double: Defines two borders. The width of the two borders are the same as the border-width value

groove: Defines a 3D grooved border. The effect depends on the border-color value

ridge: Defines a 3D ridged border. The effect depends on the border-color value

inset: Defines a 3D inset border. The effect depends on the border-color value

outset: Defines a 3D outset border. The effect depends on the border-color value

Border Color

The border-color property is used to set the color of the border. The color value can be set as:

name – specify a color name, like “red”
RGB – specify a RGB value, like “rgb (255,0,0)”
Hex – specify a hex value, like “#ff0000″

Note: The “border-color” property does not work if it is used alone. Use the “border-style” property to set the borders first.

Example:

heading h2
{
border-style:solid;
border-color:red;
}
heading h3
{
border-style:solid;
border-color:#98bf21;
}

Border – Individual Sides

In CSS it is possible to specify different borders for different sides:

Example:

{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}

The example above can also be set with a single property:

Example:

border-style:dotted solid;

The border-style property can have from one to four values.

border-style:dotted;

all four borders are dotted

border-style:dotted solid;

top and bottom borders are dotted
right and left borders are solid

border-style:dotted solid double;

top border is dotted
right and left borders are solid
bottom border is double

border-style:dotted solid double dashed;

top border is dotted
right border is solid
bottom border is double
left border is dashed

The border-style property is used in the example above. However, it also works with border-width and border-color.

Border – Shorthand Property

As you can see from the examples above, there are many properties to consider when dealing with borders. To shorten the code, it is also possible to specify all the border properties in one property. This is called a shorthand property. The shorthand property for the border properties is “border”

When using the border property, the order of the values are:

1. border-width - 2. border-style - 3. border-color

It does not matter if one of the values above are missing (although, border-style is required), as long as the rest are in the specified order.

Republished by Blog Post Promoter

Posted by Steve (Admin) on Jul 24 2011. Filed under Blogs Design. You can follow any responses to this entry through the RSS 2.0. You can leave a response or trackback to this entry