Information Processing Fundamentals [Session9]GIF animation, information ethics (i.e. things to be noted when you send out information), and CSS (1)

Changing the Presentation of the Web Page Using a CSS

[The purpose of this section]
Learn the basic procedures to use the CSS (Cascading Style Sheet).

How We Can Use the CSS

Let us practice CSS for various HTML elements. Please make a copy of any of the HTML files you have created so far (for example, make a copy of “week07\ex1.html” and name it “week09\ex2.html”). Add a similar element as sample HTML to the file you copied, save it, and check the display on the Web Browser to see how the particular element is displayed on the Web Browser. Repeat this process so that you can understand the behavior of each element.

Since CSS is used to specify the presentation of the HTML document, first of all, you have to add such description in the object HTML file as to indicate the use of the CSS. To do that, you must add one line in the head element as shown below.

 <meta http-equiv="Content-Style-Type" content="text/css">

This is a statement to declare that “the style of this HTML file will be specified by a CSS which is written in text format”.

However, as this declaration does not specify in which CSS file the style to be used is described, you have to add another line in the head element as follows (The name of the CSS file need to be changed to the file name you saved (relative URI)):

 <link rel="stylesheet" type="text/css" href="../css/mystyle.css">

The file specified by the href attribute in the statement above (as a relative URI) is the CSS file to be used in this HTML file. In the example above, the file is “../css/mystyle.css”.
As in the example above, the extension of the CSS file should be “css”.

(Note) Apart from the method mentioned above where you “create a separate CSS file in addition to the HTML file”, there is another method to use CSS in which you “write it in the HTML file”. However, for the purpose of making it clear that HTML is a “description language to structure the document” whereas CSS is a “collection of rules to specify the presentation of HTML”, please use a separate CSS file independent of the HTML file. Moreover, if you separate the CSS file in this way, not only it is easy to edit, but also it is very convenient, because you can manage the presentation of other HTML files (Web page) in a uniform manner.

Setting the Style Using CSS

Now, let us change the style of the Web page (HTML file) using the CSS.

First of all, please set a few styles for the most basic element; i.e., the p element, and confirm that the display on the Web Browser after you set the style is different from the one before.

[Practice: Initial settings to use CSS and the use of CSS]

Please follow the steps below to make necessary changes to the HTML file with which you want to use the CSS, and create a CSS file to learn the basic procedures to use the CSS.

What you are going to do here:

Make necessary changes to the HTML file to use CSS.
Create a folder exclusively for CSS so that you can use it from now on.
Create a CSS file using the Hidemaru editor.
Check the difference of the display depending on whether you used the CSS to set the style or whether you changed the details of the setting.

Change the sample HTML file
Open the file “week09\ex2.html” on the Hidemaru editor, copy/paste the two lines below before the title element, and save the file.
```
<meta http-equiv="Content-Style-Type" content="text/css"> 
<link rel="stylesheet" type="text/css" href="../css/mystyle.css"> 
```
Create a folder exclusively for CSS
Please create a new folder called “css” (not “week09\css”). Store your CSS files in this folder.
Create a purpose-built CSS file
On the Hidemaru editor, select “New file” from the “File” menu. When an empty file is displayed, save it as “css\mystyle.css”. When you do this, please pay extra attention not to make any mistake in relation to the folder in which the file is saved, file name, and extension.
Set the styles on the CSS
Copy and paste the following description to “css\mystyle.css” and save the file.
```
body {
  background-color: #bac7c7;
}

p {
  color: #006400;
  font-size: 1.15em;
}
```
(Note) On the CSS above, the following three settings are made:
- The background color (to color code #bac7c7) of the body element (the whole HTML file)
- The color of the characters of the p element (to color code #006400)
- The size of the characters of the p element (to 1.15 times as large as the size of ordinary characters (1 em))
As we are going to discuss each property (background-color, font-size, and so on) in detail later on, at this stage, do not worry too much about them. Just take them “as is”.
Check the change of the style
Double click the “week09\ex2.html” to confirm that the display on Web Browser has changed. Can you see that, compared with the previous display, the background color and the color and size of the characters of the p element have changed?

Comment out the style (Make it invalid)
To see the change in a clear-cut manner, let us comment out the CSS settings so that they are made invalid. Open “css\mystyle.css” on the Hidemaru editor (if it is already open, leave it as it is), encircle the whole settings with “/*” and “*/” as shown below. When you have encircled it, save the file.
```
/*
body {
  background-color: #bac7c7;
}

p {
  color: #006400;
  font-size: 1.15em;
}
*/
```
The area encircled by “/*” and “*/” is dealt with as a comment; therefore, it is not interpreted as a part of CSS setting. For this reason, if you save the file as above, what is specified by the CSS is exactly the same as there is no specification.

(Note) When you want to comment out in an HTML document, you encircle the part with “”, don’t you? Please do not be confused.
Confirming the display when you commented out the style
When you reload the file on the Web Browser as is, the display should be the previous one; i.e., just HTML without any CSS specifications. Please reload the Web Browser to check if it is so.

When you have finished checking, delete the “/*” and “*/” in the mystyle.css file to make the CSS valid (bring it back to the previous state) and save the file. Just to make sure again, please reload the file on the Web Browser to see if the CSS became effective again.
[Caution] If the display on the Web Browser is the same regardless of whether “CSS is commented out (CSS is invalid)” or “CSS is valid”, something is wrong. Please check the following again:
- No arrangement to use the CSS (i.e. adding two lines) has been made to the head element of the HTML file.
- The CSS file is saved in a different folder.
- The name of the CSS file is different.
- The CSS file has not been saved.