The foreground color (text color) of elements is described via the color property. The colors can be specified in very different ways. Traditionally, hexadecimal values are used. These values always start with a preceding hash. This is usually followed by three pairs of numbers and/or letters. These stand for red, green and blue. Colors are therefore always specified according to the following scheme:
RRGGBB
The specification #ffffff results in a white color. If you use #000000, black is displayed as the color. In "sensible" HTML editors, there are corresponding color selectors.
You can use these to determine the hexadecimal codes. There are also corresponding overviews for colors on numerous websites (e.g. http://www. farbtabelle.net/).
In CSS, it is possible to shorten the notation of hexadecimal color values. However, this principle cannot be applied to all color values. The whole thing only works if a value consists of three identical pairs. Typical examples of this are the color definitions for black and white. These are usually written like this:
.black { color: #000000; } .white { color: #ffffff; }
This syntax can also be shortened.
.black { color: #000; } .white { color: #fff; }
RGB values are also permitted in CSS. Here you specify the decimal values from 0 to 255, which must be separated by commas. The order of the color specifications corresponds to that of the hexadecimal colors.
a { color: rgb(100%, 100%, 100%); background: rgb(0, 0, 0); }
As the example shows, percentages are also possible, although this is rarely used in practice.
Another variant for color definitions are color keywords. Here are some examples:
- black
- red
- blue
- yellow
- white
- green
A corresponding definition could look like this:
p { color: white; background: black; }
Note that the range of available color keywords has been significantly expanded with CSS3. CSS3 has adopted the color names from the SVG specification. You can find an overview of the available color names at http://www.w3.org/TR/SVG/types.html#ColorKeywords.
Define background
Background is a summary of the following possible values, which will be presented in detail later in this tutorial:
- background-attachment
- background-color
- background-image
- background-position
- background-repeat
The individual specifications must be separated from each other by spaces. The order in which this is done does not matter. Not all values need to be specified.
An example:
p { background: transparent url(logo.jpg) scroll repeat 0% 0%; }Background colors
The background-color property is used to assign a background color to an element.
div { background-color: #009999; }
Enter the desired color as the value.
Background graphics
background-image defines a graphic as the background. If this property is noted in an external CSS file, the relative path information refers to the directory in which the CSS file is located.
- none - no background graphic
- URI - path to the graphic
Here is another example.
<div style="background-image:url(back.jpg); margin:20px; padding:20px"> Welcome to PSD-Tutorials.de! </div>
Please proceed with caution when using background images. Because overly eye-catching background images do not exactly make the text easier to read.
Of course, there are websites where it's all about the look. Here you can certainly work with more eye-catching backgrounds.
Scrolling backgrounds
For longer elements, the background image moves as the page scrolls. This can be prevented with background-attachment.
- fixed - scroll along
- scroll - the background graphic remains fixed and is aligned with the browser window (viewport).
The background-attachment property is of course usually used in combination with background-image.
Here is an example:
div.fest { background-image: url(background.gif); background-repeat: no-repeat; }The position of the background
The background-repeat property is used to define the position at which the background should start. The reference point is the element for which the graphic was defined.
- Percentage - one or two values that determine the distance of the graphic from the top left corner of the element. With two values, the first represents the horizontal distance, the second the vertical distance. The reference point is not the top left-hand corner of the graphic, but a point within the graphic, which is also specified by the x/y values.
- Length specification - determines the distance of the graphic from its top left corner to the top left corner of the element. One or two values are permitted. If two values are specified, the first determines the horizontal distance, the second the vertical distance.
The following keywords are also possible:
- left - horizontal left-aligned
- center - centered
- right - horizontal right-aligned
- top - vertically flush top
- bottom - vertically flush at the bottom
Here is an example of how something like this might look:
p { background-position: 8em top; }Repeating background images
Whether and how a background image is repeated if it is smaller than the displayed area can be determined with background-repeat.
- repeat - the background image is repeated vertically and horizontally to fill the entire element.
- repeat-x - the graphic is only repeated horizontally.
- repeat-y - the graphic is only repeated vertically.
- no-repeat - the graphic is not repeated.
Here is another example:
body { background-repeat: repeat-y; }
In this case, the graphic is only repeated vertically.
If, on the other hand, repeat-y is used, the repetition is only horizontal.
This tutorial has shown how powerful CSS is when it comes to colors and images.
