BlueGriffon

External Cascading Style Sheets

Maybe you are unsure that you like the default font choice that each browser would use to render your web page.  You can select a cheesier font by Edit, Select All, and then expanding the General item in the CSS Properties dialogue.



By selecting the + sign at the bottom of the Font Family: textbox, you can see a list of fonts which are available on your system.  While the first few choices are general descriptors for fonts that should be available on any computer system, the later choices may include fonts which would be found on few other computers than yours.  Since you would like to influence the appearance of your web page when it is displayed on any system connected to the web, rather than merely devices which happen to be running the same operating system that you do, etc. it will rarely be wise to select specific fonts from the bottom portion of this list.  For the moment, select a different font.  If your web page was being displayed with e.g. "Arial, Helvetica, sans-serif" choose the "Time New Roman, Time, serif" [sic] font.  As usual, you will notice that this change is effective immediately in the BlueGriffon window, even before you close the CSS Properties dialog.

Remember that much earlier in this tutorial you created another page?  You may even still have it open in another tab within your BlueGriffon window.  Select it to view it once more.  While its content is still quite brief, you will notice that it is still rendered with the default font, rather than the one you just selected for the main page.  Rather than creating a group of web pages which resemble a ransom note, with different fonts, etc. would not it be nice to make style changes in one place which affect all of the pages?

The CSS @import rule or an HTML link can be used within a web document to include style rules collected in another file.  This allows simple centralized control over many aspects of a properly designed website.  For example, if you have a website containing many linked pages, and your arbitrator of aesthetics decides to:

  • change the background color from pale lime green to wheat, and
  • switch from indenting the first line of each paragraph by 3 character widths to 7 character widths

how would you prefer to implement these changes?  By:

  • editing each of the e.g. 179 .html files to make these changes in the inline style information, or
  • editing one centralized .css file (which is included in each of the e.g. 179 .html files via an @import rule or an HTML link) to make these changes once in an external style sheet?

I thought so.

As usual, BlueGriffon spares you having to learn the details of how to write a CSS @import rule or a HTML link statement.  (Although, as usual, once you have used BlueGriffon to create e.g. an external style sheet, you can use the source command button at the bottom center of the BlueGriffon window to peek at the link it constructed for you, etc.) 

[ The early releases of BlueGriffon do not include the ability to automatically export the current style rules to a new external style sheet, so we include a few extra manual steps here.  From a 2011-07-20 forum posting (which was once visible here), there is a hint that some BlueGriffon release newer than 1.1 may include this ability to export. ]

First, you need to clear the embedded style rule that you created a little while ago.  In the CSS Properties, General section, within the Font Family textbox select one of the lines and then select the "-" sign to delete that font specification. 



Repeat this selection and then deletion until the Font Family textbox is empty.  On the menu bar select Insert, then select Stylesheets from the resulting context menu,



then select the + sign at the lower left of the resulting anonymous dialogue.



In the resulting dialogue, select the radio button for Linked to the document, and then select the New file command button. 



Navigate to the Tutorial_Site folder where your:

  • index.html file,
  • second_page.html file, and
  • images folder

are located, and create a new folder named style.  Within that new folder open a new file named author.css.  As you select the Open command button in that dialogue and return to the BlueGriffon Type dialog, select the checkbox for making the URL for the new stylesheet be expressed relative to the location of the current webpage:



In the BlueGriffon Type dialog, select the OK command button.  Back in the main BlueGriffon window select Edit, then select Select All (so that the style rule will apply to the entire body of your web page, and not merely a given paragraph or list item).  Again open CSS Properties, General section, and add the e.g. serif font again:



Save this file (e.g. by selecting the 3rd icon from the left on BlueGriffon's icon bar).  It is not until you Save the file after making style choices that any (or changed) content is written to the external style sheet in .../Tutorial_Site/style/author.css. 

Now switch to the "Tutorial second page" tab in the main BlueGriffon window (or reopen that file if it is not still present in a tab).  Once again, on the menu bar select Insert, then select Stylesheets from the resulting context menu,

 

again select the + sign at the lower left of the resulting anonymous dialogue.



In the resulting dialogue, select the radio button for Linked to the document, and then select the Select a stylesheet file icon.



In the resulting file selection dialogue,

  • navigate to the style folder within your Tutorial_Site folder,
  • select the author.css file you created a little while ago, and then
  • select the Open command button. 

As you return to the BlueGriffon Type dialogue, once again select the checkbox for making the URL for the new stylesheet be expressed relative to the location of the current webpage:



Now Save the second_page.html file again, and notice how its font now matches the font in index.html ... even though you never made a font choice while editing the second page.  You have just witnessed a tiny example of the power of using external stylesheets.

Not only does the use of external style sheets reduce the tedious workload for the human authors of web pages, it generally also reduces the workload for the web browser application, the operating system, the hardware upon which they run, the network which connects them to the web server, and even for the web server software and hardware!  Who cares?  Computers are merely tools to assist humans, so why should we care how hard or how long they have to work?  All that is true, but usually the result of inefficient design or implementation makes a human individual (e.g. the web site author), or the person, organization, or company which a website represents, look bad or silly or incompetent.  Would not you prefer to have your web page load and be completely rendered in e.g. two seconds, instead of all users having to wait at least e.g. four seconds to see the information?  (Your quantitative results will vary, but the qualitative trend is true.)

When:

  • an embedded style rule appears once in a file (e.g. to be applied to all list items in that document) instead of
  • an inline style rule appearing once as part of each and every list item in a document

the amount of data to be fetched by the web server, transmitted over the communication network, and processed by a web browser is reduced, which should reduce the response time delay that your impatient users will experience.  Similarly, when:

  • an external style rule appears once in an entire website (e.g. to be applied to all list items in each document or file that the user views at the website) instead of
  • an embedded style rule appearing once per file (e.g. to be applied to all list items in that document)

once again the amount of data to be fetched by the web server, transmitted over the communication network, and processed by a web browser is reduced, which should reduce the response time delay that your impatient users will experience.