CSS Tutorial: Learn About Text & Fonts In CSS

Hello, friends today we learn about fonts and text in CSS. So, my friends we all know, HTML is to be used for markup, and CSS is used for styling in web development.

In HTML we can Increase the font size by using h1 and h2 tags. Let’s see how fonts are modified in CSS. Here is the HTML code for styling fonts.

HTML CODE:

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<!---- The page title -->
	<title> Fonts in CSS </title>
	<!---- External css file main.css -->
	<link rel="stylesheet" type ="text/css" 
	href ="main.css">
	</head>
	
	<body>
		
		<p> Developers Nation </p>
		
		<div> Build Your Dream Website with us </div>
		
	</body>
		
</html>

This is our HTML code save this file as .html format now we create CSS document.

CSS CODE:

	p{
		font-family:'Times New Roman' Times serif;
		font-style: normal;
		color: lime;
		font-size: 1.5em;
	}
	
	div {
		font-family: Arial Helvetica; 
		font-weight: bold;
		font-style: oblique;
		color: orangered;
		font-size: 3em;
	}

This is our CSS document let’s see the output. So, we define the font on the div element as ‘Arial’ and ‘Helvetica’. If the browser doesn’t support arial it will include the next option, Helvetica.

Output:

If the browser does not support the font-family property or the property developer, that will use the default font from the browser. The font-size is defined by em; which means the current size of the font will be three times greater than the normal font.

So, the font-weight property is used for defining the text as bold or normal. As the name suggested, font-size is used for deciding the font size. And the font-style will define whether the text is italic, normal, or oblique.

The ext is aligned and defined are a lot of ways in CSS. Let’s have a look at the following code to understand better, First we create HTML code then CSS. Let’s see the HTML code.

HTML CODE:

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<!---- The page title -->
	<title> Text in CSS </title>
	<!---- External css file main.css -->
	<link rel="stylesheet" type ="text/css" 
	href ="main.css">
	
	</head>
	
	<body>
		
		<p> Developers Nation </p>
		<p id="developers"> Learn CSS Online</p>
		<p id="nation"> Learn HTML Online with us </p>	
		<div> Build Your Dream Website with us </div>
		
	</body>
		
</html>

This is our HTML document. Now lets create th CSS document.

CSS CODE:

	p{ color: orangered;}
	
	#developers{
		color: lime;
		text-decoration: underline;
		text-align: center;
	}
	
	#nation {
		color: orangered;
		text-align: left;
		text-indent
	}
	
	div {
		text-transform:uppercase;
		color:navy;
		text-decoration:line-through;
		text-align:juctify;
	}

Left center etc.e the text-transform property to change the text to upper case or lowe case. So, guys, you will see how we can manipulate text and font on our webpage.

So, we use text-decoration: line-through it inserts a line through the text and text-transform: uppercase to change the text to alphabetic characters.

If you want to learn more go to my website developersnation.co.in to learn more about CSS and you will find some useful resource on the website or check the description below

To make an indentation of the text we use the text-indent property. This is our CSS code lat’s see the output

Output:

We use the text-decoration to determine whether a line runs over, under, or through the text. So, Text-align help us to position our text according to the layout of the page like right

Share This Post To Your Friends