More Simple CSS


You know how to set the font (typeface):
    font-family: Garamond, Times, serif;
    font-family: Helvetica, Arial, sans-serif;

But here are a few more tips:
Surround multi-word font names with quotes:
    font-family: "Gill Sans", sans-serif;

Fallback or generic fonts are a way to pick a family of fonts as a last resort without specifying which typeface. The possible settings include: serif, sans-serif, cursive, fantasy, and monospace.

More about CSS 2 and font families, font styles, text sizes available at:

CSS 2 issue:
For an in-depth discussion and a few more options for web-safe fonts, see Web Page Design for Designers: Knowing About Web Safe Fonts

Set the text alignment:
    text-align: left;    (could also be set to one of: justify, right, center)

Set the spacing between letters (kerning):
    letter-spacing: -2px;    (alternately try a setting like:  letter-spacing: 9px; )

Set the spacing between words:
    word-spacing: 15px;

Set the spacing between lines of text (leading):
    line-height: 25px;

The above settings may seem subtle or picky to some of you, but they can be used to significantly affect the visual appearance of the text, thereby affecting its visual flavour, mood, texture. Used occasionally and with good reasons behind them, these commands can be surprisingly effective at setting some text apart from other text, or at preventing text from being visually mundane.

See a working example of some of the above settings (with text kept inside narrow divs) here: Extreme Word/Line Spacing and Justification. Observe how it changes the ease of reading (reading does not always have to be easy, in art) and how it draws attention to the texture of text as a visual pattern on a page.

More CSS text formatting options and explanations available at:


Image alignment with Text:

If you give an image its own id (add an id attribute to an image tag), you can then tell that specific image how you'd like it to align vertically relative to any text around it: default, text-top, text-bottom.

img#ownidname {
   vertical-align: text-top;

img#idname2 {
   vertical-align: text-bottom;

See an online example from w3schools:

Centering an element (a paragraph or img, etc.):

   margin: auto;


   margin-left: auto;
   margin-right: auto;

Background Image-related CSS:

background image:
    background-image: url(imagename.jpg);     (use this code if the background image in the same folder as the web page)
    background-image: url(images/dog.jpg);     (use this code if the background image is down in a folder named images)

With CSS, background images do not simply have to repeat (or tile) both horizontally and vertically. CSS can specify which direction a background image will tile, or whether it should tile at all:

repeating a background image:
    background-repeat: repeat-x;   (this means repeat horizontally)
    background-repeat: repeat-y;   (this means repeat vertically)
    background-repeat: no-repeat;   (this means do not repeat at all)
    background-repeat: repeat;     (this means repeat both horizontally and vertically as needed)

With CSS, background images do not simply have to appear starting at the top left corner of a page. CSS can specify what initial location a background image will appear at (and if it tiles, it will tile from there):

positioning a background image:
    background-position: 50px 35px;
the first number changes the horizontal position (how many pixels in from the left the image is), the second number changes the vertical position (how many pixels down from the top the image is)

alternative background image position settings:
    background-position: center top;
Instead of using numbers, you can set the position with a few values.
The first value is the x or horizontal position, and can be set to one of: left, center, right.
The second value is the y or vertical position, and can be set to one of: top, center, bottom.

CSS can set a background image to stay still despite page contents being long enough to scroll:

non-scrolling background image - background-attachment:
    background-attachment: fixed;
(fixed means the background image will not scroll away even if the page itself scrolls)

CSS3 background image properties:

Background image example - some of the above used together:


 body {
        background-color: #dddddd;
        font-family: Verdana, Helvetica, Arial;
        font-size: medium;
        color: #000000;
        background-image: url(advil.gif);
        background-repeat: repeat-y;
        background-attachment: fixed; 

See a working example of this background manipulation code at:

Unusual background with more CSS

Using the same code with a different image may give different effects

These different effects largely come from different image sizes (because of how an image will tile/not tile, scroll/not scroll, overlap/not overlap with other elements on the page based on the image's own size in relation to the size of other elements).

Obviously the brightness/darkness, contrast, colours, etc., of background images are also important in creating certain feelings, or meaningful effects.

Examples of the same HTML and CSS but different images:

Unusual background with more CSS ...VERSUS... Unusual background with more CSS - number 2

Other ways of explaining CSS background image properties at: