CSS online training course

CSS lesson 8, Background and font training

Background attachment

When you are using a image as background for your page when you are scrolling you can see the image moving up and down with you as you scroll. When you want the image to be fixed and not move you need to use a background attachment. This way the image will stay fixed and wont move when the page is moving.

The values for background attachment are :
  • scroll
  • fixed
  • inherit

Most used is the scroll command. If you dont want the image to move when you scroll down then :
body {background-image: url(image.gif); background-attachment:fixed;)
Now the page will move independently from the image.

Background position

When you want an image at a certain place in the background you can use ''background-position". Dont forget to put background-repeat to "NO". If no values are given the browser will automaticly place the image in the top left corner. These are the values 0%, 0%.
The background values :
  • percentage
  • width in pixels
  • center
  • center top
  • center center
  • center bottom
  • top
  • right
  • right top
  • right center
  • right bottom
  • left
  • left top
  • left center
  • letf bottom
  • x% y%
  • xpos ypos
  • inherit

A example to put a background image on the page :
body {background-image:url(image.gif"); background-repeat: no-repeat; background-position: 50% 50%;}
The image will now appear in th center of the page.

Do you want the image to appear in the corner in the bottom right then you can set the values at 100% 100%; at background position. Do you want the image to appear in the bottom left corner then you will give 0% 100%; as the values.

Fonts

These are the font properties:
  • font family - With this you can set the preference of which font you want to use
  • p {font-family: arial, sans-serif, "Times New Roman";}
  • fontsize - You can give the size of the font with absolute measurements like px or pt but also in relative like percentages or em.
  • fontstyle - normal, italic en oblique
  • fontweight - normal, bold, bolder en lighter etc
  • fontvariant - smallcaps or normal

Define your standard size in the body definition : fontsize: 75% or fontsize:xsmall

This is a relative size compared to the chosen size in the browser. By giving the rest of the textsize relative measurements for example percentages or em, you ca change the fontsize of your text really quickly only with changing the body definition. The ratio between text and headlines will stay the same this way.

Font styles

Every website builder wants to use fonts that are websafe.
Websafe means that which ever font you use on your website is so common among the visitors of your site that you can be sure they have it installed on their computer.
The next fonts can be seen as websafe :

  • Courier
  • Courier New
  • Georgia
  • Times new roman
  • Arial
  • Verdana

Also fonts can be given different properties like color, fonttype, font-family, font-style, font-weight and font-size. This way you can make a text look exactly the way you want it to.

Font family

With the font-family property you can select a cetrain font. You can also put multiple but then you have to seperate them with a comma. The best is if you allways use a generic font for the last one. Because this font is normally allways available on a computer.

p { font-family: Arial, 'Courier New', 'Times new roman', sans-serif }
Now the text in this paragraph will be written in the fonttype Arial. If Arial insnt present then Courier New will be used, etc.

Quick note : If you use fonts with spaces in their name like Courier New and Times new roman above. Then you have to type the font name between 2 qoutation marks.

Font style

The font-style element determines if the text will be shown normal, italic or oblique. They are also used in this way :
  • font-style: italic
  • font-style: normal
  • font-style: oblique

Font variant

The font-variant property determines if the letters will be used with or without caps. So with font-variant we only use :
  • font-variant: normal
  • font-variant: small-caps