The font size on the site can be set as if hTML helpand 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 have already considered 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 \u200b\u200bfrom 1 to 7 (the default is 3, which corresponds to 13.5 points for Times New Roman font). Another option for setting the attribute is “+1” or “-1”. This means that the size will be changed from the base one point more or less, respectively.
This method is quite easy to use and is indispensable when 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 with CSS
In CSS, the property is applied to change the font size font-sizewhich applies as follows:
In the example shown, 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 \u200b\u200bextra-small (x-small, xx-small), extra-large (x-large, xx-large) can also be used.
- larger, smaller - set the relative size (less or more relative to the parent element).
- 100% - the relative size is set (in percent relative to the parent). For example: h1 (font-size: 180%;) This means that the size of the tag H1 will be 180% of the base font size.
- Other options for setting the 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 width of the browser window;
- 1vh - 1% of the height of the browser window;
How do I change the font?
When creating a website, it is constantly necessary to change the text font for various parts and elements of HTML pages, because this not only adds uniqueness and style to the site, but also improves the quality of information perception. There are special tags for this in HTML, and we will talk about them in this tutorial, which will be one of the biggest in this tutorial. But, as I told you earlier, do not try to memorize everything by heart, it is not necessary, the main thing is to figure out and understand what is being discussed at each stage of the lesson.
Changing font styles
There are more than one way to change font styles in HTML, and you will soon see that. Now let's take a look at a few new tags:
... and ... - highlight text bold font.
... and ... - highlight text in italics.
... - displays text in superscript, for example E \u003d mc 2.
... - displays the text in subscript, for example H 2 SO 4.
All of these tags are inline (inline, line level), that is, they do not create line breaks before and after themselves, but are located on one line. They can also contain only built-in elements, so they can be freely nested within each other. Most importantly, do not forget about correct nesting: a tag that was opened earlier should be closed later.
I think you've noticed that there are two tags each for bold and italic. The fact is that ordinary browsers display the content of these tags in the same way, but non-visual (voice) browsers can emphasize the text inside and ... Therefore, if you want to highlight some words or phrases in order to attract a reader, then it is better to use these tags, although, by and large, there is no difference.
You may ask, "But are the above tags really all that can be used to highlight text in HTML?" Of course not! There are also tags and , underlining text as well as tag that displays strikethrough text. But, you see, these tags are obsolete in HTML and, like the align attribute, may soon be lost on browsers. Therefore, I will show you another method that you can use without fear. And it consists in using the style attribute, and it is permissible to specify it inside any tags... The general syntax is as follows:
<тег style \u003d "text-decoration: underline"\u003e ... - underlines the text.
<тег style \u003d "text-decoration: overline"\u003e ... - overlines the text.
<тег style \u003d "text-decoration: line-through">... - crosses out the text.
An example of changing font styles
Bold font. Italics.
Bold italic.
H 2SO 4 - sulfuric acid formula written in italics.
An underlined paragraph of text.
Plain text, strikethrough bold.
Result in the browser
Now I would like to make one clarification about the style attribute. Style is a completely normal tag attribute, but it belongs to Cascading Style Sheets (CSS). In the distant past, all the functions for structuring an HTML page as a whole and for the external presentation of each element separately (color, shape, position on the page, etc.) were taken over by hTML language... But then the developers of the language decided to differentiate between these functions and created CSS. Consequently, many tags or tag attributes have become obsolete. Therefore, in order not to fill your head with unnecessary information, in this tutorial I also replaced them with styles, that is, the style attribute. Its general syntax is as follows:
<тег style \u003d "CSS property: value">...
You won't lose anything by using style, but you will learn how to write competent HTML, and as a bonus, you will also learn a little CSS.
Tag or what to do when there are no required tags
Well, while everything is clear? Okay, then the question. But what will you do if, for example, you need to cross out not the entire paragraph, but only half of the text, and not make it either bold or italic? Well, don't worry, one very convenient and necessary tag will help you here.
So, meet - .... This tag is also inline (inline, line level) and can contain any inline tags, but that's not the point. By itself , without attributes, does not add any changes to either the text or the tags inside it. And it was created specifically for styles, that is, in fact, for the style attribute. It is thanks to this attribute, or rather it different meanings, at certain properties appear. So, now let's study an example.
An example of using the SPAN tag
Plain text unchanged.
More plain text. Underlined. Strikethrough.
Result in the browser
Plain text unchanged.
More plain text. Underlined. Strikethrough.
Change the name (typeface) of the font
Not sure what a font name is? Surely many of you have at least once filled text in Microsoft Word or OpenOffice Writer and saw a menu like this:
These are the names of the fonts that are on your computer and are used not only by Word or Writer, but also by many other applications, including browsers. The name (typeface) of a font defines its very drawing that distinguishes one font from another.
I strongly advise you not to use any exotic fonts, as they may not be on the computer of a person who visits your site and then instead of letters he will see various incomprehensible symbols or squares. Here is a list of the most common fonts that are almost certainly on every user's computer:
By default, almost all browsers use the "Times New Roman" font, and to change it, use the same style attribute that can be applied inside any tag... The general syntax is as follows:
<тег style \u003d "font-family: font name, family">...
If the name of the font consists of several words, then it must be closed in single quotes. It is allowed to indicate not one, but several names of fonts separated by commas, and then, if the first font is not on the computer, the second, third, etc. will be used. But at the end, be sure to put the name of the entire font family, in this case, if the browser does not find a single font, then it will apply the font that is most suitable for this family.
To change the font on the entire page - just specify the style attribute in the tag
... And if you need to change the font for a separate part of the text, then enclose it in the tag and apply the attribute to it.Example of changing font names
This is Arial, if not, then Verdana, and if not, then any other sans-serif.
This is Comic Sans MS or any cursive.
This is again Arial, Verdana or any sans-serif. And this is Courier or any monospace.
Result in the browser
Well, figured out the example? I will make one explanation, the understanding of which will seriously facilitate your life in the future, although I think many have already guessed. So, if tags are nested within each other and several of them make changes of the same type (for example, changing the name of the font), then descendant tags override the properties of the ancestor tags. If nested tags do different changes, then they complement each other, that's all.
Changing the font size
The HTML language is limited to only seven font sizes, which, you see, is very small for a good site. Therefore, everyone has been using CSS for resizing for a long time, and now you will learn how to do it too.
There are about ten units of measurement in CSS, but we will only consider the three most popular ones - points (pt), pixels (px), and percentages (%). So:
- pt - Items. One point is 1/72 inch and one inch is 2.54cm. Therefore, 1pt \u003d 0.03527778cm. This is an absolute value, since the size specified in points does not depend on anything.
- px - Pixels. Measured in pixels on a computer monitor. A pixel is the smallest point on a monitor and is a relative value as its size depends on the current screen resolution and the size of the monitor itself.
- % - Interest. It is calculated as a percentage, where the value of the parent tag is taken as 100%, and if it is not specified, then the value in the browser is default. This is also a relative value, because the parent's font size can be completely different, and users can freely change the font size in the browser.
The style attribute is used to specify the font size and can be specified inside any tag... The general syntax is:
<тег style \u003d "font-size: size">...
As with font names, to change the size of the font across the entire page, simply specify the style attribute in the tag
... And if you need to change the font for a piece of text, then enclose it in the tag and apply the attribute to it.An example of changing the font size
This font size is 90% of the browser's default size.
This size is 90% narrower than the size in the BODY tag.
The heading font size is 120% of the BODY size.
This is again 90% of the default browser size. The size of this font is 15 points.
Result in the browser
This font size is 90% of the browser's default size.
This size is 90% narrower than the size in BODY.
The heading font size is 120% of the BODY size.
This is again 90% of the default browser size. The size of this font is 15 points.
The size of a font depends not only on its explicit indication, but also on its name (typeface) - different fonts can have completely different heights and widths of letters, as well as letter spacing.
A little more about the style attribute
It's time to reveal to you one more secret of this wonderful attribute, but again, first I will ask you a question. What would you do if you had to set the name of the font Arial to 80% for the entire paragraph? And I'll tell you, you would write something like this:
Paragraph text.
Paragraph text.
Or just like that.
Paragraph text.
I'm right? Well, if the first two options are in principle correct, then the last one is generally with an error, since, if you remember, there can be no two identical attributes in one tag. Now it's time to remember that style is not just an attribute, but a CSS-related attribute. Look at this:
Paragraph text.
Much easier, right? The most important thing is not to forget to put a semicolon (;) between adjacent styles and put all this "economy" in double quotes (""), otherwise only the first style will be applied, and the browser will ignore the rest. Well, we always put double quotes with you, right?
So, this lesson turned out to be very intense, so do your homework and get some rest.
Homework.
- Create a title for the article and its two sections, but also underline the section titles.
- Make sure that when you hover the mouse cursor over the title of the article, the corresponding caption appears.
- Write one paragraph at the beginning of the article and two in each section.
- Set the entire page to Arial at 90% of your browser's default size.
- Set all headings to Times and set your article title to 150% font size and subheadings to 120%.
- In the first paragraph, highlight two words in bold and one in italics. In the second - a phrase of several words in bold italics. In the third, underline the italicized phrase. In the fourth, cross out half of the bold phrase.
- Write in the last paragraph the formula for alcohol: C 2 H 5 OH.
It would seem, why know HTML tags for text, if now almost any admin panel has a convenient one that sets them automatically?
The fact is that formatting content on a site is fundamentally different from working in office applications. It is not enough just to give the text an attractive look, because not only the display of a web page, but also its promotion in search engines depends on the correct design.
HTML tags and attributes: syntax basics
Any text has hidden code, which "explains" to the computer what and how to display on the screen. All information is recorded using a set of universal elements.
Basically, HTML tags for text are commands that add or change blocks to a page. appearance... The correct recording format looks like this:
Please note that not all tags are paired. For instance,
(line skip) or
(adding a horizontal line) doesn't need to close at all.
Why you can't copy articles from Word and other programs into the site editor
Although modern office programs use the same HTML tags for text, in 99% of cases the native code is unusable for web pages. Even if the document is displayed normally in the application itself, the formatting may get lost when inserted into the site. In addition, due to the large number of unnecessary tags and attributes, search engines cannot adequately analyze the page content. Which, in turn, makes it difficult to promote your resource.
To get clean and relevant code, you first need to clear the text of the HTML tags generated by a regular editor. There are several ways to do this:
- "Run" the article through "Notepad" and only then insert it into the site. The application erases all HTML, so after that you have to reformat the text again (using editor tools or manually).
- Write and publish articles via LiveWriter. The popular blog editor immediately generates the correct code. And in a separate tab you can see how the text will look on the site.
- Use HTML Cleaner. This online service does not destroy the entire code, but only extra fragments. Filters allow you to choose which tags to keep. There is also a powerful visual formatting editor that adds already optimized commands to the code.
Paragraphs
This element is present in almost all articles. Each paragraph should be located inside such a container - this simplifies formatting and allows you to maintain a consistent style across all pages of the site. For convenience, the tag
Always write with new line.
Alignment
The separate HTML tag "Text Alignment" has been long gone. Instead, the generic ALIGN attribute was created. To change the position of the text block on the page, you must select one of 3 values \u200b\u200b- CENTER, RIGHT or LEFT. Likewise, you can set alignment for other elements such as headings.
In some situations, other tags are used for alignment, for example, you can position using the element
Headings and subheadings
The subheading system allows you to create a logical structure for your content. When the text is divided into semantic blocks, it is much easier for the reader to concentrate and assimilate new information... Search engines also analyze headings to understand which requests to promote the page on. This is why SEO experts recommend using thematic keys in them.
HTML uses six levels of subheadings - from
before ... This system has a clear hierarchy:...
... Main article, product in the online store, etc.). There can only be one in the text ... As a rule, it contains the main keyword.
...
... Second level subheadings break the text into semantic blocks. For example, if you are rating laptops, you can do several with the names of different models.
...
... The third level is needed if the text is between two also breaks down into small blocks. In our example, these can be evaluation criteria - "Performance", "Memory", "Video card", etc. for each model.
, ,
... In practice, they are extremely rare. But the general principle is the same - they should be “nested” in a top-level subheading block.
...
... Main article, product in the online store, etc.). There can only be one in the text... As a rule, it contains the main keyword.
...
... Second level subheadings break the text into semantic blocks. For example, if you are rating laptops, you can do severalwith the names of different models.
...
... The third level is needed if the text is between twoalso breaks down into small blocks. In our example, these can be evaluation criteria - "Performance", "Memory", "Video card", etc. for each model.
,
... In practice, they are extremely rare. But the general principle is the same - they should be “nested” in a top-level subheading block.,
Be sure to maintain the correct hierarchy. Returning to our example, this means that you cannot immediately enter the names of the models as
or ... And even more so, use subheadings of different levels for homogeneous blocks (for example, select the laptop that took the last place in the rating using ).
).
And here is a diagram that will help you instantly understand and remember the correct header structure in HTML.
Lists
Any enumerations and instructions are best done in the form of lists, using special HTML tags for text ( typical mistake - just a few paragraphs
Which start with a hyphen or number).
The structure of such blocks is very simple. First, we define the type of the list - bulleted or numbered.
All elements are in between the opening and closing tags. Each item in the list starts on a new line and has a format. The number of elements is not limited.
Choice and its attributes
What can be changed using this font and color of it - and without adding new classes to CSS. This is very convenient when you only need to select one sentence or fragment.
has several attributes:
- Face... Allows you to change the font of the text. You can list several options separated by commas (Tahoma, Verdana). If the user does not have the first font installed, the system simply uses the alternative.
- Size... To increase or decrease the text, enter a value between 1 and 7 in quotes.
- Color... Depending on the design, you can choose one of the standard shades (red, green, blue) or enter a code for any color of your choice.
Don't use paragraphs formatted with , instead of subheadings. Better to set the same styling parameters with the correct tag.
Ways to select text
Monotonous text is tiring, even with paragraphs. To grab attention and whet the reader's interest, key points it is recommended to highlight it graphically. Here are some commands to help you with this task.
... ... An extremely popular HTML tag. Bold text immediately catches the eye, and therefore it is convenient to use it to highlight important theses and facts.
Many confuse tags and ... There is no visual difference, but they work in different ways. The first one simply changes the look of the text, while the second acts as an "index" and highlights the most important fragments (thematic keywords and phrases for SEO).
... ... Elegant and strict italics are ideal for formatting scientific terms, foreign words and a variety of quotations. In serious publications, the titles of works of art are also marked with oblique text.
... ... Perhaps not a single HTML tag has caused so much controversy. Underline text is rarely used, because this way highlighting has historically been associated with hyperlinks. If you use in articles, please note that this is only suitable for short fragments - no more than 1 line.
...
... An interesting tag that allows you to make the part very relevant in an advertisement - for example, to emphasize the contrast between the old and new prices.
... ... The easiest way to increase the font size without any additional parameters.
... ... Works in the same way as the previous tag. The text located inside is reduced relative to the main one.
... ... The correct name for this format is superscript. Basically this tag is for math degrees and footnotes. It decreases the font size and shifts the selected text up.
... ... A subscript is often found in various formulas. The selection is positioned below the main text.
Sense containers
Since some blocks were found in many texts, they began to create special tags for them. This simplifies formatting, because if each type of content has its own set of styles, it is enough to select a piece of text and indicate what information it contains.
...
... Tag for adding computer codes. Indispensable in programming articles with examples - commands are not executed, but displayed as plain text.
... ... Designed for quotations - for example, key excerpts from interviews.
... Delivers part of the text into a separate block. By default, the selection has a larger margin on the left, but in CSS you can also change the size, style, and color of the text.
... ... An additional tag that contains information about the author, including links.
The dividing line
A simple line can be used to mark the logical ending of a large section.
does not apply to paired tags. This means that the closing format element not needed.
Using the WIDTH attribute, you can make the separator shorter by setting the appropriate size in pixels or as a percentage of the window width.
By learning how to use tags to format text in HTML, you will not only make your articles easier to read, but also improve your SEO.
In this tutorial, we will look at the last attribute of the tag which sets the color of the text. By default, the text is black with a white background. In order to change text color in html, you need to apply the color attribute of the tag :
To set a color, just specify its name, for example: red, green, blue. Let's look at a small example:
Green text
Red text
Purple text
Let's see the result in a browser:
The text in the first paragraph turned green, in the second it turned red, and in the third it turned purple. In total, there are 16 names for the primary colors and 130 additional ones. You can see the full list of colors in the html color table.
This way of naming color is very simple, but very limited. Therefore, in order to change the color in the html code, they often use a hexadecimal number preceded by a pound sign (#), for example:
With 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 the same Photoshop. Let's look at an example and write the following code:
Green text
Red text
Purple text
Let's save the file and see 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 the HEX format.
Now you have learned how to change the color of text in html and at the end of the lesson I suggest repeating all the attributes of the tag , and set several parameters for the text at once, namely: font, size and color. Write an example:
Set the text font, size and color
Set the text font, size and color
From the author: welcome to the webformyself blog pages. In this article, I would like to answer the question of how to set the font in html. Some people still do it the wrong way, so it is very important to understand the issue more carefully.
How the font was set before
Previously, html used a special paired font tag that acted as a container for changing font parameters such as typeface, color, and size. Today, this approach is fundamentally wrong. Why? Web standards dictate that the appearance of a page should not be written in html markup. In addition, the tag is fully supported only in very old version HTML - HTML 3.
Setting the font in html correctly
Today, for this purpose, it is worth using exclusively the capabilities of css. This language is just created in order to define the appearance through it. Besides, there are many more properties in css that affect the appearance of the text. Let's consider a little each of them:
Font-style. Defines the style of the text. It takes the following values:
Font-variant. The property determines how to interpret the spelling of lowercase letters. Has only two meanings:
Normal is normal behavior.
Small-caps - all lower case are converted to all caps and are slightly reduced in size compared to regular 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 - bold text
Bolder - will be displayed bolder than it is displayed on the parent element.
Lighter - the letters will have less weight compared to the parent.
It's that simple. In addition, it is possible to set a value in the form of numbers from 100 to 900, where 900 is the bold one. For example, normal is 400 and bold is 700.
Unfortunately, most browsers do not recognize these numeric values \u200b\u200band can only use two values \u200b\u200b- normal and bold. For the experiment, I created 9 paragraphs and gave each a different weight of the text - from 100 to 900. Then I opened this web page in different browsers and none displayed different weights. Conclusion: Better not to use numeric values.
Font-size. This property sets the size of the letters. The size can be set 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 the 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 an alternative option or a whole family separated by commas. Fonts are subdivided into the following families:
Each family fits different needs. For example, fantasy is often used to design various headers, and monospace is used to display machine code, etc. You can find out more specifically the names of the fonts, for example, in text editor or in photoshop.
Abbreviated notation
Everything we've covered above can be very easily coded into essentially one line with the awesome font property that brings all the settings together. You need to write down in the following sequence:
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 any parameter, then it is simply omitted. Only the font size and family are required here, everything else is optional if it is not necessary. Using shorthand notation allows you to greatly shorten the code in css. Use it because it is good optimization for the site to work.
How to set font in html to different elements
So, for some reason we got carried away with describing all the properties for a font. This is very important information, but how to ask it correctly? Use the desired selectors to reach the desired elements. Further I offer some examples:
p a (font-family: Verdana, sans-serif;)
For tabular data, many font parameters are set: reduced uppercase letters, bold, font size and name.
