Change HTML Font using CSS

In this article we will be learning on how to manipulate HTML font using the basic CSS or Cascading Stylesheet. CSS is one of the basic and one of the most important tools in developing a website. Due to the fact that CSS is being use to design the interface of your Website or application. Though you can able to design your website without CSS but still it would be more difficult and there would be a possibility that you page would load slowly unlike using CSS. Using CSS would be easier for web developers and programmers to trace their CSS codes. There are 3 ways on how to apply CSS these are the Inline, External and Internal CSS. The differences between the 3 are the placing of the CSS. It will be demonstrate below. Just observe the examples given below.

Inline CSS:<body style="background-color:#CCC; font-family:Arial, Helvetica, sans-serif; font-size:12px">

This is the inline CSS which you directly insert your CSS through your HTML code. By the use of style attribute. We able to declare its font family or font style either and the font size.


External CSS:<link rel="stylesheet" type="text/css" href="style.css" />

This is how we do it when we will going to use external css. We have to link first our CSS in which our CSS is being put unto a separate file in which entitled with style.css.


Internal CSS:<style type="text/css"> body { font-family:Arial, Helvetica, sans-serif; font-size:12px } </style>


Change HTML Font using CSS





This is how we do it in Internal CSS. Usually Internal CSS being place in the upper part of the body or lower part of the body.



As you can observe the codes font-family:Arial, Helvetica, sans-serif; we use it to define what will be the type of font to be displayed in our web browsers. We do have 3 which are the Arial, Helvetica and the sans-serif. font-size:12px use to define the font size of the font to be display in the web browsers. In our example code we place 12 so therefore the font of the content in the body will be also 12px only. Below would be the sample output of the given CSS above.

Add a comment

أحدث أقدم