In this article we'll start you on your journey towards mastering text styling with CSS. Here we'll go through all the basic fundamentals of text/font styling in detail, including setting font weight, family and style, font shorthand, text alignment and other effects, and line and letter spacing. Prerequisites: Basic computer literacy, HTML basics (study Introduction to HTML CSS basics (study Introduction to CSS). Objective: To learn the fundamental properties and techniques needed to style text on web pages. What is involved in styling text in CSS? As you'll have already experienced in your work with HTML and CSS, text inside an element is laid out inside the element's content box. It starts at the top left of the content area (or the top right, in the case RTL language content and flows towards the end of the line. Once it reaches the end, it goes down to the next line and continues, then the next line, until all the content has been placed in the box. Text content effectively behaves like a series of inline elements, being laid out on lines adjacent to one another, and not creating line breaks until the end of the line is reached, or unless you force a line break manually using the
element. Note: If the above paragraph leaves you feeling confused, then no matter — go back and review our Box model article, to brush up on the box model theory, before carrying on. The CSS properties used to style text generally fall into two categories, which we'll look at separately in this article: Font styles: Properties that affect the font that is applied to the text, affecting what font is applied, how big it is, whether it is bold, italic, etc. Text layout styles: Properties that affect the spacing and other layout features of the text, allowing manipulation of for example the space between lines and letters, and how the text is aligned within the content box. Note.
CSS font properties define the font family, boldness, size, and the style of a text. Difference Between Serif and Sans-serif Fonts CSS Font Families In CSS, there are two types of font family names: generic family - a group of font families with a similar look (like Serif or Monospace ) font family - a specific font family (like Times New Roman or Arial ) Generic family Font family Description Serif Times New Roman Georgia Serif fonts have small lines at the ends on some characters Sans-serif Arial Verdana Sans means without - these fonts do not have the lines at the ends of characters Monospace Courier New Lucida Console All monospace characters have the same width Note: On computer screens, sans-serif fonts are considered easier to read than serif fonts. Font Family The font family of a text is set with the font-family property. The font-family property should hold several font names as a fallback system. If the browser does not support the first font, it tries the next font. Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available. Note: If the name of a font family is more than one word, it must be in quot;tion marks, like: Times New Roman. More than one font family is specified in a comma-separated list: For more commonly used font combinations, look at our Web Safe Font Combinations. Font Style The font-style property is mostly used to specify italic text. This property has three values: normal - The text is shown normally italic - The text is shown in italics oblique - The text is leaning (oblique is very similar to italic, but less supported) Example p.normal font-style: normal; p.italic font-style: italic; p.oblique font-style: oblique; Try it yourself » Font Size The font-size property sets the size of the text. Being able to manage the text size.
The FONT element was deprecated in HTML 4 and is not part of the HTML5 specification. So, if you want to change the fonts on your web pages, you should learn how to do it with CSS ( Cascading Style Sheets). Difficulty: Average Time Required: 5 minutes Here's How: Open a web page using a text HTML editor. It can be a new or existing page. Write some text: This tex is in Arial Surround the text with the SPAN element: This tex is in Arial Add the attribute style= to the span tag: This tex is in Arial Within the style attribute, change the font using the font-family style: This tex is in Arial Tips: Separate multiple font choices with a comma. For example: font-family: Arial, Geneva, Helvetica, sans-serif; It’s best to always have at least two fonts in your font stack (the list of fonts so that if the browser doesn’t have the first font, it can use the second instead. Always end each CSS styles with a semi-colon. It's not required when there is only one style, but it's a good habit to get into. This example uses inline styles, but the best type of styles are put in external style sheets so that you can affect more than just the one element. You can use a class to set the style on blocks of text. For example: This tex is in Arial Using the CSS.arial font-family: Arial; What You Need HTML Editor -or- Text Editor.
Download Now