|
|
|
|
| Introduction
|
Styles can be incorporated
into a html document to decorate text, borders, backgrounds, anchors
as well as to specify complex layouts. In this section, some useful
style properties will be demonstrated using the style
attribute which is placed inside normal html tags such as
<body>, <td> and <p>.
The general syntax for specifying the style attribute is
style="property : value". Additional properties have to
be separated by colons. A second property can be added in the
following manner: style="property1 : value; property2:
value". Once you are familiar with these useful
properties, you should use Cascading
Style Sheets instead of the style attribute in order to be more
efficient.
|
| Text
Properties |
| We have already formatted text
using tags such as <b> and <font>.
However, styles allow you to incorporate more sophisticated
formatting. In order to format a text segment, you can enclose
it with the <span> tag. In the
<span> tag, you must place the style attribute
which will in turn specify the style to be used. Instead of
using the <span> tag, you may also place the
style attribute within a text container, such as a table or
table cell denoted by the <td> tag. Consider the
following example: |
<body>
<span style="letter-spacing:10px;
text-decoration:underline;">
Hello Everybody ...
</span>
<br><br>
<table bgcolor="#FFFF99">
<tr>
<td style="word-spacing:25px;
text-transform:uppercase;">
more formatted text
</td>
</tr>
</table>
</body> |
Hello
Everybody ...
| |
| letter-spacing |
Specifies the number of pixels
between letters. Use normal for normal
letter spacing. |
| word-spacing |
Specifies the number of pixels
between words. Use normal for normal word
spacing. |
| text-decoration |
Use underline,
overline, line-through or
blink to decorate the text. |
| text-transform |
Transforms the letters in a
specified manner. Choices are capitalize,
uppercase or lowercase. |
| text-align |
Use left,
right, center, or
justify to align the text relative to the
container. |
| text-indent |
Specifies the amount by which to
indent the first line in pixels or in percent . |
| line-height |
Specifies the height of each line in
either the number of lines, pixels, or percent. |
| white-space |
Specifies how to handle white
spaces. Use pre to handle to apply the
<pre> tag formatting or use nowrap
if you don't want to wrap the text. | |
| Font
Properties |
| The appearance of text
enclosed by the <span> tag or container can be adjusted by
using various font properties. Here are some examples:
|
<body>
<span style="font-family:Times;
font-style:oblique;font-size:24;
font-stretch:narrower;">
Styles Rule!
</span>
</body>
|
Styles
Rule! | |
| font-family |
Specifies the font of the
text. Use one of these font families:
serif, sans-serif,
monospace, cursive or
fantasy. You can also use a common font name
such as Arial or Times. |
| font-style |
Use italic,
oblique or normal to specify font
style. |
| font-size |
Specifies the font size absolutely,
or express it as a percentage of the parent font. |
| font-stretch |
Options for font-stretch include
narrower, condensed,
semi-condensed, extra-condensed,
expanded, semi-expanded,
extra-expanded, or normal. |
| font-variant |
This property can be used to express
the font in small-caps. Otherwise use
normal (default). |
| font-weight |
Specify the weight of the font as
normal, bold,
bolder, or
lighter. | |
| Border, Background, Foreground and Sizing
Properties. |
| Styles offer various border,
background, foreground appearance options for containers such as
tables, cells, layers and the html document in general (enclosed by
the <body> tag). In fact, background and
foreground properties can also be applied to text and
anchors. Advanced sizing options are also available.
Consider the following code: |
<body style="margin:30px">
<table style="border-width:thick;
background-color:#00CCFF;">
<tr>
<td style="border-top-color:#99FF99;
padding:10px; color:#003366;
border-style:solid;">
This foreground color
in hex is 003366. The
padding here is 10px.
</td>
</tr>
<tr>
<td style="border-bottom-style:dotted">
Bottom border is dotted
</td>
</tr>
</table>
</body>
|
| This
foreground color in hex is 003366. The padding here is
10px. |
| Bottom border is
dotted | | |
| border-style |
Use one of solid,
dashed, dotted,
double, groove,
ridge, inset or
outset to specify the style of the border.
Use none for no border. |
| border-top-style |
Works like the border-style
property, but used to specify the style of the top border
only. Also border-bottom-style,
border-left-style,
border-right-style. |
| border-width |
Specifies the width of the border
with one of the following options: thin, thick
or medium. |
| border-top-width |
Works like the border-width
property, but used to specify the width of the top border
only. Also border-bottom-width,
border-left-width,
border-right-width. |
| border-color |
Specifies the color of the
border. |
| border-top-color |
Works like the border color
property, but used to specify the color of the top border
only. Also border-bottom-color,
border-left-color and
border-right-color. |
| border-collapse |
Use collapse to leave
no spacing for the border. | |
| background-color |
Specifies the background color of a
container, text, or link. |
| background-image |
Specifies the URL of the background
image of a container. |
| background-repeat |
Specifies whether the background
image is repeated in the background. Normally it is
repeated. But by using this property you can either set
the background image to repeat horizontally by using
repeat-x, vertically by using
repeat-y and both ways using
repeat. Using no-repeat
causes the background image not to repeat. |
| background-attachment |
Specifies whether the background
image scrolls as the user scrolls down the page. Set
this property to either scroll or
fixed. |
| color |
Specifies the foreground
color. For example if color: blue; was specified
for a container, then the text inside the container will be in
blue. | |
| height |
The height of a container in pixels
or percent. |
| width |
The width of a container in pixels
of percent. |
| margin |
Usually used in the body tag, it
specifies the margins of a document in pixels or
percent. If one value such as margin: 25px; is
used, then the margin on all sides will be 25 pixels. If
two values such as margin: 25px 30px; is used, then the
top and bottom margins will be 25 pixels while the left and
right margins will be 30 pixels. If four values are
used, each margin in the order top, bottom, left and right
will be specified. |
| margin-top |
Specifies in pixels or percent the
top margin of a web page. Also
margin-bottom, margin-left and
margin-right. |
| padding |
Specifies the amount padding between
the border and the contents of a container in pixels or
percent. You can use up to four values to specify the
amount of padding on each side (refer to the margin
property for details). |
| padding-top |
Specifies the amount of padding
between the top border and the contents of the container in
pixels or percent. Also padding-bottom,
padding-left and
padding-right. | |
<<
Frames | Back
to HTML Tutorial Table of Contents | Cascading
Style Sheets >>
|
| Home | Programs
| Tutorials
| Courses
| Links
|
Copyright (C) 2004 Udesh Senaratne
| |
