The HTML_Help page provides a guide to the range of HTML that StumbleUpon allows and demonstrates how HTML tags can be used to customise your page. StumbleUpon also allows the use of Cascading Style Sheet (CSS) rules to format pages.
CSS was designed to allow everything that HTML formatting allows - and to extend the formatting options available.
Browser Support[]
Before continuing it should be understood that StumbleUpon is available on a number of different browsers. Each browser supports CSS to slightly different degrees and it should be noted that your page may look different to SU members who use a different browser to your own. When using CSS it is wise to check your design in more than one browser - I would recommend previewing your designs in both Internet Explorer and Mozilla Firefox to ensure that your design works as expected in both.
The CSS Style Attribute[]
The only method of embedding CSS declarations in StumbleUpon pages at the current time is through the use of the HTML 'style' attribute.
The HTML 'style' attribute can be used in any of the HTML tags that StumbleUpon allows - for example to add the style attribute to a HTML 'bold' tag you would write:
<b style="">Some Text</b>
or to an image:
<img src="your_file" alt="An Image" style="" />
However - the above 'style' attributes do not contain any CSS declarations - so will have no noticable effect.
CSS Declarations[]
Each CSS declaration is made up of two parts - the property and the value - separated by a colon and ending in a semicolon - so the example of the 'bold' tag given earlier could be made useful by expanding it to the following:
<b style="color : red ;">Some Text</b>
which would produce the result:
Some Text
The HTML 'style' attribute can contain one or more CSS declarations - each separated by a semicolon to apply any number of alterations - for example:
<b style="color : red ; font-size : 9pt ;">Some Text</b>
produces the result (or something very similar to):
Some Text
Font[]
Size[]
Font size can be changed by using the font-size property:
style="font-size:10pt;"
Font sizes can be specified in pt (points) or px (pixels).
Color[]
Font color can be changed by using the color property:
style="color:#ff0000;"
Font colors can be specified using color names, hexadecimal values (as in the above example) or the equivalent RGB values - like so:
style="color:rgb(255,0,0);"
Face[]
A specific font face can be specified using the font-family property:
style="font-family:arial;"
For font names using more than word the font name must be enclosed in quotes - like so
style="font-family:"Times New Roman";"
Since not all fonts are available to all users it is recommended that if you specify a specific font you accompany it with a generic font family (like serif or sans-serif) - for example:
style="font-family:"Times New Roman", serif;"
style="color:#ff0000;"
Font colors can be specified using color names, hexadecimal values (as in the above example) or the equivalent RGB values - like so:
style="color:rgb(255,0,0);"
Weight[]
Text can be made bold using the font-weight property - for example:
style="font-weight:bold;"
There are a number of different values that can be used with the font-weight property which alter the level of boldness applied to the text:
- normal - The text is rendered normally.
- bold - The text is made bold. This is equivalent to using the <b> HTML tag.
- bolder - The text is made bolder relative to the normal text for that element.
- lighter - The text is made lighter relative to the normal text for that element.
Style[]
The style of text can be changed using the font-style property - for example:
style="font-style:italic;"
There are a number of different values that can be used with the font-style property:
- normal - The text is rendered normally.
- italic - The text is italicised.
- oblique - The text is rendered as an oblique font.
Text Decoration[]
Decorative elements like underlining and strikethrough text can be acheived using the text-decoration property - for example:
style="text-decoration:underline;"
There are a number of different values that can be used with the text-decoration property:
- none - The text is rendered normally.
- underline - The text is underlined.
- overline - The text is rendered with a line above it.
- line-through - The text is crossed through with a line.
- blink - The text blinks periodically.
Alignment[]
Horizontal Alignment[]
Both text and images can be aligned horizontally using the text-align property - for example:
style="text-align:center;"
There are a number of different values that can be used with the text-align property:
- left - The text is aligned to the left hand side.
- center - The text is centered.
- right - The text is aligned to the right hand side.
- justify - The text is aligned along both the left and the right hand side.
Vertical Alignment[]
CSS can also be used to vertically align text and images using the vertical-align property - for example:
style="vertical-align:middle;"
There are a number of different values that can be used with the vertical-align property:
- top - The text is aligned to the top of the surrounding HTML element.
- middle - The text is aligned to the middle of the surrounding HTML element.
- bottom - The text is aligned to the bottom of the surrounding HTML element.
Overriding HTML Tags With CSS[]
CSS can even be used to override the normal formatting of HTML tags - for example:
<b style="font-weight:normal;">This Text is NOT bold even inside a B tag</b>
or
<center style="text-align:right;">This Text is RIGHT aligned even inside a CENTER tag</center>
Advanced CSS for StumbleUpon[]
Borders[]
Any HTML element can be given a border using the CSS border property - for example:
<b style="border: solid 2px #ff0000;">This Text Has A Red Border</b>
The above style attribute would render a solid, 2 pixel wide, red border around the text.
The border property is known as a compound property. Compound properties are used as a 'shorthand' to allow many properties to be set at the same time - in this case it's the border style, width and color. One could also use the individual border properties for each side of the element, as in the following example, but the shorthand technique saves time:
<b style="border-top: solid 2px #ff0000;
- border-left: solid 2px #ff0000;
- border-bottom: solid 2px #ff0000;
- border-right: solid 2px #ff0000;">This Text Has A Red Border</b>
Backgrounds[]
Any HTML element can be given a background using one of two CSS properties - depending on the type of background required.
Coloured Backgrounds[]
Coloured backgrounds can be created using the CSS background-color property - for example:
<center style="background-color: #ff0000;">This Text Has A Red Background</center>
Image Backgrounds[]
Background images can be created using the CSS background-image property - for example:
<center style="background-image: url('http://domain.com/file.jpg') ;">This Text Has An Image Background</center>
Caution should be used when using images as backgrounds. Any background images used must be made as small as possible (the smaller they are the less time they take time to download). For this reason CSS also provides the background-repeat property to allow images to be 'tiled' either horizontally, vertically or both - so that the original image size can be kept low. The above example could be rewritten in the following manner to take advantage of image tiling:
<center style="background-image: url('http://domain.com/file.jpg'); background-repeat: repeat-both;">This Text Has A Tiled Image Background</center>
The background-repeat property can take one of three values:
- repeat-x - The background image is tiled horizontally.
- repeat-y - The background image is tiled vertically.
- repeat-both - The background image is tiled both horizontally and vertically.
Image Opacity[]
Image opacity can be specified in both Firefox and Internet Explorer. For Firefox use the opacity:0.0; property where the number is in range from 0.0 to 1.0. For Internet Explorer use the filter:alpha(opacity=00) property. Higher numbers indicate increased opacity.