Chapter: Internet & World Wide Web HOW TO PROGRAM - The Ajax Client - Cascading Style Sheets (CSS)

Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail

Backgrounds - CSS

CSS provides control over the background of block-level elements. CSS can set a back-ground color or add background images to XHTML elements.

Backgrounds

 

CSS provides control over the background of block-level elements. CSS can set a back-ground color or add background images to XHTML elements. Figure 5.8 adds a corporate logo to the bottom-right corner of the document. This logo stays fixed in the corner even when the user scrolls up or down the screen.

 

      <?xml version = "1.0" encoding = "utf-8"?>

 

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 

      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

      <!-- Fig. 5.8: background.html -->

 

      <!-- Adding background images and indentation. -->

 

      <html xmlns = "http://www.w3.org/1999/xhtml">

 

      <head>

 

      <title>Background Images</title>

 

        <style type = "text/css">

 

body  { background-image: url(logo.gif);

 

            background-position: bottom right;

            background-repeat: no-repeat;

            background-attachment: fixed;

            background-color: #eeeeee }

p          { font-size: 18pt;

            color: #1144AA;

                        text-indent: 1em;     

            font-family: arial, sans-serif; }

        .dark { font-weight: bold }

 

        </style>

 

</head>

      <body>

      <p>

 

      This example uses the background-image,

 

      background-position and background-attachment

 

      styles to place the <span class = "dark">Deitel

 

      &amp; Associates, Inc.</span> logo in the bottom,

 

      right corner of the page. Notice how the logo

 

      stays in the proper position when you resize the

 

      browser window. The background-color fills in where

 

      there is no image.

      </p>

 

      </body>

 

</html>


Fig. 5.8 |  Adding background images and indentation.

 

The background-image property (line 11) specifies the image URL for the image logo.gif in the format url(fileLocation). You can also set the background-color prop-erty in case the image is not found (and to fill in where the image does not cover).

 

The background-position property (line 12) places the image on the page. The key-words top, bottom, center, left and right are used individually or in combination for vertical and horizontal positioning. An image can be positioned using lengths by speci-fying the horizontal length followed by the vertical length. For example, to position the image as horizontally centered (positioned at 50 percent of the distance across the screen) and 30 pixels from the top, use

 

background-position: 50% 30px;

 

The background-repeat property (line 13) controls background image tiling, which places multiple copies of the image next to each other to fill the background. Here, we set the tiling to no-repeat to display only one copy of the background image. Other values include repeat (the default) to tile the image vertically and horizontally, repeat-x to tile the image only horizontally or repeat-y to tile the image only vertically.

 

The final property setting, background-attachment: fixed (line 14), fixes the image in the position specified by background-position. Scrolling the browser window will not move the image from its position. The default value, scroll, moves the image as the user scrolls through the document.

 

Line 18 uses the text-indent property to indent the first line of text in the element by a specified amount, in this case 1em. An author might use this property to create a web page that reads more like a novel, in which the first line of every paragraph is indented.

 

Another CSS property that formats text is the font-style property, which allows the developer to set text to none, italic or oblique (oblique is simply more slanted than italic—the browser will default to italic if the system or font does not support oblique text).

 

Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail


Copyright © 2018-2020 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.