1.0 Overview

2.0 Font-Variant

2.1 Description
2.2 Attributes
2.3 Example
2.4 Design Tradeoffs

3.0 Padding-Left

3.1 Description
3.2 Attributes
3.3 Example
3.4 Design Tradeoffs

4.0 Browser Compatibility

5.0 References

'font-variant' and 'padding-left' are properties of font and box properties respectively. Font properties allow the designer to manipulate the appearance of text within an HTML document and box properties manipulate the positioning of boxes that represent HTML elements. When these properties are used in Cascading Style Sheets (CSS) level 1, it gives the designer the ability to assign font variants and padding to any HTML tag or set of tags.

2.1 Description:

The font-variant property allows the font to be displayed in either normal or small-caps format. The normal format, which is the default value, looks exactly like the specified or default font. However, the small-caps format will display all lowercase letters in a capitalized form, yet at a smaller scale. The font-variant property does not have an effect on uppercase letters, numbers, and special symbols. Only lowercase alphabetic characters will be altered by the font-variant property.

2.2 Attributes:

Value:	normal | small-caps
Default:	normal
Applies to:	All Elements
Inherited:	Yes
Percentage Values:	N/A

2.3 Example:

The following example highlights the difference between the default font without the font-variant style property, the default font with the font-variant value set to 'normal', and finally the default font with the font-variant set to 'small-caps'.

HTML code	Output
This line is an example of the default font and not specifying the font-variant property.	This line is an example of the default font and not specifying the font-variant property.
<span style="font-variant:normal">This line is an example of the default font with the font-variant value set to 'normal'. </span><br>	This line is an example of the default font with the font-variant value set to 'normal'.
<span style="font-variant: small-caps">This line is an example of the default font with the font-variant value set to 'small-caps'.</span>	This line is an example of the default font with the font-variant value set to 'small-caps'.
Example 1.0

 

2.4 Design Tradeoffs:

Since small-caps only affect lowercase letters, make sure that you format your text in a readable way. Consistency is the key when applying the small-caps property. Any characters (i.e., special characters or symbols) other than lowercase will not be affected by this property so they should only be used with discretion. Only specify the 'normal' value when necessary since the font-variant is 'normal' by default.

3.1 Description:

The padding-left property provides the HTML element with a buffer of whitespace to the left of the element depending on the value provided. Length or percentage values are valid for this property. Length is specified in pixels (px) and percentages are specified in percent (%). Padding values cannot be negative.

3.2 Attributes:

Value:	<length> | <percentage>
Default:	0
Applies to:	All Elements
Inherited:	No
Percentage Values:	Refer to width of closest block-level ancestor

3.3 Example:

The following example illustrates the difference of the <h2> & <img> tag with and without the padding-left.

HTML code	Output
<span style="padding-left=10%"> <h2>This heading has 10% left padding</h2> </span><br>	This heading has 10% left padding
<h2>This heading has no padding</h2>	This heading has no padding
<span style="padding-left=35px"> <img src="../../images/four_star.gif" width="65" height="15"> </span>
<img src="../../images/four_star.gif" width="65" height="15">
Example 1.1

 

3.4 Design Tradeoffs:

Although there is no limit to the amount of padding that can be applied to an element, it is generally a safe assumption that most users will have monitors with a 800x600 resolution. Therefore, take that into account when using a pixel or percentage value to provide padding. When applying the padding value, the offset of the padding is the closest block-level element. If the percentage or pixel value is too large, the element will wrap to the next line which may reduce readability.

The 'font-variant' property works as expected in Internet Explorer 6 and also in Netscape 6.2. However, the 'padding-left' property doesn't work for Netscape 6.2 but does work for Internet Explorer 6.

Table 1.0: Browser Compatibility
	Internet Explorer 6	Netscape 6.2
font-variant	Compatible	Compatible
padding-left	Compatible	Incompatible

5.0 References

• W3C- Cascading Style Sheets, Level 1
• WDG (Web Design Group) Guide To Cascading Style Sheets

 

[View Feedback on this topic]

ICS 415 | Topic Notes | Assignments | Feedback | Links

Last Updated: February 28, 2002