Text Styling
Colors
The color and background-color CSS properties control the foreground color and background color of any element, respectively. The two main ways to express the value of these properties are to use a standard color name or to use a hexadecimal color value.
To make all strong elements contain red text, create the following CSS rule in your CSS file:
strong { color: Red; }The effect of this rule on an HTML element such as:
<strong>Urgent: Put on oxygen masks first!</strong>Results in:
Perhaps to make strong text more visible, the background color can be red and the foreground color can be white:
strong { color: White; background-color: Red; }Now the result is:
It is important to note that certain CSS properties applied to an HTML element can be inherited from that HTML element's ancestor element. For example, if the background-color of the <body> element is Beige, then all elements anywhere inside <body> will also have their background-color property set to Beige unless overridden. Here's another example:
body { color: SaddleBrown; background-color: Beige; }<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello world!</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to my website</h1>
<p>More content will be ready soon!</p>
</body>
</html>
The resulting website looks somewhat like this:
Welcome to my website!
More content will be ready soon!
These color names are very general and standard, but to use a very specific color with control over the amount of red, blue, and green mixed in the color's pixel display, the hexadecimal color value format should be used. Every standard color name has it's equivalent hexadecimal color value, but not vice versa. Here's a table of common color names and their CSS hexadecimal color equivalent:
| CSS color name | CSS Hexadecimal color value |
|---|---|
Black |
#000000 |
Blue |
#0000FF |
Cyan |
#00FFFF |
Gray |
#808080 |
Green |
#008000 |
Lime |
#00FF00 |
Magenta |
#FF00FF |
Navy |
#000080 |
Olive |
#808000 |
Purple |
#800080 |
Red |
#FF0000 |
Teal |
#008080 |
White |
#FFFFFF |
Yellow |
#FFFF00 |
Every 2 digits in a hexadecimal color value ranges from 00 to FF where 00 is the lowest intensity and FF is the highest intensity for one of the 3 components of the color. The first pair of digits (starting on the left) controls the intensity of the red component, the second pair of digits controls the intensity of the green component, and the last pair of digits controls the intensity of the blue component. These three components mix together to make up the final visual effect of the color. If all three components are set to their lowest intensity, 00, then the color becomes black. If all three components are set to their highest intensity, FF, then the color becomes white. All other colors inbetween are a mixture of varying intensities of red, green, and blue.
Alignment and Spacing
The line-height property controls the spacing between lines of text. It's value is a number like 1.0, 1.5, or 2.0. This property can be used on any element, but it is often used in a CSS rule that selects the <body> element or the <p> elements. Compare their effects:
This is
single line spacing.
line-height is
set to 1.0.
This is
single-and-a-half line spacing.
line-height is
set to 1.5.
This is
double line spacing.
line-height is
set to 2.0.
The text-align property controls the horizontal alignment of text. The default value of this property is left for left-alignment, but other possible values include right, center, and justify. Compare their effects:
text-align: left results in left-aligned text.
text-align: right results in right-aligned text.
text-align: center results in center-aligned text.
text-align: justify results in text occupying it's container evenly such that the text forms a near perfect rectangular block when displayed in small containers.
The white-space property controls how whitespace (spaces, tabs, newlines, etc.) are handled.
white-space Value |
Spaces | Line breaks |
|---|---|---|
normal |
Collapsed | Automatic only |
nowrap |
Collapsed | Never |
pre |
Preserved | Manual only |
pre-line |
Collapsed | Manual and Automatic |
pre-wrap |
Preserved | Manual and Automatic |
- Spaces: Collapsed
- Sequences of whitespace characters are collapsed to a single space character
- Spaces: Preserved
- Sequences of whitespace characters are preserved
- Lines breaks: Automatic
- A line break automatically triggers when the text reaches the edge of it's containing element
- Lines breaks: Manual
- A line break is manually triggered by the presence of a newline character
The presence of a <br> element will always cause a line break, regardless of the value of the white-space property.
Monospace Text
The code examples you've seen on this website all use a monospace font which is the default font applied to the following elements:
The
<code>element represents a fragment of computer code. This could be an XML element name, a file name, a computer program, or any other string that a computer would recognize.
The
<samp>element represents a sample or quoted output from another program or computing system.
The
<kbd>element represents user input (typically keyboard input, although it may also be used to represent other input, such as voice commands).
The
<pre>element represents a block of preformatted text, in which structure is represented by typographic conventions rather than by elements.
A monospace font assigns the same width to every character used. It especially appropriate for showing code examples on a web page, but more needs to be done to ensure that computer code displays properly. The following characters need to be escaped in HTML to be displayed as is:
| Character | HTML Entity |
|---|---|
| "<" | < |
| ">" | > |
| "&" | & |
| " " | |
In addition, line breaks in your code example should be replaced with a <br> element and tabs can be replaced with a number of entities.
A hello world C++ program:
#include <iostream>
using namespace std;
int main()
{
cout << "Hello world!\n";
return 0;
}Would safely be displayed on a web page with the following HTML code:
<pre><code>#include <iostream><br>using namespace std;<br><br>int main()<br>{<br> cout << "Hello world!\n";<br> return 0;<br>}</code></pre>
This method is a lot safer than using the <pre> element with unescaped whitespace.
It is very tedious to replace all special HTML characters with their respective HTML entity so the following simple C++ program can do it for you. Just paste the contents of your code into this program's input and the output is the HTML representation of that code:
#include <iostream>
using namespace std;
int main()
{
char c;
while (cin.get(c)) {
if (c == '<') cout << "<";
else if (c == '>') cout << ">";
else if (c == '&') cout << "&";
else if (c == ' ') cout << " ";
else if (c == '\t') cout << " ";
else if (c == '\n') cout << "<br>";
else cout << c;
}
return 0;
}
One other problem is what happens when the width of the window or containing element is smaller than the width of the text to be displayed in monospace; when this happens, then the content will extend outside the element, possibly out of the entire page, and the user will possibly be forced to horizontally scroll the entire page. The following style to <pre> should help:
pre { overflow: auto; white-space: nowrap; }overflow: auto; will automatically add a scrollbar that is local to the pre block-level element when it's text is longer or wider than the element itself. white-space: nowrap; overrides the default white-space: pre; property for this element, the new behavior will now require whitespace to be escaped with and line breaks to be escaped with <br>.
When all of these suggestions are used together (the suggested style for the <pre> element, using the <code> element inside of the <pre> element, using HTML entities to format the text inside the <code> element), then computer code and other white-space significant text will be displayed in a neat and orderly manner on your website.
All the code example figures on this website use this method, feel free to study them by viewing the source of this website.
Fonts
font-family controls the font family of text. Three possible values which are always available are serif, sans-serif, and monospace. Let's compare these font families by using inline styles:
<p style="font-family: serif;">font-family is serif.</p>
<p style="font-family: sans-serif;">font-family is sans-serif.</p>
<p style="font-family: monospace;">font-family is monospace.</p>
The result is:
font-family is serif.
font-family is sans-serif.
font-family is monospace.
These font families are generic; they represent whatever the default serif, sans serif, and monospace fonts that the user's web browser uses respectively. To use a specific font family, specify it's name enclosed in single or double quotes, example: font-family: 'Times New Roman';.
The value of font-family can be specified as a comma-separated list, the first item in the list that the user's web browser supports will be selected. Compare the following code and it's output:
<p style="font-family: 'Times New Roman', 'Georgia', serif;">Text in a particular serif font.</p>
<p style="font-family: 'Open Sans', 'Lucida Sans', sans-serif;">Text in a particular sans serif font.</p>
Text in a particular serif font.
Text in a particular sans serif font.
Fonts from font files can be imported into CSS code and other CSS code can use those fonts. The Google corporation provides online external style sheets that one can import to use fonts that the user need not necessarily have installed.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Dancing+Script">
</head>
<body>
<h1 style="font-family: 'Dancing Script'">Text in 'Dancing Script' font</h1>
</body>
</html>
Text in 'Dancing Script' font
Multiple fonts can also be imported and used for free from Google, visit https://fonts.google.com for more information.
The font-size property is one of the many CSS properties whose value is a length. Length values in CSS can be expressed in many units, the most popular length units in CSS are px and em. The length value 1px is equal the length of a pixel on the user's device display which is the length of the smallest dot that can be displayed on the user's device. The length value 1em is equal to the height of the letter 'M' using the font size of the nearest ancestor of the element which this value is being used to set a property value to.
Particular to the font-size property are values that name a identify a generic size such as small, medium, and large. Observe the following font-size examples:
<p style="font-size: 0.5em;">0.5em size text.</p>
<p style="font-size: 1em;">1em size text.</p>
<p style="font-size: 2em;">2em size text.</p>
<br>
<p style="font-size: x-small;">x-small size text.</p>
<p style="font-size: small;">small size text.</p>
<p style="font-size: normal;">normal size text.</p>
<p style="font-size: large;">large size text.</p>
<p style="font-size: x-large;">x-large size text.</p>
0.5em size text.
1em size text.
2em size text.
x-small size text.
small size text.
normal size text.
large size text.
x-large size text.
font-style can be set to normal or italic for "normal styled text" or "italic styled text", respectively. font-weight can be set to normal or bold for "normal weighted text" or "bold weighted text", respectively.