Learn web designing (1) ~ How To Design a body

The body tag can include many things, and I am going to try to explain them briefly..

Code :-

body { color: COLOR1;
background-color: COLOR2;
background-image: url(''/URL.jpg'');
background-repeat: repeat-TYPE1;
background-position: TYPE2;
font-weight: TYPE3;
font-family:NAME;
font-size: SIZE;
padding: WIDTH;
margin: WIDTH1;
border: WIDTH2 STYLE COLOR3;
maximum-width: WIDTH3; }

These body attributes are the common styles

that we saw in every page now lets try to

explain them..

•  COLOR1 - Name/Code of text colour

•  COLOR2 - Background colour

•  COLOR3 - Border colour

¤ URL - Image url for background

¤ TYPE1 - Backgroung repeat type, the

posible values are- repeat-x, repeat-y, no-

repeat, repeat

'repeat-x' indicate that the background image

will repeat horizontally or X-axis only once!

repeat-y' this will repeat the image vertically

or Y-axis in one column

'no-repeat' this indicates that the background

will not repeat.

'repeat' this indicates that the bg image will

repeat in X and Y-axis.

¤ NAME - font family name, Arial,

verdana...and more

Also available to used background: url

('URL.jpg') repeat-TYPE COLOUR POSITION;

TYPE2 - backgroung position (used this

only when TYPE1 in 'no-repeat') and the

values are- left, right, center, bottom, top, top

left, top right, top center.....etc..

TYPE3 - font weight weather bold, small or

normal

• 
  

  
  

  
  

  WIDTH - Padding width
• 
  

  WIDTH1 - Margin width
• WIDTH2 - Border width

STYLE - border style ( solid, dotted,

dashed, outset, inset, ringe...etc)

COLOR3 - border colour

WIDTH3 - the fix maximum width of your

page..

Now once you have designed the above code with your wish, go to edit site > Global setting > head tags and put the code between <style>........</style>

For example :-

[code]<style type="text/css">

body { color: COLOR1;

background-color: COLOR2;

background-image: url(''/URL.jpg'');

background-rep

Share on Google Plus

About Sandeep singh

Creative Tricks is created by Sandeep Singh – 2nd year engineering student from NIIT (Vikaspuri, India). I’m share a common dream of making Creative Tricks a top technology Site/Blog of India.