Copyright Michael Karbo, Denmark, Europe.

  • Next chapter.
  • Previous chapter.

    Chapter 22. Layout with CSS

    In the previous exercise yoou got your design ”kicked” in place with the use of a table, in which you placed all text, pictures etc. This trick works, but it is a clumsy way to work. Why do we need all that text in one cell? That is not necessary. There are far better ways to control the layouts, that is CSS.

    Introduction to CSS

    CSS stands for Cascading Style Sheets. That is a collection of codes that you can use in HTML documents.

    Technically CSS are not HTML; they are an extension to HTML. Together with JavaScript CSS makes for a big part of the so-called DHTML (dynamic HTML). These introductory remarks do not have the big practical importance, since most browsers today support CSS. Must you must be principally aware that pages with CSS can appear different in different browsers.

    CSS reminds you of the typographics  you can use in the word processing program Word. They are formatting that:

    ·        Define a location in the document

    ·        Work in the whole document.

    If you would use H1 codes, you can with CSS in one place define which font, size and color will prevail each time a H1 code appears.

    That holds true for most HTML ­codes; their appearance can be defined once and for all. Then you avoid having to provide the parameters in each individual code that are used to specify the appearance.

    CSS is an incredibly comprehensive system that can be used for everything. I am not able to cover the subject completely here, there could be thick books written about that. But I will give a brief and effective introduction that will show the strength of CSS. The task is to fit the Raphael page to a fixed width (f or example 620 pixels). This width must hold true regardless of the users screen resolution. At the same time we will to modify the font appearance.

    What do we need?

    We start with the raphael.htm file. Now you it in and out so you can surely evaluate which HTML code is actually included in the document. Those are the codes that have to be governed by the style sheet.

    We are talking about the codes: H1, H3, P, TD, IMG and HR. Can you see that? Those are the codes that are used in the document, and if we can control them, then we can also control the document layout.

    We start by working on the P code. That is used to create new paragraphs; here is the smart thing: We know the CSS can influence all the text following a P code. That turns out to be about all of the document, since there are so many P codes.

    1.   You need to open the raphael.htm file in NoteTab.

    2.   Save it right away under the new name
    raphael_css.htm in the folder site1.

    3.   Test it in the browser, so you refresh its appearance. Notice fonts and line lengths/margins.

    4.   When CSS codes need to be embedded in a HTML document, they need to be inserted in top of the document, in the HEAD section.

    5.   So place the cursor above the code </HEAD> and insert a couple of empty lines.

    6.   In the Autotext library you will find a clip called CSS_embed. Activate that with a double click:


    7.   That inserts this code block that forms the ”frame” around  the style sheet:

    8.   The individual selectors need to be placed within the STYLE code, where the cursor is right now.

    9.   Double click on the CSS_p clip.


    10. That inserts the code you see in Figure 51.

    11. Notice the single ”p” to the far left in the first line. That says that this selector regards the P code.

    12. Save the document, and test it in the browser. What changed?

    Figure 51. The P code is redefined.

    What happened?

    If you check, you will see the following changes, which are the result of the small style sheet that you inserted in the Raphael page:

    ·        The font has changed in most of the document.

    ·        Line length has changed in all the regular paragraphs.

    If you look closer at the style sheet, you will see that three properties are included. They are all written within brackets { }.

    Each property is concluded with a semicolon (;). All three lines influence the text in the paragraph following the P code:



    font-family: Arial, Helvetica;

    Specifies the font

    font-size: 9pt;

    Font size


    The paragraphs width, here 620 pixels.

    Figure 52. The content of the individual CSS property.

    You also need to notice what was not changed. That is the heading and the bullet list on top of the page. That is since these paragraphs were not started with a P code, so they remain unchanged.

    Figure 53. Style Sheets control the appearance of the ordinary text.

    The bullet list in the bottom of the page (in the Links paragraph) are not changed either. The horizontal lines have not been shortened, and finally the text in the table (the one with the kilometer distances) has a different font size than the rest of the document. Most of the document is in point size 9, but that is not the case in the table. We will correct that in a minute.

    More formatting

    Don’t despair if you think that the codes in Figure 51 look very complicated; I think they do also! But I want to point out that in reality it is quite easy to work with CSS, at least at the level we do. You just try your way; I like to copy the selectors and correct them until I find something that works. That is simply the method, and everyone can use that.

    1.   You need to move on. Select the three lines that are highlighted in Figure 51. Make a copy and insert the copy just above code – ->.

    2.   The selectors need to cover the LI codes. So change the first letter in the first line from p to li.

    3.   You also need to delete the line width:620;, so the code gets to look like this:


    4.   Now the text in the bullet list will appear with the same font as the rest of the document, check for yourself!

    5.   Place the cursor above the first selector and use the CSS_h1 clip to insert a H1 selector:


    6.   That results in a 6 line code that defines the appearance of all the headings that are formatted with the heading code H1:

    7.   If you check the code you can see that the font is bold, has point size 15, and the color is navy blue. Check also the appearance in the browser.

    8.   Now we also have to define the H3 headings. So copy the block with the 6 lines hat you see above and insert them below.

    9.   Adjust the copy so it looks like this:

    10. Save the page and test it in the browser.

    Start fine polishing

    When you work with CSS you have a very precise tool that can control home page layout in the finest detail. That causes you to be more critical.

    Now you have to adjust a couple of small details in the lay­out. Many would probably accept the appearance as is, but not we!  We are still looking at the tables that contain the headings for the 6 paragraphs.

    Notice the text link To top; that does not have the same font as the H3 heading:


    That is easy to correct since the text links are in a cell, meaning within a TD code. So let us tackle that …

    1.   The last selector that you dealt with the H3 codes. Copy this selector and insert the copy as a new selector.

    2.   Adjust the first line in the new selector from H3 to TD.

    3.   Save the document and test it. Now the fonts are in place, but there is an unreasonable difference in the spacing of the two texts in the table:

    Figure 54. The fonts are the same, but the two texts are not spaced properly.

  • Next chapter.
  • Previous chapter.

  • HTML Tutorial Overview.

  • Get the files for this tutorial (opens in a new window)