Handy
Tip: Because
of browser differences, if you have trouble applying margins and
padding to images, try wrapping them in the <DIV> tag and
applying the style direct to the <DIV>
|
 Bookmark
This Page
Cascading Stylesheets Tutorial #8
Using CSS to:
Align Text and Images
Indenting Text
Setting Margins, Padding and Borders
Style of Borders
Floating Elements
The properties on this page work only on block-level elements,
which are tags that define new paragraphs on their own, such as , <P>
<H1> to <H6>, <BLOCKQUOTE> and <UL>.
text-align
Example code ...
<STYLE TYPE="text/css">
<!--
H2 { text-align: center }
-->
</STYLE>
With the text-align property, you control the horizontal alignment of
paragraphs:
A value of left means the element will be left-aligned.
A value of right means the element will be right-aligned.
A value of center means the element will be centered.
A value of justify means the element will be justified.
Most of the properties can also be used on elements such as Graphics,
Java Applets and Quicktime Movies. (A replaced element is any object that
is replaced by other content.)
Sometimes Netscape support CSS properties applied directly to the <img>
tag. To work around this, apply the style to a <DIV> or <SPAN>
tag such as;
<DIV STYLE="text-align: center"><IMG SRC="yourgraphic.gif"></DIV>
vertical-align
Example code ...
<STYLE TYPE="text/css">
<!--
H2 { vertical-align: sub}
-->
</STYLE>
Most browser do not support the vertical align command and the only values
supported by IE 4 + are
sub ..... puts the element in subscript.
super ..... puts the element in superscript.
text-indent
Example code .....
<STYLE TYPE="text/css">
<!--
P { text-indent: 14pt }
-->
</STYLE>
You
can indent your paragraphs using the text-indent property. This paragraph has
the example code applied so you can see it in action.
Works only on block-level elements and can be specified using any of
the length units, such as px, pt, em or percentage values.
Margins and Padding
Example code ....
<STYLE TYPE="text/css">
<!--
H4 { margin-top: 15pt; margin-bottom: 5pt; margin-left: 70pt; margin-right:
10pt }
-->
</STYLE>
Instead of using tables you can use css to control margins and padding.
Every block-level element or replaced element is contained in what the
cascading stylesheets creators call a box.
That box consists of.........
the element itself
the padding around the element
the border around the padding and
the margin around the border.
You can control the padding, border, and margin separately with the properties
of margin-top, margin-bottom, margin-left, margin-right.
These four properties enable you to control the margin around each side
of an element, Here's an example paragraph using the following code;
H4 {
margin-top: 15pt; margin-bottom: 5pt; margin-left: 70pt; margin-right: 10pt }
Each margin can be set differently or you can choose to set just
one margin side and let the browser use its default margin sizes for the other
sides.
You can apply margins to graphics as well as to text and give
them values using all the usual methods of pt, px, in, mm, cm, percent, etc.
You can create an overlapping effect by using negative margin values, Here's
an example where I have used a "top-margin" of -45pts for the words
" text to overlap".
YOU
CAN GET
TEXT TO OVERLAP
Because of browser differences, if you have trouble applying margins and padding
to images, try wrapping them in the <DIV> tag and applying the style direct
to the <DIV>
padding-top,
padding-bottom, padding-left, padding-right
Example code
....
<STYLE TYPE="text/css">
<!--
H2 { padding-top:
30pt; padding-right: 10pt }
-->
</STYLE>
Padding is
just like margin control. You can apply padding size for the top, bottom, left,
and right sides of an element. Just as with margins, you can use any length units
or percentage values. You can't use negative values for padding as you can
for margins.
Borders
Example code ....
<STYLE TYPE="text/css">
<!--
H5 { border-top-width: 3pt; border-bottom-width: 2pt border-left-width:
2pt; border-right-width: 2pt }
-->
</STYLE>
You can
place borders around text and images using the properties of;
border-top-width
border-bottom-width
border-left-width
border-right-width
Note
the borders around this paragraph using the example code! If you can't see any
borders then your browser doesn't support the border properties. See styles of
borders below if using
IE 4+.
When specifying width, you can use
any of the length values usede before or you can use keywords such as thick, thin
and medium. If all sides of the border are to be the same width use { border-width:
2pt } You can make each side a separate width, if you dont want a certain side
to be bordered, specify that as 0.
Style of borders
You can also specify the style of the border line:
This is required if using IE 4.+
<STYLE TYPE="text/css">
<!--
H3 { border-style: double; border-width: 2pt }
-->
</STYLE>
The values are: solid, double, dotted, dashed,
groove, ridge, inset, and outset and you can add color
also
<STYLE TYPE="text/css">
<!--
H3 { border-color: green; border-width: 2pt }
-->
</STYLE>
You can use the color names or hexadecimal values. You can color
each side differently, one color for the top, one for the bottom, etc. Netscape
doesn't support multiple colors. If border-color isn't used, then the border will
take on the color of the element itself.
Floating elements.
Example code ....
<STYLE TYPE="text/css">
<!--
H1 { float: left }
-->
</STYLE>
The float property enables you to flow text around an element, including images
and any block-level text as well.
Youcan
see what I mean by floating elements with this example. Of course you can float
the element to the right as well.
If the floating element has too little
space around it, you can add padding with one of the properties from above.
If you want to wrap one paragraph around a floating element but don't want
the next paragraph to wrap, use the clear property { clear: left }
Here
Is Yourexample of one paragraph
around text or an image
that's floating left. You can see that this paragraph
I have set clear, so the browser ensures that the left side is clear of all floating
elements before displaying the paragraph.
Next CSS tutorial ...
Applying Colors,
Background Positioning
|
|
Website
Design
|
