List of concepts :
Text-color
Text-alignment
Text-decoration
Text-transformation
Text-indentation
Letter spacing
Line height
Word spacing
List of Concepts
● Font colour: The text's colour can be altered with this property. (Standalone Attribute)
● Font family: This feature can change the font face.
● Font size: It is possible to change the font size with this feature.
● Font design: This setting is used to obliquely, boldly, or italicize the typeface.
● Font-variant: Small-caps effect is produced by this feature of the CSS font variant.
● Font weight: This attribute is used to modify the font's boldness and lightness.
Fonts are an essential aspect of design and can greatly affect the look and feel of a website or document.
Step 1: Browse the Google Fonts library Step 2: Select the fonts and customize the styles. Step 3: Generate the code for adding the fonts to your project. Step 4: Use the fonts in your CSS.
EXAMPLES.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FONT</title>
<link rel="stylesheet" href="./style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100&family=Roboto:wght@100&display=swap" rel="stylesheet">
<body>
<h1>ARYAN FONT</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto, temporibus?</p>
</body>
</html>
body{
font-family: font-family: 'Roboto', sans-serif;
font-family: 'Roboto Mono', monospace;
}
Display property
● The display property specifies the display behaviour (the type of rendering box) of an element.
● In HTML, the default display property value is taken from the HTML specifications or from the browser/user default style sheet. The default value in XML is inline, including SVG elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TEXT</title>
<!-- style -->
<style>
p{
display: inline-block;width: 100px;height: 20px;
}
</style>
</head>
<body>
<p class="name font">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nobis, error. Lorem ipsum dolor </p>
<p>aryan najnsnajknxjnasnxasok snanknajsnxnasjnaj najnscnasncanscansca knacsnaknscnasncasj asncnajsncjancnajsncjn</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>height weight</title>
<style>
p{
max-width: 300px;
}
p{
border: 5px solid black;
background-color: blueviolet;
color: beige;
}
</style>
</head>
<body>
<P>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi ea atque accusamus vero omnis rerum illum quaerat quod. Aspernatur amet expedita dolorem, facere vero, inventore magnam esse minus nisi a debitis sit repudiandae sapiente maxime reprehenderit eum! Doloremque, rerum possimus laboriosam tenetur ratione inventore asperiores officiis saepe doloribus fuga temporibus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus nostrum quo impedit a totam aut debitis explicabo magni voluptatem delectus, quis quasi sequi ea veniam, amet earum nihil nobis non iure eos quisquam dolorem eveniet quidem eius. Repellat saepe odit ex eaque voluptate recusandae placeat quasi animi facilis laudantium. Quae cum deleniti perspiciatis alias esse repellendus! Quisquam vero est in harum magni hic libero delectus officia laborum consequatur? Placeat ipsa architecto iure amet corrupti! Earum optio omnis expedita adipisci fugiat autem eveniet repellendus consectetur excepturi itaque sequi ea tempore corrupti odit assumenda consequuntur, commodi debitis voluptatem cum minus numquam veritatis?</P>
</body>
</html>
