Thursday, November 19, 2009

For example:

Instead of defining fonts and colors each time you start a new table cell, you can define a style and then, simply refer to that style in your table cells.

Compare the following examples of a simple table:

Classic HTML

Code Here : 
this is line 1
this is line 2
this is line 3



 With CSS (assuming that a selector called subtext is defined)


this is line 1
this is line 2
this is line 3



An example of a typical font definition would be:

B {font-family:arial, helvetica; font-size:12px; font-weight:bold;}

But since all font attributes can actually be expressed with the font property we could actually write it this way:

B {font:arial, helvetica 12px bold}

     COLORS

As you can see, the above CSS properties can replace all text formatting that can be done with plain HTML with one exception: the color.

The color is not part of the font collection in CSS - rather it has its own definition.

If you want to add a color to the text in the above example you'd do it this way:


B {font:arial, helvetica 12px bold; color:red}

 Setting background colors

Background colors are defined similar to the colors mentioned above. For example you can set the background color of the entire page using the BODY selector:


 BODY {background-color:#FF6666;}

Setting a background image
CSS lets you set a background image for both the page and single elements on the page.

In addition, CSS offers several positioning methods for background images.

You can define the background image for the page like this:



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

Positioning a background
Background positioning is done by entering a value for the left position and top position separated by a space.

In this example the image is positioned 75 pixels from the upper left corner of the page:
 

BODY {background-image:url(myimage.gif); background-position: 75px 75px;}

Fixing a background
You can fixate an image at a certain position so that it doesn't move when scrolling occurs.
  

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

Setting multiple background values
Rather than defining each background property with its own property you can assign them all with the use of the background property.

Look at this example:
  

BODY {background:green url(myimage.gif) repeat-y fixed 75px 75px;}


 

No comments:

Css code

How it works:

A style is a definition of fonts, colors, etc.

Each style has a unique name: a selector.

The selectors and their styles are defined in one place.

In your HTML contents you simply refer to the selectors whenever you want to activate a certain style.

For example:

Instead of defining fonts and colors each time you start a new table cell, you can define a style and then, simply refer to that style in your table cells.

Compare the following examples of a simple table:

Classic HTML









this is line 1
this is line 2
this is line 3


With CSS (assuming that a selector called subtext is defined)





this is line 1
this is line 2
this is line 3


SELECTORS

Selectors are the names that you give to your different styles.

In the style definition you define how each selector should work (font, color etc.).

Then, in the body of your pages, you refer to these selectors to activate the styles.

For example:








This is normal bold

This is headline style bold




TAG SELECTORS


The general syntax for an HTML selector is:

HTMLSelector {Property:Value;}

For example:








This is a customized headline style bold




CLASS SELECTORS

The general syntax for a Class selector is:

.ClassSelector {Property:Value;}

For example:








class="headline"
>This is a bold tag carrying the headline class


class="headline">This is an italics tag carrying the headline class