So, the next CSS topic you need to focus on is style text, one of the most common things you will do with CSS. We will look over the basics of text style, font setting, spacing between letters and lines, shadows and other text features.
This article will teach you about all the essentials behind the content style of HTML text.
The Fundamental Text and Style of the Font
We will cover all the basic elements of text style, detailed fonts, setting the font weight, style, family, shortening the font, aligning the text, effects and the space of lines and letters.
Styling Lists
Lists behave like any other text, but there are some CSS properties specific to lists you should know about, along with all good practices to consider.
Styling Links
When stylizing links, it is important to understand how to effectively use pseudo-classes to establish style links and how to model links for use in various interface functions, such as navigation tabs or menus.
Web Fonts
We will explore web fonts in detail, and this allows you to download custom fonts for your web page, to allow a more personalized and varied text style.
Let’s explore the properties of style fonts and give examples with a few different properties in the same HTML sample.
Color – The color property determines the color of the content, which is usually the text, but may include other things, such as underlining or overlapping placed on the text using the text decoration property.
Example with text color:
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: LightSteelBlue ;
}
h1 {
color: LightSlateGrey ;
}
</style>
</head>
<body>
<h1>Text color</h1>
<p>"A human being is a part of the whole called by us universe, a part limited in time and space. He experiences himself, his thoughts and feeling as something separated from the rest, a kind of optical delusion of his consciousness. This delusion is a kind of prison for us, restricting us to our personal desires and to affection for a few persons nearest to us. Our task must be to free ourselves from this prison by widening our circle of compassion to embrace all living creatures and the whole of nature in its beauty."
― Albert Einstein.</p>
</body>
</html>
Font Families
When you want to set a different font on your text, use the font-family property for the browser to apply the selected elements. The browser will only apply the font if it is available on the site accessed. If not, it will use a default font.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p.a {
font-family: "Times New Roman", Times, Serif;
}
p.b {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>The font-family property</h1>
<p class="a">"The important thing is not to stop questioning. Curiosity has its own reason for existence. One cannot help but be in awe when he contemplates the mysteries of eternity, of life, of the marvelous structure of reality. It is enough if one tries merely to comprehend a little of this mystery each day.
—"Old Man's Advice to Youth: 'Never Lose a Holy Curiosity.'" LIFE Magazine (2 May 1955) p. 64"
― Albert Einstein</p>
<p class="b">"The most beautiful experience we can have is the mysterious. It is the fundamental emotion that stands at the cradle of true art and true science."
― Albert Einstein,</p>
</body>
</html>
Speaking of font availability, there are a number of fonts that are generally available on all systems and can be used without much worry. These fonts are called secure fonts for web pages. Most of the time, as web developers, we want to have more fonts available to display our text content.
The list of secure web fonts changes as the operating systems evolve, but it is okay to take into consideration the following secure web fonts: Arial, Courier New, Georgia, Times New Roman, Verdana, Trebuchet MS.
Also, CSS defines 5 generic names for fonts, namely: sans-serif, italics, serif, monospace and fantasy. These are very generic, and how they are used depends on each browser application.
Font Size
Font size can have values measured in most of these units (and in others, such as percentages), but the most often used units that you will use to size a text are:
- px (pixels): represents the maximum number of pixels that you want the text to be. This is an absolute unit in almost any situation.
- ems: 1em is equal to the font size detected for the parent element of the current element. You can have a full-sized site using ems, which makes maintenance easy
- rems: these work just like an ems, except that 1rem is equal to the font size set on the root element of the document, not the parent element.
Example :
<!DOCTYPE html>
<html>
<head>
<style>
div.a {
font-size: 15px;
}
div.b {
font-size: large;
}
div.c {
font-size: 150%;
}
</style>
</head>
<body>
<h1>The font-size property</h1>
<div class="a">"Life is like riding a bicycle. To keep your balance, you must keep moving."</div>
<div class="b">"I speak to everyone in the same way, whether he is the garbage man or the president of the university." </div>
<div class="c">"When you are courting a nice girl an hour seems like a second. When you sit on a red-hot cinder a second seems like an hour. That's relativity."</div>
</body>
</html>
Text Drop Shadows
You can apply shadows to the text using the text shadow property. This requires up to 4 values, as you can see in the rows below:
- horizontal shadow offset from the initial text — this can take most units of CSS length and size available, but most often you will use px.
- vertical offset of the unravel from the initial text — behaves like horizontal compensation, except that it moves the shadow down and up, not from left to right.
- the blur radius — a higher value means that the shadow is more desperate. If the value is not included, it is implicit at 0, which means unclear.
If the base color of the shadow, that can take any CSS color, is not included, the color will be black by default.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px LightSteelBlue ;
}
</style>
</head>
<body>
<h1>The text-shadow property</h1>
<p> "Strange is our situation here on Earth. Each of us comes for a short visit, not knowing why, yet sometimes seeming to divine a purpose."</p>
</body>
</html>
Conclusion
Each time you build a web page, it is best to use a separate CSS file because it is the most powerful and flexible method. After reading this article, you will know how to use styling text in CSS — you should now understand the basics of text design and be able to apply the techniques to your own web projects.
