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 Specify Is the Color of the Margin Area?

CSS doesn't allow you to specify the color of the margin area of a block element. The color of the margin area is transparent. It means that the background color or background image of the parent element will show up in the margin area.

How To Specify Is the Color of the Padding Area?

CSS doesn't allow you to specify the color of the padding area of a block element. The padding area is part of the background of the block element. In another word, the padding area and the content box share the same background.

What Are the Background Properties of a Block Element?

The background of a block element can be formatted in different ways:

  • Transparent to show the background of the parent element.
  • Non-transparent background with a specified color.
  • A single image at a specific location and other area to be transparent or non-transparent.
  • A image repeated horizontally and other area to be transparent or non-transparent.
  • A image repeated vertically and other area to be transparent or non-transparent.
  • A image repeated horizontally and vertically.

How To Set Background to Transparent or Non-transparent?

If you want to set the background of a block element to be transparent or non-transparent, you can use the background-color style property as shown below:

  • {background-color: transparent} - Sets background to be transparent.
  • {background-color: #ddddff} - Sets background to be non-transparent with a light blue color.

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-color: transparent}
  P#two {width: 180px; height: 300px; 
    margin: 10px 10px 10px 10px;
    background-color: #ddddff}
</style>
</head><body><div class="page">
<H1>Transparent and Non-transparent Backgrounds</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:
           

(Continued on next part...)

Part:   1  2  3  4  5  6   7  8  9 


Selected Developer Jobs:

More...