How to design the fonts of a webpage with coding

DistrictND

Well I have made lots of tutorials on web development, I even made a tutorial on how to build a website with coding, all that useful information all available for you at my website DistrictND, but today am going to give you a full tutorial on how to design the fonts (texts) of a webpage with coding.

So first of all am going to explain these following topics in this post

(i)   How to design the Font Color of your webpage with coding.

(ii)  How to design Font size of your webpage with  coding.

(iii) How to design the Font  Styles of your webpage with coding.

OK let's start with the first then we go to the second and finally the third.

How to design Font color (text colour) of your webpage with coding.

1 Go to your HTML editor I recommend this one for android users.

2 Integrate this code if you want a small amount of text to display in color.

<p>Normal text that will be displayed <span

style ="color:orange" >Orange text that will be displayed </span></p>

The above code will display in a web browser like this

Normal text that will be displayed Orange text that will be displayed

You can edit the words that says "Normal text that will be displayed" and "Orange text that will be displayed" and put your own texts.

That is how we design the color of a selected amount of text that will be displayed in a webpage.

3 Integrate this code if you want the background of a selected amount of text to display in color

<p>normal text that will be displayed <span style ="background-

color:yellow" >different text that the background is yellow </span></p>

The above code will display in a web browser like this

normal text that will be displayed different text that the background is yellow

You can edit the words that says "Normal text that will be displayed" and "different text that the background is yellow"

Now you are done designing the font color and font background color let's move to the next topic in this post.

How design font sizes in your webpage with coding

Well am sure there are some texts in your webpage and you want them to have a different size from other texts, then pick one of these text sizes below:

(i) <p style ="font-size:1.2em;" >DistrictND is cool </p>

(ii) <p style ="font-size:1.4em;" >DistrictND is cool </p>

(ii) <p style ="font-size:1.8em;" >DistrictND is cool </p>

<hr />

(iii) <p style ="font-size:2ex;" >DistrictND is cool </p>

(iv) <p style ="font-size:3ex;" >DistrictND is cool </p>

(v) <p style ="font-size:4ex;" >DistrictND is cool </p>

<hr />

(vi) <p style ="font-size:12px;" >DistrictND is cool </p>

(vii) <p style ="font-size:14px;" >DistrictND is cool </p>

The above code will display in a web browser like this

(i)

DistrictND is cool

(ii)

DistrictND is cool

(ii)

DistrictND is cool

---

(iii)

DistrictND is cool

(iv)

DistrictND is cool

(v)

DistrictND is cool

---

(vi)

DistrictND is cool

(vii)

DistrictND is cool

You can pick any one you want and remove DistrictND is cool and put your own text.

Now that you know how to design font size of a webpage with coding let's move to the next topic in this post.

How to design font styles of a webpage with coding.

  Well you must have wanted some of your texts to display in different styles like italic and so on well let me tell you how to do that now with coding.

1 Go to your HTML editor.

2 And pick any of these codes below pick the one that you like.

(i) If you want your text to display bold integrate this code.

<p style ="font-weight:bold;" >DistrictND is cool </p>

The above code will display in a web browser like this

DistrictND is cool

You can edit "DistrictND is cool" and put your own text

(ii) Integrate this code if you want some selected amount of text to display in bold.

<p> DistrictND is owned by <span style ="font-

weight:bold" >ND </span> visit the support and motivate us page. </p>

You can edit the text that says "DistrictND is owned by ND visit the support and motivate us page" and put your own text.

(iii) Integrate this code if you want your text to display in italic.

<p style ="font-style:italic;" >DistrictND is italic </p>

The above code will display in a web browser like this

DistrictND is italic

You can edit "DistrictND is italic" and put your own text

(iv) integrate this code if you want a selected amount of text to display in italic in your webpage.

<p> DistrictND is owned by <span style ="font-

style:italic" >ND </span> visit the support and motivate us page </p>

The above code will display in a web browser like this

DistrictND is owned by ND visit the support and motivate us page

You can edit the text that says "DistrictND is owned by ND visit the support and motivate us page" and put your own text.

Note: 

Any text code that concerns editing text background and displaying images will not display unless you save your webpage and name it index.html then upload it to your browser, follow these steps on how to upload your webpage file to your browser.

(i) With windows or  Mac: Save the webpage as a html file then drag the file to your browser it will upload and display your work or find a web hosting company and host your webpages.

(ii) With Android: Find a web hosting company and host your webpages.

Now it Will display your work.

Warning

Make sure you integrate this codes properly failure to do this will result to error.