Text Properties
One of the most important aspects of web design is making sure that the text on your website is wasy to read and is vissually appealing to anyone looking at your website. There are many different text properties that you can use to customise the look of your text and make it more engaging for your audience. Some of the most common text properties include font family, font size, text alignmet, and text color.
Font Family
The font family property allows you to change the shape and style of your text. This is the same thing as changing the font of your text in something like Microsoft Word or google docs. There are many different font families that you can choose from, each with a different feel and look that you can use to fit in with the website you created and give your website a vibe to your liking.
Examples of Font Families on coding page:
- h1{font-family: 'Times New Roman', Times, serif;}
- h1{font-family: Arial, Helvetica, sans-serif;}
- h1{font-family: 'Courier New', Courier, monospace;}
- h1{font-family: 'Georgia', serif;}
- h1{font-family: 'Verdana', sans-serif;}
Examples of Font Families on webpage:
- This is an example of the font family "Times New Roman"
- This is an example of the font family "Arial"
- This is an example of the font family "Courier New"
- This is an example of the font family "Georgia"
- This is an example of the font family "Verdana"
Font Size
The font size property allows you to change the size of your text. This is important because you want to make sure that your text is large enough to be easily read, but not so large that it overwhelms the rest of your website. You can use different font sizes for different sections of your website to make it more visually appealing.
Examples of Font Sizes on coding page
(For example purposes the set location being changed is h1. This changes depending on the area you want to style)
- h1{font-size: 20px;}
- h1{font-size: 30px;}
- h1{font-size: 40px;}
- h1{font-size: 50px;}
- h1{font-size: 60px;}
Examples of Font Sizes on webpage
- This is an example of the font size "20px"
- This is an example of the font size "30px"
- This is an example of the font size "40px"
- This is an example of the font size "50px"
- This is an example of the font size "60px"
Text Alignment
The text alignment property allows you to change the alignment of your text to where ever you want it to be on the page. This is important because you want to make sure that your text is aligned in a way that is visually appealing and easy to read. You can use different text alignments for different sections. It is also very good for putting text around things like images.
Examples of Text Alignment on coding page
(For example purposes the set location being changed is h1. This changes depending on the area you want to style)
- h1{text-align: left;}
- h1{text-align: center;}
- h1{text-align: right;}
- h1{text-align: justify;}
Examples of Text Alignment on webpage
- This is an example of the text alignment "left"
- This is an example of the text alignment "center"
- This is an example of the text alignment "right"
Text Color
Lastly the text color property allows you to change the color of your text. This is important because you want to make sure that your text is a color that is easy to read and also fits in with the overall design of your website.
Examples of Text Color on coding page
(For example purposes the set location being changed is h1. This changes depending on the area you want to style)
- h1{color: black;}
- h1{color: white;}
- h1{color: red;}
- h1{color: blue;}
- h1{color: green;}
Examples of Text Color on webpage
- This is an example of the text color "white"
- This is an example of the text color "red"
- This is an example of the text color "blue"
- This is an example of the text color "green"
- This is an example of the text color "yellow"