Task

Change the color of the title text and the background below it.

Solution

To change the background color below text, use the background universal property, which should be added to the h1 selector. The title color is changed using the color property, which is also added to this selector (Example 1).

Example 1: Header background color

HTML5 CSS 2.1 IE Cr Op Sa Fx

Header background color

Law of the external world

The law of the external world methodologically deduces an intelligible world, although in officialdom the opposite is accepted.

Result this example shown in Fig. 1.

Rice. 1. Background color under text title

Please note that the size of the colored rectangle is affected not only by the size of the text, but also by the padding around it. Therefore, adjust the size of the background using the padding property, again adding it to the h1 selector.

To change the font use a tag with the FACE attribute. You can specify the font by name (Arial, Tahoma, Verdana) or type (for example, monospace). It is advisable to list several font names to avoid a situation where it turns out that the user does not have the required font installed. I recommend using at least one of the generally accepted fonts (for example Arial). I do not recommend using more than 2-3 different fonts on one page, otherwise the page will look clumsy and unprofessional.

Example:

Changing the font size of an html page

To change the font size, use the SIZE attribute. The larger the font, the easier the text becomes to read. However, small font allows you to fit more information within the screen. Using this attribute with a tag , you can change the text size of the entire web page. Using the SIZE attribute in conjunction with a tag , you can influence the appearance of a single piece of text. 7 font sizes available. The smallest is designated by the number 1, and the largest by 7.

You can change the font using tags And . enlarges the font of the specified fragment in relation to the previous text, and , accordingly, reduces.

By changing the size of individual letters, you can achieve interesting effects. For example, this way you can get a drop cap - a large capital letter at the beginning of a paragraph.

Example:

Selecting the font color of an html page

Displaying portions of a Web page's text in different colored fonts makes it more attractive.

Using the TEXT attribute in the context of a tag , you can change the entire text color of a web page. Applying the COLOR attribute with a tag (has a higher priority) allows you to interact with the appearance of a single piece of text.

To change the text color, you need to know the name of the color or its hexadecimal code. The code consists of the pound symbol # and a number representing the intensity of the red, green and blue components of the color. Only 16 standard colors can be referred to by name.

Name of colors Code aqua ##00FFFF black ##000000 blue ##0000FF fuchsia ##FF00FF gray ##808080 green ##008000 lime ##00FF00 maroon ##800000 navy ##000080 olive ##808000 purple ##800080 red ##FF0000 silver ##C0C0C0 teal ##008080 white ##FFFFFF yellow ##FFFF00

  • Place the cursor inside the tag . Styles are defined inside this tag if an internal style sheet is used.
  • Enter'); var formated_str = arr_splits[i].replace(/\surl\(\'(?!data\:)/gi, function regex_function(str) ( return ' url(\'' + dir_path + '/' + str.replace (/url\(\'/gi, '').replace(/^\s+|\s+$/gm, ''); )); splited_css += ""; ) var td_theme_css = jQuery('link#td-theme-css'); if (td_theme_css.length) ( td_theme_css.after(splitted_css); ) ) )); ) ))();