CSS - Font Formatting
Here you learn how to format fonts using CSS.
Bold & Italic Font
External CSS File
This is your external CSS file named "stylesheet.css".|
.fontbold { font-weight: bold; } .fontitalic { font-style: italic; } | ||
PHP Page
|
<html> <head> <title>HTML tutorial</title> <link rel=stylesheet type="text/css" href="stylesheet.css"> </head> <body> <br> <span class="fontbold">This is bold text.</span><br> <span class="fontitalic">This is italic text.</span><br> </body> </html> |
||
This is how it looks
|
This is bold text. This is italic text. |
||
Font Color
External CSS File
This is your external CSS file named "stylesheet.css". You can format the color by using the name or the color of the hex code. You can also use RGB values but this is much less popular so I won't cover it.|
.fontred { font-color: red; } .fontblue { font-color: #1204B6; } | ||
PHP Page
|
<html> <head> <title>HTML tutorial</title> <link rel=stylesheet type="text/css" href="stylesheet.css"> </head> <body> <br> <span class="fontred">This is red text</span><br><br> <span class="fontblue>This is blue text</span><br> </body> </html> |
||
This is how it looks
|
This is red text. This is blue text. |
||
Font Style
External CSS File
This is your external CSS file named "stylesheet.css".|
.fonttimes { font-family: "Times New Roman"; } .fontarial { font-family: Arial; } | ||
PHP Page
|
<html> <head> <title>HTML tutorial</title> <link rel=stylesheet type="text/css" href="stylesheet.css"> </head> <body> <br> <span class="fonttimes">This is a times new roman font</span><br><br> <span class="fontarial>This is Arial font </span><br> </body> </html> |
||
This is how it looks
|
This is a times new roman font. This is an arial font. |
||
Font Size
External CSS File
This is your external CSS file named "stylesheet.css".|
.font150 { font-size: 150%; } .font16 { font-size: 16px; } .fontlarge { font-size: large; } | ||
PHP Page
|
<html> <head> <title>HTML tutorial</title> <link rel=stylesheet type="text/css" href="stylesheet.css"> </head> <body> <br> <span class="font150">This is formatted by defining the relative size.</span><br><br> <span class="font16>This is formatted by defining the absolute size.</span><br><br> <span class="fontlarge>This is formatted using words.</span><br> </body> </html> |
||
This is how it looks
|
This is formatted by defining the relative size. This is formatted by defining the absolute size. This is formatted using words. |
||
Bookmark this page:
|
