Home >> Tutorials/FAQs >> CSS Tutorials >> Index

CSS Tutorials - HTML Formatting Model: Block, Inline and Floating Elements

By: FYICenter.com

Part:   1  2  3  4  5  6  7   8  9 

(Continued from previous part...)

How To Add Images to Backgrounds?

One image can be specified to the background at a particular position. It can also be repeated in horizontal direction, vertical direction, or both directions with the following style properties:

  • {background-image: url(moonrise.jpg)} - Specify an image to the background.
  • {background-repeat: no-repeat} - Indicates that the image not to be repeated.
  • {background-position: top right} - Indicates that the image to be positioned at the top right corner.
  • {background-attachment: scroll} - Indicates that the image to be scrolled as the content.
  • {background: transparent scroll} - Indicates that the image to be scrolled as the content.
  • {background: transparent url(moonrise.jpg) no-repeat scroll top right} - Sets all background properties in one command.

The following tutorial exercise shows you a comparison of transparent and non-transparent backgrounds:

<html><head>
<style type="text/css">
  H1 {font-size: 20px}
  DIV.page {width: 450px; border: 1px solid black}
  TABLE#out {background-color: #ffdddd}
  TD#box {border: 1px solid black}
  P#one {width: 180px; height: 300px; 
    margin: 10px 10px 10px 10px;
    background: transparent url(moonrise.jpg)
      no-repeat scroll top right}
  P#two {width: 180px; height: 300px; 
    margin: 10px 10px 10px 10px;
    background: #ddddff url(moonrise.jpg)
      repeat-y scroll top right}
</style>
</head><body><div class="page">
<H1>Backgrounds with Images</H1>
<table id=out><tr>
<td id=box><p id=one>
Welcome to FYIcenter.com, the resource
center for visitors like you! Hope you like it,
and come back again. Submit your favor resources
to FYIcenter.com to share with others. 
Remember to tell your friends about FYIcenter.com.
</p></td>
<td id=box><p id=two>
Welcome to FYIcenter.com, the resource
center for visitors like you! Hope you like it,
and come back again. Submit your favor resources
to FYIcenter.com to share with others. 
Remember to tell your friends about FYIcenter.com.
</p></td>
</tr></table>
<p align="right">By FYIcenter.com</p>
<div></body></html>

This HTML and CSS document will be displayed as:
           

What Is the Text Paragraph Formatting Model?

A text paragraph is divided into lines to for a stack of line boxes. Each line box is a rectangular with a line height and sharing the same width as the content box of the enclosing block element.

The default line height is the text font size plus a leading space with a half leading space placed on top of the text, and another half below the text.

Line height can be changed through the CSS style property, line-height, as shown in the following tutorial exercise:

<html><head>
<style type="text/css">
  H1 {font-size: 20px}
  DIV.page {width: 425px; border: 1px solid black}
  TABLE#out {background-color: #ffdddd}
  TD#box {border: 1px solid black}
  P#box {width: 300px; height: 300px; 
    font-size: 14px; 
    line-height: 30px;
    background-color: #ddddff}
  TD.legend#w30 {height: 30px; background-color: #ffffff}
  TD.legend#g30 {height: 30px; background-color: #dddddd}
</style>
</head><body><div class="page">
<H1>Text Paragraph Formatting Model</H1>
<table id=out><tr>
<td id=box><p id=box>
Welcome to FYIcenter.com, the resource
center for visitors like you! Hope you like it,
and come back again. Submit your favor resources
to FYIcenter.com to share with others. 
Remember to tell your friends about FYIcenter.com.
</p></td>
<td valign=top><table cellpadding=0 cellspacing=0>
<tr><td class=legend id=g30>- line 1</td></tr>
<tr><td class=legend id=w30>- line 2</td></tr>
<tr><td class=legend id=g30>- line 3</td></tr>
<tr><td class=legend id=w30>- line 4</td></tr>
<tr><td class=legend id=g30>- line 5</td></tr>
<tr><td class=legend id=w30>- line 6</td></tr>
</table></td>
</tr></table>
<p align="right">By FYIcenter.com</p>
<div></body></html>

Save this document as paragraphModel.html, and view it with a browser, you will see that the text paragraph is wrapped into line boxes, with text placed in the middle of each line box:
           

(Continued on next part...)

Part:   1  2  3  4  5  6  7   8  9 


Selected Developer Jobs:

More...