Styling Colors and Backgrounds Using CSS


As you’d expect, CSS supports many styles to set colors and backgrounds. Here’s a list of the most popular color and background styles:

  • color: Sets the foreground color (in hexadecimal format, like #FFFFFF), or names of colors.

  • background-color: Sets the background color (in hexadecimal format, like #FFFFFF), or names of colors.

  • background-image: Sets the background image (as a URL).

  • background-repeat: Specifies whether the background image should be tiled, set to repeat, repeat-x, repeat-y, or no-repeat.

  • background-attachment: Specifies whether the background scrolls with the rest of the document, set to scroll or fixed.

  • background-position: Sets the initial position of the background, set to top, center, bottom, left, or right.

colorStyles.html is an example that puts these styles to work:

 <html>     <head>         <title>             Styling foregrounds and backgrounds using CSS         </title>     </head>     <body style="background-color: #55DDDD">        <div align="left">             CEO             <br>             Terrific HTML Designs, Inc.             <br>             New York        </div>        <p>            Dear you:            <div align="center"              style="color: #FF0000; background-color: #FFFFFF;              font-style: italic">            <br>                How's this for styling?            <br>            <br>            </div>            <div align="right">                <p>                CEO                <br>                Exceptional CSS Styles, Inc.                <br>                San Francisco            </div>     </body> </html>

You can see colorStyles.html at work in Figure 10.9.

image from book
Figure 10.9: Styling colors using CSS

Note 

You can specify colors using the standard HTML color triplets like this: #rrggbb. In CSS, you can also specify colors using the rgb function, where you pass three color values to that function: red, green, and blue values, which range from 0 to 255.

Here’s an example, colorTable.html, which displays colors in a table:

 <html>     <head>         <title>             Setting colors         </title>     </head>     <body style="background-color: #55DDDD">       <h1>Setting colors</h1>       <table border="2" width="400" height="200"         style="text-align:center">           <tr>               <th style="background-color: rgb(255, 0,                 0)">Now</th>               <th style="background-color: rgb(255, 0,                 0)">is</th>               <th style="background-color: rgb(0, 255,                 0)">the</th>               <th style="background-color: rgb(255, 0,                 0)">time</th>           </tr>          .          .          . 

In fact, you can set colors using names in CSS, like red, blue, orange, cyan, white, and so on. Here’s how that works in colorTable.html:

 <html>     <head>         <title>             Setting colors         </title>     </head>     <body style="background-color: #55DDDD">        <h1>Setting colors</h1>        <table border="2" width="400" height="200"          style="text-align:center">            <tr>                <th style="background-color: rgb(255, 0,                  0)">Now</th>                <th style="background-color: rgb(255, 0,                  0)">is</th>                <th style="background-color: rgb(0, 255,                  0)">the</th>                <th style="background-color: rgb(255, 0,                  0)">time</th>            </tr>            <tr>                <td style="background-color: rgb(0, 0,                  255)">Now</td>                <td style="background-color: rgb(0, 0, 0); color:                    rgb(255, 255, 255)">                    is                </td>                <td style="background-color: rgb(0, 255,                  0)">the</td>                <td style="background-color: green">time</td>            </tr>            <tr>                <td style="background-color: rgb(0, 0, 0);                    color: white">                    Now                </td>                <td                  style="background-color: rgb(255, 255,                    255)">is</td>                <td style="background-color: rgb(0, 0, 0); color:                    rgb(255, 255, 255)">                    the                </td>                <td style=                   "background-color: rgb(255, 255, 255)">time</td>            </tr>            <tr>                <td style="background-color: rgb(255, 255,                  0)">Now</td>                <td style="background-color: rgb(0, 0, 0); color:                    rgb(255, 255, 255)">                    is                </td>                <td style="background-color: cyan">the</td>                <td style="background-color: blue">time</td>            </tr>        </table>      </body> </html>

You can see colorTable.html at work (in black and white, anyway) in Figure 10.10.

image from book
Figure 10.10: Setting colors

Besides standard colors like green, red, and so on, most modern browsers support a great number of color names like ivory, sand, viridian, and more. Give it a try!



Ajax Bible
Ajax Bible
ISBN: 0470102632
EAN: 2147483647
Year: 2004
Pages: 169

Similar book on Amazon
HTML, XHTML, and CSS Bible
HTML, XHTML, and CSS Bible
JavaScript Bible
JavaScript Bible
JavaScript Bible
JavaScript Bible
PHP and MySQL Web Development (4th Edition)
PHP and MySQL Web Development (4th Edition)

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net