Euro PC Solutions Blog

Indicate the names of the fonts in the order you want them :

Code : CSS

font-family: font1, font2, font3;

If the visitor has font1 on his computer, font1 will be used. If not, the computer will try font2 then font3 etc.
Use speech marks if the name of a font has spaces in it. Always put the last font as serif or sans-serif.

Code : CSS

font-family: "Arial Black", Arial, Verdana, serif;

Indicates the size of the text.
Several measurements are possible :

• px (pixels)
• % (percentage, 100% = normal)
• em (related size, 1.0 = normal)
• ex (related size from the height of the letter x. 1.0 = normal)
• name of the size :
  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large

• bold
• bolder
• lighter
• normal (by default)

• italic
• oblique
• normal (by default)

• underline
• overline
• line-through
• blink
• none (by default)

• small-caps
• normal (by default)

• uppercase
• lowercase
• capitalize
• none (by default)

Indicate in the order you wish the values for font-weight, font-style, font-size, font-variant, font-family.
Be careful, exception : the name of the font (font-family), must be last in the list.
You don’t have to put values for every attribute.

Example :

Code : CSS

font: bold, 16px, Arial;

• left (by default)
• center
• right
• justify

Can be used in the cells of a table or in inline elements that are contained inside inline elements :

• top
• middle
• bottom

Indicate a value in pixels for the indentation.
Your paragraphs will start with the indentation you’ve entered.

• normal (by default)
• nowrap : no automatic line break unless a <br /> tag is present.
• pre : line break are like the source code is presented (like the XHTML tag <pre>)

Indicates the colour with one of the following methods :

• by writing the name in English (black, blue, green, white, red…)
• with a hexadecimal value (#CC48A1)
• with a color in RGB : rgb(128, 255, 0)

Indicate the URL of the image (absolute or related URL) :

background-image: url("images/bg.png");  /* related address */
background-image: url("http://www.mysite.com/images/bg.png");  /* absolute address */

• fixed
• scroll

• repeat : the background repeats all over (by default)
• repeat-x : the background only repeats horizontally
• repeat-y : the background only repeats vertically
• no-repeat : the background doesn’t repeat, it’s only shown once

There are 2 different methods :

• enter a distance in pixels (px) or a percentage (%), in relation to the top-right corner :

  Code : CSS

  background-position: 50px 200px;  /*50px to the right and 200px down */
  

• use a predefined value, one for the vertical and one for the horizontal position :

  • top
  • center
  • bottom
  • left
  • center
  • right

  Code : CSS

  background-position: bottom right;
  

Indicate one or several values from background-image, background-repeat, background-attachment, background-position.
The order of the values doesn’t matter and you don’t have to include values for every property (1 is enough).

Code : CSS

/* the background bg.png will be shown in the top right and won't be repeated */
background: url("images/bg.png") no-repeat fixed top right;

Indicate between 1 and 4 values. Depending on the number of values the meaning changes :

• 1 value : margin for the top, bottom, left and right
• 2 values : the first is for the top and bottom margins, the second is for the left and right margins
• 3 values : the first is the top margin, the second is the left and right margins, the third is the bottom margin
• 4 values : in the order of the top, right, bottom and left margins

Indicate between 1 and 4 values. Depending on the number of values the meaning changes :

• 1 value : padding for the top, bottom, left and right
• 2 values : the first is for the top and bottom margins, the second is for the left and right margins
• 3 values : the first is the top margin, the second is the left and right margins, the third is the bottom margin
• 4 values : in the order of the top, right, bottom and left margins

• none (by default)
• hidden : invisible border
• solid : solid line
• double : two parallel lines (needs a minimum border of 3px)
• dashed
• dotted
• inset : 3D effect going away
• outset : 3D effect coming out
• ridge : another 3D effect

Indicate the colour, thickness and type of border for the left border.
The order doesn’t matter. Example :

Code : CSS

border-left: 2px inset blue;

• none : the element won’t be shown
• block : the element becomes a block (like <p>)
• inline : the element will become inline (like <br />)
• list-item : the element will become part of a list (like <li>)

• hidden
• visible (by default)
• none : makes the element go away completely whereas hidden hides the element but the element still takes up room on the screen.

Indicate 4 values like this :

Code : CSS

clip: rect(value1, value2, value3, value4);

Allows us to only show a part of an element. rect() allows us to insert the coordinates of the rectangle that will be shown.
Values 1 to 4 correspond respectively to the top, right, bottom and left corners of the rectangle.

• visible : everything will be shown (by default)
• hidden : the element will be cut off if it goes past the dimensions set by width and height. You won’t be able to see the text that has been cut off.
• scroll : like with hidden, the element will be cut off. However, this time a scroll bar will be added to allow us to see the rest of the text.
• auto : this time the browser decides if a scroll bar needs adding or not. Very often this is just like using scroll.

• left : float to the left
• right : float to the right
• none (by default)

• left : stops left float
• right : stops right float
• both : stop left and right floats
• none : doesn’t stop any float

• absolute : absolute positioning in relation to the top left corner
• fixed : fixed position (works like absolute). The element always stays in the same position on the screen, even when you scroll.
• relative : position in relation to the normal position of the element
• static : normal position (by default)

In the case of absolute positioning for example, if 2 elements overlap, z-index allows us to say which element should be shown on top.
Put a num. The higher the number is, the more the element will be brought forward.

For example, if 2 elements are using absolute positioning and they overlap with a z-index of 10 for one, and z-index of 20 for the other, the one with 20 will be at the front.

• For unordered lists (<ul>) :

  • disc
  • circle
  • square
  • none

• For ordered lists (<ol>) :

  • decimal
  • decimal-leading-zero
  • upper-roman
  • lower-roman
  • upper-alpha
  • lower-alpha
  • lower-greek

• inside : without indent
• outside : with indent (by default)

Indicate the URL of the image which will act as a bullet point. Example :

Code : CSS

list-style-image: url("images/point.jpg");

You can reunite the values of list-style-type, list-style-position and list-style-image. You don’t have to put values for everything and the order doesn’t matter.
Example :

Code : CSS

list-style: square inside;

• collapse : the borders of the table and cells are merged
• separate : the borders are separated (by default)

• show : empty cells are visible
• collapse : empty cells are hidden (by default)

Indicate the position of the table’s title, defined with the <caption> tag :

• top : top of the table
• bottom : bottom of the table
• left : to the left of the table
• right : to the right of the table

• auto
• default
• pointer
• text
• wait
• progress
• help
• move

• n-resize
• ne-resize
• e-resize
• se-resize
• sw-resize
• w-resize
• nw-resize

• url : personalised cursor, in .cur or .ani format. Example :

  Code : CSS

  cursor: url("images/cursor.cur");
  

  You must use a special program to create .ani or .cur cursors.