Inline Styles
HTML is well suited to setting up links to different pages, images and locations on the net. It was not designed for telling a browser how that information should be presented in minute detail. In the first decade or less of the use of HTML, some web designers attempted to fine tune the layout, spacing, and other aspects of the appearance of a web page by using various HTML tags. Some of these tags were implemented in only one or a few browsers, and some tags which were recognized and implemented by multiple web browsers were rendered in different ways by each browser. Even if someone invested in the extra work of having multiple sets of browser-specific tags which were conditionally included in a file, some web pages were not displayed gracefully, attractively, or as intended in some browsers.
The solution to this problem was to create a standard for specifying the presentation of HTML that would be the same in all browsers. This standard is called CSS, or Cascading Style Sheets. It is certainly beyond the scope of this tutorial to explain the intricacies of how this works. Fortunately BlueGriffon does a lot of this work for you. All you really need to know at this point is that HTML handles the content of the site (text, links, images, etc.) and styles determine how that content should be presented. CSS may be used to control the visual appearance of your web page both on screen and on paper (should a user choose to print some of your content), as well as in other media. So, content first, then worry about how it looks. This approach has two distinct advantages. First, there is a much greater chance of your site looking the same no matter which browser it is viewed on. Second, if you decide that you want to change the look of your site, all that is required is changing the style associated with the site's content, without having to re-do the whole site from scratch.
Using Inline Styles
You may wonder why the word cascading is used in Cascading Style Sheets. CSS provides for a hierarchy of sources of style information:
- default rules (initial values) from the web browser (or user agent)
- rules in author's style sheet
- rules in user's style sheet
- !important rules in author's style sheet
- !important rules in user's style sheet
Rules found in sources at the bottom of this list override rules found earlier in the hierarchy. This allows e.g. a user with a slight visual impairment to ensure that all text is rendered in a larger font size, even if the author of a website thought it would be cute to use a tiny font size. But if a user does not create or have their own style sheet, then the author's preference for a smaller font size will overrule the default font size which the browser would have used.
For the large majority of the time while you are working through this tutorial, you will be in the role of creating rules in the author's style sheet. For simplicity, we will assume that you have not already constructed your own over-riding user's style sheet. If you do not know what a user's style sheet is or where it might be stored, you may skip reading the remainder of this sentence; if you have constructed your own user's style sheet, it may be less confusing for you to disable it for the duration of this tutorial.
Another aspect of the cascading process is the spatial order of appearance. The web browser (or user agent) will honor the most recent CSS rule which it has encountered as it scans or reads the web page when it renders a given element. This allows one to describe unique decorative elements with the same mechanism that is used to describe the overall uniform look and feel within a entire document or website.
To gain a bit of experience with some of these concepts, let's construct a shopping list on our web page. Selecting the icon roughly in the middle of the formatting toolbar (below the textual menu bar and the icon bar at the top of the BlueGriffon window) is one way to start an Unordered List.
Remembering that last week the proprietor gave no hint he ever had some of these items in stock, let's highlight some of these list items (since we may have to visit another store to find them). Select the text of one of the list items by dragging your mouse pointer over the words (or holding down the Shift key while using the e.g. cursor right arrow key repeatedly to complete the selection), and then select Panels on the menu bar, then Style Properties from the resulting context menu.
In the resulting CSS Properties dialog, in the uppermost selection list select the up-and-down-arrow icon at the right end of the textbox, then select the last item in the list of choices. This will "Apply styles to:" "this element, through inline styles". Then select the twisty triangle at the left end of the Colors item to expand or reveal the choices.
Select the radio button for a Background color. In the resulting color dialog, select an appropriate mild cheese-yellow color:
and then select the OK command button. For the moment, close the CSS Properties dialog, and back in the main BlueGriffon window Save your file again. When you reload this page in your web browser preview, you can see the yellow background color has been applied as the style for this one list item.
How long is this shopping list? How many times do I have to select an item, navigate to its style properties, select a color, etc.? Is not there a better way?
Yes, when an author would like to affect the appearance of multiple items or elements in a web page, there is a simpler technique. In the next section we will use BlueGriffon to construct embedded style rules within a given file.