Hypergurl Using CSS to Align Text and Images.
Indenting Text. Setting Margins and Borders.
Style of Borders. Floating Elements





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>

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.

You

can 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 Your

example 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

 
Search Site
Custom Search





Site design copyright 2000 - 2013 Tanya Puntti Hypergurl.com