The CSS textual style properties characterize the text style family, strength, estimate, and the style of a text.
Difference Between Serif and Sans-serif Fonts
CSS Font Families Property
In CSS, there are two kinds of text style family names:
- generic family - a gathering of text style families with a comparative look (like "Serif" or "Monospace")
- font family - a particular textual style family (like "Times New Roman" or on the other hand "Arial")
|Generic family||Font family||Description|
|Serif||Times New Roman
|Serif textual styles have little lines at the finishes on some characters|
|"Sans" implies without - these text styles don't have the lines at the closures of characters|
|All monospace characters have the equivalent width|
The text style family property determines the textual style for a component.
The textual style group of a content is set with the
font-family property should hold a few text style names as a "fallback" framework.
On the off chance that the program does not bolster the primary textual style, it attempts the following text style, thus
Start with the text style you need, and end with a conventional family, to let the program pick a comparative textual style in the nonexclusive family, if no different textual styles are accessible.
Note: If the name of a textual style family is more than single word, it must be in quotes, as: "Times New Roman".
More than one textual style family is determined in a comma-isolated list:
textual style family: "Times New Roman", Times, serif;
font-style property is for the most part used to determine italic text.
This property has three values:
- normal - The content is appeared/li>
- italic - The content is appeared in italics
- oblique - The content is "leaning" (sideways is fundamentally the same as italic, however less supported)
text style: normal;
text style: italic;
text style: oblique;
font-size property sets the span of the text.
Being ready to deal with the content size is imperative in website composition. Be that as it may, you ought not utilize text dimension changes in accordance with make passages look like headings, or headings look like paragraphs.
Always utilize the best possible HTML labels, as <h1> - <h6> for headings and <p> for paragraphs.
The text dimension esteem can be a flat out, or relative size.
- Sets the content to a predetermined size
- Does not enable a client to change the content size in all programs (awful for openness reasons)
- Absolute estimate is valuable when the physical size of the yield is known
- Sets the size with respect to encompassing elements
- Allows a client to change the content size in browsers
Set Font Size With Pixels
Setting the content size with pixels gives you full authority over the content size:
text dimension: 40px;
text dimension: 30px;
text dimension: 14px;
Set Font Size With Em
To enable clients to resize the content (in the program menu), numerous designers use em rather than pixels.
The em estimate unit is suggested by the W3C.
1em is equivalent to the present text dimension. The default content size in programs is 16px. In this way, the default size of 1em is 16px.
The size can be determined from pixels to em utilizing this equation: pixels/16=em
text dimension: 2.5em;/* 40px/16=2.5em */
text dimension: 1.875em;/* 30px/16=1.875em */
text dimension: 0.875em;/* 14px/16=0.875em */
In the precedent over, the content size in em is equivalent to the past model in pixels. Be that as it may, with the em measure, it is conceivable to alter the content size in all browsers.
Unfortunately, there is as yet an issue with more seasoned forms of IE. The content winds up bigger than it ought to at the point when made bigger, and littler than it should when made smaller.
Use a Combination of Percent and Em
The arrangement that works in all programs, is to set a default text dimension in percent for the <body> element:
text dimension: 100%;
text dimension: 2.5em;
text dimension: 1.875em;
text dimension: 0.875em;
font-weight property determines the heaviness of a font:
textual style weight: normal;
textual style weight: bold;
font-variant property determines regardless of whether a content ought to
be shown in a little tops font.
In a little tops textual style, every single lowercase letter are changed over to capitalized letters. Be that as it may, the changed over capitalized letters shows up in a littler text dimension than the first capitalized letters in the text.
textual style variation: normal;
textual style variation: little caps;