So far you have been studying HTML, which is a document description language to create a Web page. When a document written in HTML is loaded to the Web Browser and displayed, the way the document is displayed changed depending on the elements. For example, the heading element such as h1 makes the text to be displayed in a large font, and the a element, which creates a hyperlink, makes the text underlined. These are typical examples.

For this reason, you might think that the function of HTML is “to make changes to the display on the Web Browser”. However, actually that is not the case.

The function of HTML is “to structure the document by defining each meaningful block of the document”. As a result, when the document is displayed on the Web Browser, the structure is shown according to a set of predetermined rules.

Therefore, when you create an HTML document, you do not have to worry about the “presentation”; i.e., how it is displayed on the Web Browser. In other words, it is no use to worry about the “presentation”, because HTML itself has no function to improve the “presentation” of the document.

However, even if the content of the Web page is very good, no one would be interested in seeing it unless its presentation is up to a certain level. For this reason, in addition to the structure of the document, it is arranged so that you can specify the “presentation” of the HTML document based on purpose-built rules. This document which describes the rules to specify the presentation of the HTML document is called a Cascading Style Sheet (CSS) .

By giving instructions using this CSS, you are now able to specify in detail how each block of the document which has been structured by HTML is displayed on the Web Browser, block by block.

CSS is, as opposed to the HTML document, which is a structured document, a document which is a collection of style rules which carry out character decoration (color and size of the character) and page layout. In other words, what you do using a CSS is something similar to “formatting” a document on a word processor.

By the way, when you change the size of the character, etc. on a word processor, you have to do so in a dedicated window (tool). The image below shows the dialogue box to set the format of the character, etc. on the StarSuite Writer.

Meanwhile, the CSS, which specifies the style of HTML display on the Web Browser describe it using only characters, in the same manner as HTML. Therefore, you do not have to do it in a dedicated window (tool). Instead, you use a text editor such as Hidemaru editor to describe the rules .

The style is specified for each element of HTML on the CSS. Therefore, basically the style is specified as a combination of three, “name of the HTML element”, “name of the item you want to specify”, and “the content of the item you want to specify”.

For example, if you want to specify the “color of the character” which is used to display what is described in “h1 element (which makes the heading)” as “blue”, the components are:

1. The name of the HTML element (h1)
2. The name of the item you want to specify (color of the character)
3. The content of the item you want to specify (blue)

On CSS, this is written in a format as follows:

h1  { color: blue; }

These components are called as follows in CSS.

1. Selector(the name of the HTML element which is the object to which the style is applied)
2. Property (the name of the item to specify which style should be given to the selector)
3. Value(the value specified to the property)

Therefore, generally speaking, the style is specified in the following format:

Selector  { Property: Value; }

There are the following rules in relation to the CSS format. Please check each rule while referring to the general format for specification of the style shown above.

• Use single-byte characters at all times.
• The property (item to be specified) and its value should be encircled by braces, “ {   }”.
• A colon “ : ” is inserted between the property and its value.
  

  In Information Processing Fundamentals, a “ : ” (colon) should be placed immediately after the property without any space. This is to unify the format so that it becomes easy to read. In addition, in this way you are less likely to forget to put “:” (colon).

• After the description of the value which corresponds to the property, “; ” (semicolon) should be attached.
  For a property for which it is possible to specify multiple values, each value should be separated by a single-byte white space. After all the values are described, just one “; ” (semicolon) should be attached at the end.

  In the following example, three values, 2px (line thickness), dotted (line type), and red (line color), are specified to the “border” property of the selector h1. Each value is separated by a single-byte white space and one “; ” (semicolon) is attached at the end, isn’t it? (Explanation about the “border” property will be given in the next session. At this stage, you need not worry too much about it.)

  h1 { border: 2px dotted red; }

• Multiple properties (item to be specified) can be specified for one selector (name of the HTML element).
  

  In the following example, two properties, color of the characters (blue) and the size of the characters (1.2 em: this means that the characters are 20% larger than normal characters), are specified for the selector h1.

  h1 { color: blue;  font-size: 1.2em; }

• In the CSS file, in same way as for HTML files, you can freely insert single-byte spaces, TAB characters, line breaks, etc. However, you cannot insert these into the character string consisting of selector, property, and its value.

  The following two CSS documents produce exactly the same result. Which one do you think is more readable?

  h1
  
              {
                                                                          color:
                          blue;
                                                              }

  h1 { color: blue; }