Which tag sets the base font size. Set the text color. The color attribute of the font tag
To change the font use a tag With 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. How larger font, the easier the text becomes to understand. However, small font allows you to fit more information within the screen. Using this attribute with tag
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 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 more high priority) allows you to interact with the appearance of a single piece of text.To change the color of the text, 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
The font size on the website can be set as follows: HTML help, and using CSS. Let's consider both options.
Setting font size using HTML
The font size on the page can be determined using the tag font HTML. In the article we already looked at the tag font and its attributes. One of the attributes of this tag is size, which allows you to set the font size. It is applied as follows:
Website builder "Nubex"
Size can take values from 1 to 7 (the default is 3, which corresponds to 13.5 points for the Times New Roman font). Another option for specifying the attribute is “+1” or “-1”. This means that the size will be changed relative to the base by 1 point more or less, respectively.
This method is quite easy to use and is indispensable if you need to change the font size of a small piece of text. Otherwise, it is recommended to style the text using CSS.
Setting the font size using CSS
In CSS, you can change the font size by using the property font-size, which is applied as follows:
In the example below, the font size is set in pixels. But there are other ways to set the size:
- large, small, medium- set the absolute size (small, medium, large). The values extra-small (x-small, xx-small), extra-large (x-large, xx-large) can also be used.
- larger, smaller- ask relative size(less or more relative parent element).
- 100% - the relative size is set (as a percentage relative to the parent). For example: h1 ( font-size: 180%; ) This means the size of the tag H1 will be 180% of the base font size.
- Other options for setting relative size:
- 5ex- means that the size will be 5 letter heights x from the base font;
- 14pt- 14 points;
- 22px- 22 pixels;
- 1vw- 1% of the browser window width;
- 1vh- 1% of the browser window height;
From the author: Welcome to the pages of the Webformyself blog. In this article I would like to answer the question of how to set a font in html. Some people are still doing it the wrong way, so it's important to look into the issue more thoroughly.
How the font was set before
Previously, html used a special paired font tag, which acted as a container for changing font parameters, such as typeface, color and size. Today this approach is fundamentally wrong. Why? Web standards specify that the appearance of a page should not be specified in html markup. In addition, the tag is fully supported only in very old HTML versions– HTML 3.
Setting the font in html correctly
Today, for this purpose it is worth using exclusively css features. This language was created precisely in order to determine appearance through it. In addition, CSS has many more properties that affect the appearance of the text. Let's look at each of them a little:
Font-style. Defines the style of the text. Takes the following values:
Font-variant. The property specifies how the spelling of lowercase letters should be interpreted. Has only two meanings:
Normal – normal behavior.
Small-caps - everything lower case are converted to capital letters, and their size is slightly reduced compared to normal font.
Font-weight. Determines the boldness of the text. The value can be set keywords or a numeric value. Let's look at all the options:
Normal – normal text
Bold – text with bold style
Bolder – will appear bolder than the parent element.
Lighter – letters will have less boldness compared to their parent.
It's that simple. In addition, it is possible to set the value in the form of numbers from 100 to 900, where 900 is the boldest. For example, the normal value corresponds to 400, and the bold value corresponds to 700.
Unfortunately, most browsers do not recognize these numeric values and can only use two values: normal and bold. For the experiment, I created 9 paragraphs and gave each a different text weight - from 100 to 900. Then I opened this web page in different browsers and none displayed different styles. Conclusion: better not use it numeric values.
Font-size. This property specifies the size of the letters. The size can be specified in various relative and absolute values. Most often the size is specified in pixels, relative units em and percentage. If you want to learn more about setting size in CSS, then read this one, where everything is described in more detail.
Font-family. Perhaps the most basic property that determines the family or specific name of the font used. If you are using specific name, then you need to make sure that the specified font is found on the computers of all users. For reliability, you need to write it separated by commas Alternative option or a whole family. Fonts are divided into the following families:
Each family suits different needs. For example, fantasy is often used to design various headers, and monospace is used for output machine code etc. You can find out more specifically the names of the fonts, for example, in text editor or in Photoshop.
Shorthand notation
Everything that we discussed above can be very easily written down in essentially one line using the wonderful font property, which brings together all the settings. You need to write it in the following order:
Font: font-style | font-variant | font-weight | font-size | font-family;
Font: font-style | font - variant | font - weight | font-size | font - family ; |
If you do not need to specify a parameter, it is simply omitted. Only the size and font family are required here; everything else is optional if it is not necessary. Using shorthand notation allows you to greatly reduce the code in css. Use it because it is good optimization for the operation of the site.
How to set the font in html to different elements
So, for some reason we got very carried away with describing all the properties for the font. This is very important information, but how to set it correctly? Use the right selectors to reach the right elements. Below I offer a few examples:
p a( font-family: Verdana, sans-serif; )
For tabular data, many parameters are set font: reduced capital letters, bold style, font size and name.
In this tutorial we will look at the last tag attribute , which sets the color of the text. By default, the text is black, which is displayed on a white background. In order to change text color in html, you need to apply the attribute tag color :
To set a color, just specify its name, for example: red, green, blue. Let's consider small example:
Green text
Red text
Text purple
Let's see the result in the browser:
The text in the first paragraph turned green, the second paragraph turned red, and the third paragraph turned purple. In total, there are 16 names of primary colors and 130 additional ones. Full list colors you can see in the html color table.
This way of indicating color is very simple, but very limited. Therefore, in order to change the color in the html code, they often use hexadecimal number preceded by a hash sign (#), for example:
Using this designation you can get more than 16 million colors and their shades! You can get the color code using the HEX color converter, which is available on the site, or using the color palette in Photoshop. Let's look at an example and write the following code:
Green text
Red text
Purple text
Let's save the file and look at the result:
As you can see, we gave the text the same colors as in the first example, only here we used hexadecimal system calculus or in other words, we specified the color in HEX format.
Now you have learned how to change the text color in html and at the end of the lesson I suggest repeating all the tag attributes , and set several parameters to the text at once, namely: font, size and color. Write down an example:
Set the text font, size and color
Set the text font, size and color
