Copyright Michael Karbo, Denmark, Europe.

  • Next chapter.
  • Previous chapter.

    Chapter 28. More about CSS

    Earlier in the book (on page 119ff) you learned to use CSS to format a HTML document. You entered a STYLE code with lots of declarations in the HEAD section, and that caused the appearance of the home page to change correspondingly. That is smart and effective.

    You will often be so happy with the CSS layout that you would wish to use it on other – maybe many – home pages. And you can do that in a very smart way: You place all the CSS declarations in one file. That can then be linked to all the documents that need the same layout. Let me show you how to do that.

    Create the defininition file

    You have to move the CSS declarations from a HTML document to a definition file:

    1.   Open NoteTab. Close all documents with Control+Shift+F4.

    2.   Open raphael_css.htm.

    3.   Then open a new empty document with Control+n. Save the new document right away as style.css. It has to be in the C:\Documents\style folder, which you need to create:

    4.   Now you have two open documents in NoteTab. Select all the CSS declarations in the document raphael_css.htm in this way:

    5.   Place the cursor before the first declaration, which starts with H1:

    6.   Now hold the Shift-key down and press ArrowDown lots of times until all the declarations are deleted – including the line that begins with IMG:

    7.   Cut the selected block with Control+x.

    8.   Shift to the document style.css and insert the selection there. Save right away.

    9.   Return to raphael_css.htm. Delete the remaining STYLE code:

    10. Save the document, and check it in the browser. Now are design is ”destroyed”, since all CSS formats are deleted.

    Insert a CSS reference

    Now you have created a file called style.css, which is placed in the style folder. It can be ”called” from other documents, which are then formatted based on it.

    1.   You still have the HTML document
    raphael_css.htm  active in NoteTab

    2.   The cursor has to be in the HEAD section; make sure that is the case.

    3.   Then activate the CSS reference to the clip:

    4.   That inserts this code:


    5.   This tells that the CSS declarations that are found in the style.css file are also valid for the current document.

    6.   Save the document and test it in the browser. Now the contents are formatted like they should be.

    A little explanation

    If your web site includes more (maybe many) home pages, it is smart to use a common CSS file that contains all the declarations. In that way you can change the layouts for all the involved home pages in one stroke – just by adjusting the style.css file. If you want dark blue print instead of black –they will be changed in a flash, and the change can affect dozens of home pages.

    You need to be aware that CSS can be quite a tease. I experience from time to time items that do not work as intended. That is because the inter action between the CSS declarations and the browsers way to interpret the code. Always remember to check all pages where you employ CSS, and be prepared to adjust the code.

    You may have to make significant changes in the code that you used in the HTML document raphael_css.htm, if it has to be used in other pages.

    In the example in the previous exercise we placed the definition file style.css in a sub folder (HTML\style). The idea is that all documents are also placed in different sub folders that originate from the same root structure. When that is the case, you can use the same code in all the documents.

    Figure 63. All home pages are placed in sub folders that originate from a common root folder.

    In the example the code is named HREF="../style/style.css". Notice the two dots before the folder name /style/. That specifies that the style folder is a sub folder on the level with the folder where the HTML document is located. This code is usable in all documents, regardless of whether they are in folder page1, page2 or page3, because all folders a re on the same level relative to the root folder (see in Figure 63).

    Of course you can place HTML documents in the folders of your choice. I have just found the above system easy to manage. And if you have many home pages to manage, it is imperative to be well organized.

  • Next chapter.
  • Previous chapter.

  • HTML Tutorial Overview.

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