Nvu Tutorial - using css

get Nvu

intro to Nvu

what's css?

the css editor
tips & tricks





Learn more about css

Fixed navigation bar

screenshot of the fixed menu

Remember when we set the position of the navigation bar we set it to "fixed?" This means that the menu will always remain in the same place on the screen even if you scroll down.  To test this do the following:

  • add text to your document so that it is more than will fit on one screen - an easy way to do this is simply to copy the body of the document and paste it several times at the bottom of the document
  • if you view your document in a browser (just double click on it) and scroll down, you will notice that your navigation bar remains fixed as shown in the screenshot -->
  • test this further by going into the css editor and changing the navbar position to "absolute" - your navigation bar should scroll with the screen now.
top of page

External css file

export css to external fileSo far, we have been looking at css stored within the document itself. For even more flexibility, it's even better to place the css in an external file.  This way we can have several css files attached to the same document. The initial steps are quite straightforward:
  • open your html file and open the css editor
  • in the "sheets and rules" window to the left, select "internal stylesheet."
  • click the "Export stylesheet and switch to exported version" button (shown in screenshot) -->
  • name your external stylesheet (the default is style.css which is fine) but make sure it is saved in the same directory as your html file; in this case the desktop
  • save the css file
  • load your html file in your browser and the file should appear as before
Simple right? So why is it included in "Learn more" and not in the basics section. Well a problem arises when you upload your files to a web server. Nvu records the actual location of your css file (on the desktop), rather than its relative location (in the same directory as the html file). If you don't correct this, when you "go live" (publish on the web), your html page won't find your css file. This can be easily fixed, but you will have to edit the actual html:
  • click the "Source" at the bottom of the Nvu screen - the html code of your document should appear in the editing window
  • find the line that looks like this:   <link rel="stylesheet"
     href="file:///Users/e_bethel/Desktop/style.css" type="text/css">  - it should be somewhere near the top of the page (yours will refer to the file location on your computer)
  • edit that line so that it looks like this:   <link rel="stylesheet" href="style.css" type="text/css">
  • save the file and load it in your browser
Again you should see the correctly styled file loading. The difference is now when you go live, the file will be able to find your css file.

top of page

The "hover" style

menu hoverRoll your mouse over the navigation bar of this website (to the left). Notice how the items change as your mouse "hovers" over.  It's a neat effect that can easily be added using css.
  • create a style rule for all elements of type "a:hover" (middle button)
  • set the style for when the mouse is over the item - in mine I set:
    • border: four sides the same, ridge, 2pt
    • text: bold
    • background: white
Now when you mouseover the item it should look like it does in the screenshot (or as you have chosen to style yours)

top of page

More about external style sheets - design

zengarden 1zengarden 2So far we've only looked at fairly simple applications of css to web pages. Click on the thumbnail (little picture) to the left and then click on the one to the right.  Each should open a webpage in a new window.  Notice anything?

That's right - the pages contain exactly the same information.  In fact, they are based on the same html document.  The different designs are acheived entirely with css - one document links to one external stylesheet, the other to a different stylesheet file. Pretty impressive!

Increasingly, css is being used as a design tool to enhance the visual quality of websites.  Learn more about this in the resources section.

top of page

even more about external stylesheets - accessibility

To hear this page click listen

css editor <previous 1 2 3 4 5 next>
Document made with Nvu