Home / Articles / Programming languages / Markup languages / HTML & CSS / CSS: working with color

CSS: working with color

CSS: working with color
 
CSS: working with color
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


CSS has several parameters to set the color of the text and background areas on a Web page. These color parameters not only replace those in the HTML, but also have additional features. For example, the traditional way to create a colored area, is to use a table. With styles you don’t need to use the tables, but use simple and convenient tools for color management.

Table 1 lists of properties of the elements to set the color.

Table 1. Text and background color management.

Property

Value

Description

Example

color

color

Setting color

P { color: #330000 }

background-color

Color
transparent

Background color

BODY { background-color: #6699FF }

background-image

URL
none

Background image

BODY { background-image: url (bg.gif) }

background-repeat

repeat
repeat-x
repeat-y
no-repeat

Background image repeat

BODY { background-image: url (bg.gif) background-repeat: repeat-y }

background-attachment

scroll
fixed

Background scroll-down with the document

BODY { background-image: url (bg.gif) background-attachment: fixed }

background-position

Percent
Pixels
top
center
bottom
left
right

Start position on the page

BODY { background-position: left top }

Setting the color

When using CSS, you can set the color in three different ways (Colors in HTML).

1. By name

Browsers assign some colors by recognizing their name (Example 1).

Example 1. Setting the color of the element by name.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <style type="text/css">
      p { color: navy; background-color: yellow; }
    </style>
  </head>
  <body>
    <p>Lorem ipsum dolor sit amet...</p>
  </body>
</html>

2. By hexadecimal value

The color can be set by its hexadecimal value, the same way as in HTML (example 2).

Example 2. Setting the color of the element with a hexadecimal value.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <style type="text/css">
      h1 { color: #fc0; }
      p { color: #F9E71A; background-color: #98560F; }
    </style>
  </head>
  <body>
    <h1>Lorem ipsum</h1>
    <p>Lorem ipsum dolor sit amet...</p>
  </body>
</html>

It’s is also possible to use shorter forms, like #fc0. This means that each character is duplicated in the end we get #ffcc00.

3. With RGB

You can get a color by using the red, green and blue colors set in decimal value. The value of each of the three colors can range from 0 to 255. You can also set the color in percentage (Example 3).

Example 3. Setting color of the element in the hexadecimal value.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <style type="text/css">
      p { color: RGB(249, 231, 16); background-color: RGB(85%, 24%, 5%); }
    </style>
  </head>
  <body>
    <p>Lorem ipsum dolor sit amet...</p>
  </body>
</html>

Setting the background color and background image

The background color is set by the parameter background-color, and the image that is used as the background, is specified by the parameter background-image. The default value for the background color is transparent, which sets transparent background. To set the background image an absolute or relative URL of the file is used. It is recommended to specify both the background image and background color that will be used in if the image file is not present.

Example 4. Background color and background image.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <style type="text/css">
      body {
        background-color: #98560F; /* Background color  */
        background-image: url('/images/bg.gif'); /* Path to the background image */
      }
    </style>
  </head>
  <body>
    <p>Lorem ipsum dolor sit amet...</p>
  </body>
</html>

If you’ve specified the background image, the property background-repeat sets its repetition and the way to do it. Valid values are repeat (repetition vertically and horizontally), repeat-x (horizontal), repeat-y (vertical) no-repeat (only one picture, without repetition), as shown in Example 5.

Example 5. Repetition of the background image.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <style type="text/css">
      body {
        background-image: url('/images/bg.gif'); /* The path to the background image */
        background-repeat: repeat-y; /* repeat background vertically */
      }
    </style>
  </head>
  <body>
    <p>Lorem ipsum dolor sit amet...</p>
  </body>
</html>

In this example, the background image is repeated vertically.

The background position is set by the parameter background-position. It has two values, the horizontal position (can be - right, left, center) and vertical (can be - top, bottom, center). The position can also be specified in percents, pixels, or other absolute units (Example 6).

Example 6. Background position.

<<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <style type="text/css">
      body {
        background-attachment: fixed; /* Attaching the background */
        background-image: url('mybg.gif'); /* The path to the background image */
        background-repeat: no-repeat; /* Undo the repetition of the background */
        background-position: right bottom; /* Position of the background */
      }
    </style>
  </head>
  <body>
    <p>Lorem ipsum dolor sit amet...</p>
  </body>
</html>

In this example, the background will be placed in the lower right corner of the page. If you need to set an image in the upper left corner, just ask the set form: background-position: left top.

Parameter background-attachment: fixed pins the background that it would remain on the same position when scrolling the contents of the browser window.


 

Read also

HTML colors

HTML colors

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation