In the previous section, you learned how to format your text with HTML5 tags. Now, you will be able to format your text blocks directly using CSS3 properties.
It is very important that your HTML and CSS code is readable. We recommend using stylesheets within the HTML page code. Or better yet, when you have long stylesheets with many graphical instructions, use separate CSS files.
.css files that will contain the formatting for both your text, your website, and your web page.
On a large and complex website, you will generally have several CSS files: a CSS file for the header, a CSS file for categories, and another for the page body. This organization allows you to find the relevant source code very easily and quickly. It becomes very easy to modify formatting and add the necessary graphical CSS changes.
Let’s get started right away with the first properties…
Bold text
To make text bold with CSS, it is really very simple: use the font-weight: bold property.
Example:
<style type="text/css">
span { font-weight: bold; }
</style>Notice the use of the style tag: you assign the HTML style attribute font-weight: bold;
All text inside a span tag in the HTML page will be displayed in bold. This is another way to make text bold. The advantage of making text bold this way is that within your span tag, you can also set the text color, text size, etc. That is the benefit of using CSS properties.
In the following examples, the style tag will no longer be shown, but you will still need to add it to your HTML page.
Italic text
Similarly, to make text italic, use font-style: italic.
Example for your CSS:
.txtItalic{ font-style: italic; }Then for the HTML content:
<div class="txtItalic">HTML5</div> on the first lineSame operating principle: you define a CSS class txtItalique with font-style: italic, then you specify in an HTML tag — for example span or div — the use of a class txtItalique. So “HTML5” is written in italic, and the text “on the first line” in normal style.
When you use the div tag alone, your text will not be italic, but if you specify the txtItalique class, then your text will be italic. This is the great benefit of defined CSS classes: you can apply the txtItalique class to any type of tag such as div, span, p (paragraph), whenever you need it.
Text size
The font-size property, with a value in pixels or EM, allows you to change the text size.
Example:
In the CSS:
#title { font-size: 32px; }In the HTML page:
<div id="title">HTML5: 32 pixels on the first line!</div>font-size: 32px modifies the div tag identified by the id title. Earlier, we showed you using a class, txtItalique. Here, you will use an identifier — there will be only one tag with the identifier title — so a single title in your HTML page, which will have a size of 32.
Use CSS classes, use a CSS identifier: here it is #title (the hash for an identifier), .txtItalic for a class (with a dot as prefix). You already have plenty to work with for CSS exercises.
Text color
Next, you can of course define the color of your text with CSS. You can use an HTML color code, a hexadecimal color code, or RGB. You have several options, with shorthand notation for your color code. This is what you learned in one of our first articles, on the basics of CSS3.
Example:
h1 { color: #336699; }To make all H1 tags a certain color, you target H1 in your stylesheet with color. And every time you use an H1 tag in your text, in your HTML page, it will be the color you defined. Of course, you can combine multiple CSS instructions in the H1 tag, such as font-size, font-weight, italic, etc.
Text alignment
To define text alignment, you will use the text-align: center property.
Example:
#txtCenter { text-align: center; }This property will center the text of the div tag identified by the id txtCentre. Notice the stylesheet source code: it is #txtCentre, which targets a tag that contains the id txtCentre. You use text-align: center and you have the values left, right, justify for text alignment.
Underlined text
You can format underlined text with the text-decoration: underline property. Remember, links in HTML pages are often underlined. You can apply the same formatting to titles, or parts of text you want to highlight, with text-decoration: underline.
Example:
#txtUnderline { text-decoration: underline; }You use an identifier in the stylesheet with text-decoration: underline. The div tag that uses the identifier txtSouligne in the HTML page will be underlined.
You can modify text display with text-decoration. It is a property that lets you choose the display style of your text.
In the example, you see underline: this CSS value underlines the text, which is very commonly used for links.
You also have overline, which adds a line above the text.
line-through will strike through the text, and none removes all predefined appearances.
This is how you can create links that are not underlined in an HTML page, for example.
You can combine multiple decorations, as in the example below:
.txt30 { text-decoration: underline overline;}These are very basic source code examples so that you can directly understand how to use CSS classes and text-decoration. If you want to remove the link underline — the bar under links, that is, underlined links — you can do it very easily with text-decoration: none.
Conclusion
In this article, you discovered the first essential properties for formatting your text with CSS: bold, italic, underlined, colored, and more.
0 Comments