Css learning tutorial

More on Backgrounds in CSS

admin — Sun, 31 May 2009 18:34:32 +0000

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 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;
)

Introduction to Colors and Backgrounds

admin — Wed, 27 May 2009 14:05:11 +0000

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

. The following code sets the color of

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 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' 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 - and the elements

will be assigned different background colors.

body (
background-color: # FFCC66;
)

h1 (
color: # 990000;
background-color: # FC9804;
)

Note that the element

has two properties and have assigned them with a semicolon as a separator.

Applying CSS in HTML documents

admin — Mon, 25 May 2009 10:33:06 +0000

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:

Example </ title> </ head> <body style="background-color: #FF0000;"> That is a red page. </ 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> That is a red page. </ 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> ... </article> </main></body></html>