May 31st, 2009
The property ‘background-image’
The CSS property background-image is used to set a background picture. As an example of a background image, we use the butterfly. You can, of course, use any other image that you like. To use the picture with the butterfly as a background image on your website you need to simply add to the <body> the background-image property and assign the location of the image.
body (
background-color: # FFCC66;
background-image: url ( “butterfly.gif”);
)
h1 (
color: # 990000;
background-color: # FC9804;
)
Repetition of the background image: the property ‘background-repeat’
Have you noticed in the above example, that by default the butterfly, repeated both horizontally and vertically until the entire screen is covered? The background-repeat property controls this behavior.
background-repeat: repeat-x The image is repeated horizontally
background-repeat: repeat-y The image is repeated vertically
background-repeat: repeat The image is repeated both horizontally and vertically
background-repeat: no-repeat The image is not repeated
For example, in order to prevent the repetition of a background image our code should look like:
body (
background-color: # FFCC66;
background-image: url ( “butterfly.gif”);
background-repeat: no-repeat;
)
h1 (
color: # 990000;
background-color: # FC9804;
)
Posted in Uncategorized | No Comments »
May 27th, 2009
In this lesson you will learn how to adjust colors and background colors on your web page. We will also consider more advanced methods, such as positioned and controlled backgrounds. The following CSS properties are explained:
- Color
- Background-color
- Background-image
- Background-repeat
- Background-attachment
- Background-position
- Background
Foreground color: the property ‘color’
The color property describes the foreground color of an element. Suppose we want that all headings in a document are in red. All titles are compatible with the HTML element <h1>. The following code sets the color of <h1> elements to red.
h1 (
color: # ff0000;
)
Colors can be used as hexadecimal values, as in the example above (# ff0000), with the English color names ( “red”) or as RGB values (rgb (255,0,0)).
Background Color: the property ‘background-color’
The background-color property describes the background color of an element. The element <body> contains any content of an HTML document. Therefore, in order to set the background color of the whole page you need to change the property ‘background-color’ <body> for the element to be allocated.
You can also use other elements, such as Headers or plain text to assign a background color. In the following example, the <body> - and the elements <h1> will be assigned different background colors.
body (
background-color: # FFCC66;
)
h1 (
color: # 990000;
background-color: # FC9804;
)
Note that the element <h1> has two properties and have assigned them with a semicolon as a separator.
Posted in Uncategorized | No Comments »
May 25th, 2009
There are three ways that you can use CSS in an HTML document. These methods are all described below. We recommend that you focus on the last of the three options.
Method 1: In-line (style attribute)
One way of inserting CSS to a HTML document is with the attribute style. In the above example with the red background, building site, it can be as follows:
<html>
<head>
<title> Example </ title>
</ head>
<body style=”background-color: #FF0000;”>
<p> That is a red page. </ p>
</ body>
</ html>
Method 2: In-document (tag-style)
Another way is the CSS code in the HTML with <style> tag involved, for example:
<html>
<head>
<title> Example </ title>
<style type=”text/css”>
body (background-color: # FF0000;)
</ style>
</ head>
<body>
<p> That is a red page. </ p>
</ body>
</ html>
Method 3: External (referring to a stylesheet)
The recommended method is to use a so-called external stylesheet to refer to. In all examples of this tutorial we will apply this method. An external stylesheet is simply a text file with the extension “.Css”. Like any other file, you can keep a stylesheet on your web server or your hard drive.
Let’s say your stylesheet called style.css is located in the folder “style”. The trick in the whole thing is to refer from the HTMLÂ document (default.htm) to the stylesheet (style.css). Such a reference can be used with a line of HTML code that looks like that:
<link rel=”stylesheet” type=”text/css” href=”style/style.css” />
You see, the path to our stylesheet is using the href attribute specified. The line of code must be written in the header of the HTML document, between the <head> and </ head> tags. It should be inserted like this:
<html>
<head>
<title> My Document </ title>
<link rel=”stylesheet” type=”text/css” href=”style/style.css” />
</ head>
<body>
…
Posted in Uncategorized | No Comments »