CSS Font

CSS Font

CSS gives you great control over the way your text is displayed. You can change the text size, color, style, and more. font-family: [[<family-name> | <generic-family>],]* [<family-name> | <generic-family>] You probably already knew how to make text bold or underlined,  fisrt start the css font how to use this property and how to learn this css color. Font families may be assigned by a specific font name or a generic font family. Obviously, defining a specific font will not be as likely to match as a generic font family. Multiple family assignments can be made, and if a specific font assignment is made it should be followed by a generic family name in case the first choice is not present.

CSS Font Color

Although the color of the text seems like it would be part of CSS Font, it actually is a standalone attribute in CSS. This could be for many reasons, including the fact that it will be used a great deal, so why make the coder type out "font-color", css font color example as mentioned below where you will learn how to apply css font color and learn this with the help of example .

h4 { color: red; }



h5 { color: #9000A1; } 



h6 { color: rgb(0, 220, 98); } 

 
you will apply different heading section in html and display the result for html css highly recomend.

In the above example we have define the thee exaple with different heading tag:  a color name, hexadecimal values, and RGB. Check out the list of supported color names. Hexadecimal form is a pound sign (#) followed by at most 6 hex values (0-F). RGB defines the individual values for Red, Green, and Blue.

Example form: rgb(Red, Green, Blue); with the range of 0-255 for each value. this is automatically detact the red blue and green color. 

CSS Font Family

CSS Font families can be divided into two groups:  one you will define that font  computer will learn easly and that font should be include in website or install the font . if in case the font is not include on  web, its shows by default font and your style will not apply on website. A sans-serif font does not include the small lines at the end of characters, on the other side serif font does include these small lines. When choosing which type you prefer, you will see the example here you learn have shown that sans-serif fonts are much easier to read on a computer monitor than serif fonts.

h4 { font-family: sans-serif; }



h5 { font-family: serif; } 



h6 { font-family: arial; } 

 

As you probably noticed throughout Hiscript.com, we do not use serif fonts, that font is not include or not install on system or  except in special cases. you should define clear where the system will check out easly

CSS Font Size

You can change the size of your fonts by using differnt value, percentages, or key terms. Using these font size you will be able to increase or decrease the size of font according to your website , and create more attractive.  Percentages are great when you want to change the default font.

In this example

you will will learn css font size how to change the font size by using css tutorial on hiscript

p2 { font-size: 130%; } 



ol{ font-size: 20px; } 



ul{ font-size: x-large; }

 

Though key terms are not more popluer use this style, the common terms are: xx-large, x-large, large, medium, small, x-small, and xx-small.

CSS Font Style

CSS Font-Style is where you define if your font will be italic or not. Possible key terms are the following: italic, oblique, and normal.

p1 { font-style: italic; }



h4{ font-style: oblique; }

 

CSS Font Weight

If you want to control the weight of your font (its thickness), using font weight is the best way to go about it. We suggest that you only use font-weight in multiples of 100 (e.g. 200, 300, etc) because any less and you probably will not see any difference. The values range from 100 (thin)-900 (thick).

p { font-weight: 100; } 



ul{ font-weight: bolder; }

Available key terms for font-weight: bold, bolder, and normal.

CSS Font Variant

CSS Font Variant allows you to convert your font to all small caps. Note: not every font supports CSS Font Variant, so be sure to test before you publish.

p1 { font-variant: small-caps; }