Information Processing Fundamentals [Session10] CSS(2)

Units and Other Things Which Are Required for CSS Settings

[The purpose of this section]
Learn the unit and color codes, etc. which are required when you set styles using CSS.

Units for Length

In CSS, as there is no default unit for length, you are required to add units whenever you specify the length (size). Broadly speaking, there are two kinds of units, “absolute units” and “relative units”, which you can use to specify the length in CSS.

“Absolute units” are units for length we use in everyday life, such as mm (millimeter), in (inch), and pt (point; i.e., 1/72 inch). When we specify a style in CSS using these units, the length (size) specified is reproduced as is on the Web Browser, although people don’t like this very much. The reason they don’t like it is that, since the environment of the Web Browser varies depending on the size of the display and the size of the browser window at the time, it’s easier to view the display relative to the environment at the time, rather than the absolute size.

That is the reason why we need “relative units”. There are three relative units, as follows:

px (pixel)
em (a unit assuming that the value of the font-size property is 1)
ex (a unit assuming that the height of a lowercase character “x” is 1)

Usually “em” is used as a unit for character size and “px” is used as a unit for other things such as images and document block size.

(Note 1) There are a few properties which you can specify not only in integers but also in real numbers including a decimal point.

p.sbg { font-size: 1.8em; }

(Note 2) There are some properties which you can specify a percentage value using “%” as a unit.

p.db { font-size: 200%; }

URI

In CSS, when you specify a URI as a value, you use the “url()” function. You specify a relative URI or an absolute URI as an argument (input to the function) for the “url()”. The file specified by the URI is set as the value.

body { background-image: url("./img/bg.jpg"); }

In the example above, an image file referenced by the relative URI “./img/bg.jpg” seen from the CSS file is specified as the background image of the main text of HTML.

(Note) The “function” mentioned here means something which carries out some kind of processing to return an output when you input a certain value, similar to functions used in mathematics.

[Caution] The relative URI used in the url function is the relative URI as seen from the CSS file, not the relative URI as seen from the HTML file. You have to be careful.

Expression of Color (Color Code)

Color ? A color consists of three primary colors of light (RGB)

In the world of PCs, a color is expressed by a mixture of the three primary colors of light (Red, Green, and Blue) of different intensities. The intensity of each primary color is expressed in hexadecimal notation (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, and f).

We express a color in a six-digit hexadecimal notation "#RRGGBB" , don’t we? In this format, as R, G, and B take 256 (=16x16) kinds of value each, it is possible to express up to 16,777,216 (=256x256x256) kinds of color. (A color expressed in this way is referred to as “full-color” or “true-color”.)

However, since human eyes do not always distinguish a difference between colors expressed in such way as above, a less fine expression can work perfectly well. For this reason, "#RGB" in a three-digit hexadecimal format is also used often as a color for a Web page. In this way, you can express up to 4,069 (=16x16x16) kinds of color.

Note: Please note that "#RGB" is interpreted as "#RRGGBB" rather than "#R0G0B0" .
For example, "#fa8" is the same as "#ffaa88" .

Name of the color

As the 16 colors shown below are among the most common colors, their names (color name) have been defined. You can specify these colors not only in hexadecimal notation but by color name as well.

RGB	Color name	RGB	Color name	RGB	Color name	RGB	Color name
#000000	black	#800000	maroon	#008000	green	#000080	navy
#c0c0c0	silver	#ff0000	red	#00ff00	lime	#0000ff	blue
#808080	gray	#800080	purple	#808000	olive	#008080	teal
#ffffff	white	#ff00ff	fuchsia	#ffff00	yellow	#00ffff	aqua

The two CSS descriptions shown below specify exactly the same effect.

body {
  background-color: #00ffff;
}

body {
  background-color: aqua;
}

Color sample

The bar shown below is a sample of color expression. You can produce different colors by changing the brightness (intensity) of each of the three primary colors located under the bar, within the range of 0-255.
The original setting is set to green. This is because the brightness of the green (G), which is one of the primary colors, is set to the maximum (level: 255) and the others, red (R) and blue (B), are set to nothing (level: 0).

Please find the color you require by changing the brightnesses of R, G, and B appropriately. The number shown in the hexadecimal notation box is the code for the color being displayed. Please use this number in your CSS.
To change the brightness, either click on the “Upward arrow” or “Downward arrow” or directly enter a figure using single-byte numeric characters in the range of 0-255 in the box currently showing a figure. If you directly enter a six-digit hexadecimal number into the hexadecimal notation box and press the Enter key, you can check the color.

Samples of typical colors (three-digit hexadecimal notation)

The following are samples of colors in which the intensities of R, G, and B are changed in increments of one step:

	0	1	2	3	4	5	6	7	8	9	a	b	c	d	e	f
`#R00`	`#000`	`#100`	`#200`	`#300`	`#400`	`#500`	`#600`	`#700`	`#800`	`#900`	`#a00`	`#b00`	`#c00`	`#d00`	`#e00`	`#f00`
`#0G0`	`#000`	`#010`	`#020`	`#030`	`#040`	`#050`	`#060`	`#070`	`#080`	`#090`	`#0a0`	`#0b0`	`#0c0`	`#0d0`	`#0e0`	`#0f0`
`#00B`	`#000`	`#001`	`#002`	`#003`	`#004`	`#005`	`#006`	`#007`	`#008`	`#009`	`#00a`	`#00b`	`#00c`	`#00d`	`#00e`	`#00f`

The following are samples of typical colors made by mixing R, G, and B.

An example in which red (R) is set to the maximum("f")
`#fff`	`#fcf`	`#f9f`	`#f6f`	`#f3f`	`#f0f`
`#ffc`	`#fcc`	`#f9c`	`#f6c`	`#f3c`	`#f0c`
`#ff9`	`#fc9`	`#f99`	`#f69`	`#f39`	`#f09`
`#ff6`	`#fc6`	`#f96`	`#f66`	`#f36`	`#f06`
`#ff3`	`#fc3`	`#f93`	`#f63`	`#f33`	`#f03`
`#ff0`	`#fc0`	`#f90`	`#f60`	`#f30`	`#f00`

An example in which red (R) is set to the minimum("0")
`#0ff`	`#0cf`	`#09f`	`#06f`	`#03f`	`#00f`
`#0fc`	`#0cc`	`#09c`	`#06c`	`#03c`	`#00c`
`#0f9`	`#0c9`	`#099`	`#069`	`#039`	`#009`
`#0f6`	`#0c6`	`#096`	`#066`	`#036`	`#006`
`#0f3`	`#0c3`	`#093`	`#063`	`#033`	`#003`
`#0f0`	`#0c0`	`#090`	`#060`	`#030`	`#000`

An example in which green (G) is set to the maximum ("f")
`#fff`	`#ffc`	`#ff9`	`#ff6`	`#ff3`	`#ff0`
`#cff`	`#cfc`	`#cf9`	`#cf6`	`#cf3`	`#cf0`
`#9ff`	`#9fc`	`#9f9`	`#9f6`	`#9f3`	`#9f0`
`#6ff`	`#6fc`	`#6f9`	`#6f6`	`#6f3`	`#6f0`
`#3ff`	`#3fc`	`#3f9`	`#3f6`	`#3f3`	`#3f0`
`#0ff`	`#0fc`	`#0f9`	`#0f6`	`#0f3`	`#0f0`

An example in which green (G) is set to the minimum("0")
`#f0f`	`#f0c`	`#f09`	`#f06`	`#f03`	`#f00`
`#c0f`	`#c0c`	`#c09`	`#c06`	`#c03`	`#c00`
`#90f`	`#90c`	`#909`	`#906`	`#903`	`#900`
`#60f`	`#60c`	`#609`	`#606`	`#603`	`#600`
`#30f`	`#30c`	`#309`	`#306`	`#303`	`#300`
`#00f`	`#00c`	`#009`	`#006`	`#003`	`#000`

An example in which blue (B) is set to the maximum("f")
`#fff`	`#cff`	`#9ff`	`#6ff`	`#3ff`	`#0ff`
`#fcf`	`#ccf`	`#9cf`	`#6cf`	`#3cf`	`#0cf`
`#f9f`	`#c9f`	`#99f`	`#69f`	`#39f`	`#09f`
`#f6f`	`#c6f`	`#96f`	`#66f`	`#36f`	`#06f`
`#f3f`	`#c3f`	`#93f`	`#63f`	`#33f`	`#03f`
`#f0f`	`#c0f`	`#90f`	`#60f`	`#30f`	`#00f`

An example in which blue (B) is set to the minimum ("0")
`#ff0`	`#cf0`	`#9f0`	`#6f0`	`#3f0`	`#0f0`
`#fc0`	`#cc0`	`#9c0`	`#6c0`	`#3c0`	`#0c0`
`#f90`	`#c90`	`#990`	`#690`	`#390`	`#090`
`#f60`	`#c60`	`#960`	`#660`	`#360`	`#060`
`#f30`	`#c30`	`#930`	`#630`	`#330`	`#030`
`#f00`	`#c00`	`#900`	`#600`	`#300`	`#000`

(Note) If you want to refer to color samples other than those above or to full-color samples, you could search on google, etc. by inputting “sample color” or “color code” as a keyword.