With regard to the font (character), apart from the font-size property (which has been introduced), which specifies the size of the character, you can use the font-styleor font-weightproperty.

You can specifyitalic or noneas a value of the font-style propertyto show it in italic.

You can specify one of bold,bolder,lighter or noneas a value of the font-weight propertyto determine the darkness of the font face. When you specify bolder or lighter, the font will be a little bolder or less bold than the current font. When you specify bold, the font will be as bold as prescribed.

The followings are behaviors of each value.

.bigfont {
  font-size: 1.3em;
}
.smallfont {
  font-size: 0.7em;
}
.shatai {
  font-style: italic;
}
.futomoji {
  font-weight: bold;
}

<p> 
  These are normal characters.
  <span class="bigfont"> These are characters of 1.3 em.</span>
  <span class="smallfont"> These are characters of 0.7 em</span> <br>
  <span class="shatai">These are italic characters.</span>
  <span class="futomoji">These are bold characters.</span>
</p> 

On the Web Browser, it will be displayed as follows:

You can use the text-decoration property to specify the decoration of the text.

You can specify one of the following values: underline,overline,line-through,blink and none. The followings are behaviors of each value. (Please note that “none” is not included, because it means do nothing.)

.kasen {
  text-decoration: underline;
}
.uesen {
  text-decoration: overline;
}
.uchikeshi {
  text-decoration: line-through;
}
.tenmetsu {
  text-decoration: blink;
}

<p> 
  <span class="kasen"> A line will be drawn under this text segment.</span>
  <span class="uesen">A line will be drawn over this text segment.</span>
  <span class="uchikeshi">This text segment will be struck through.</span>
  <span class="tenmetsu">This text segment will blink.</span>
</p> 

On the Web Browser, it will be displayed as follows:

As you have been using it, you can use the color property to specify the color of the characters. Precisely speaking, the color of the characters is called “foreground color”. You can specify color in either the RGB color code or color name as a value.

Further, the background color is specified by the background-color property. You can specify one of the following as a value: RGB color code, color name, or transparent. If you specify transparent, the background color of the parent element (parent box) will shine through.

An example of the setting and the resulting display on the Web Browser is shown below.

.fgc_aka {
  color: red;
}

.bgc_usumidori {
  background-color: #cf6;
}

.bgc_usuki {
  background-color: #ff6;
}

<div class="bgc_usumidori"> 
  <p> 
    This is a normal block.
    Light green background is set by the div of the parent element.
  </p>
  <p class="bgc_usuki"> 
    A faint yellow background color is set to this segment.
    Also, the color of the characters <span class="fgc_aka"> is set to red for this 

    particular segment. </span><br>
  </p>
  <p> 
    This is a normal block again.
  </p>
</div>

On the Web Browser, it will be displayed as follows:

You can attach not only a color to the background, but an image as well. You can use the background-image property to paste an image to the background. As a value, you specify a background image using the url()function.

Now, let us paste this as a background image.

.bg_img {
  background-image: url("../week10/bgpt.png");
}

Let us define a style as above and use it in HTML in such manner as shown below.

<p> 
  This is a normal block.
</p> 
<p class="bg_img"> 
  A background image is pasted to this block.<br>
  The original image consists of a combination of 4 small squares.<br>
  Actually that image is displayed repeatedly, isn’t it? 
</p> 

Then, on the Web Browser, it will be displayed as follows:

You can use the background-repeat property to control the way the background image is repeated. You can specify one of repeat,repeat-x,repeat-y, or no-repeat as a value. The values mean “displays the image repeatedly until it is spread over the whole element”, “repeat the image to the horizontal direction only”, “repeat the image to the vertical direction only”, or “just one image is displayed; no repeating”, respectively.

When the text is scrolled, usually the background image moves together with the text (foreground). However, you can set the image not to scroll even when the text is scrolled. You can specify this using the background-attachment property. Specifying either scroll or fixed means a behavior, either “the background image scrolls together with the text” or “the background image does not move even the text is scrolled”.

Now, let us paste this as a background image.

.bg_img_no_rep {
  background-image: url("../week08/bgpt.png");
  background-repeat: no-repeat;
}
.bg_img_suihei {
  background-image: url("../week08/bgpt.png");
  background-repeat: repeat-x;
}

Let us define a style as above and use it in HTML in such manner as shown below.

<p class="bg_img_no_rep"> 
  Only one background image is pasted to this block.<br>
  The value of the background-repeat property is set to “no-repeat”. <br>
  Only one image is displayed at the top left corner of this block.
</p> 
<p class="bg_img_suihei"> 
  One background image is pasted to this block in such way that it will appear 

  repeatedly in the horizontal direction.<br>
  The value of the background-repeat property is set to “repeat-x”<br>
  The specified image is displayed repeatedly in the horizontal direction.  

  However, it is not displayed in the vertical direction.
</p> 

Then, on the Web Browser, it will be displayed as follows:

If we set different values to the same property, which setting would take priority?

For instance, we define the following styles. Although the text-align property is set to both of them, one is left and the other is right.

p.left_red {
  text-align: left;
  color: red;
}

p.right_bigfont {
  text-align: right;
  font-size: 1.3em;
}

What happens if we use both styles at the same time as shown below? Let us try twice, changing the order of the class name just in case the order of the class name we use when we set the styles in the HTML might have some influence over the result.

<p class="left_red right_bigfont"> 
  December 1, 2005<br>
  December 1, 2005
</p> 
<p class="right_bigfont left_red"> 
  December 1, 2005<br>
  December 1, 2005
</p> 

Then, on the Web Browser, it will be displayed as follows:

The result of the display is the same for both blocks. The text is right-aligned, characters are “red characters”, and the “font size is large (the size is 1.3 em)”. The results show that the order of setting the class selector in the HTML file does not have any effect on how the file is displayed on the Web Browser.

In addition, we can see that both class selectors worked all right, because the color of the character is red and the font size is large. However, the text is right-aligned. This shows that the text-align property of the p.right_bigfont class selector, which is defined later in a CSS file, is given priority.

As you can imagine from this result, on the CSS, “ the style specified (defined) later is given priority when applied”. For this reason, you need to be careful when you use two or more selectors at the same time which have the same property, because the order on the CSS; i.e., which one is defined first/later, influences the resulting display.