***** On Monday, 9/3/18, I started learning the fundamentals of CSS on sololearn.com. *****

***** On Tuesday, 1/15/19, I completed the CSS Fundamentals course and was issued the certificate. *****

TAKE NOTE THAT THIS IS NOT A .CSS FILE BECAUSE IT WILL BE A PLAIN TEXT FILE. INSTEAD, CSS WILL BE IMPLEMENTED INTO A .HTML FILE. THIS CAN BE DONE VIA A LINK, EMBED, IMPORT AND/OR INLINE STYLES.

Module 2: Working with Text

I. Font-Family

The font-family Property

The font-family property specifies the font for an element.
There are two types of font family names:

font family: a specific font family (like Times New Roman or Arial)
generic family: a group of font families with a similar look )like Serif or Monospace(

Here is an example of different font styles:

The HTML: (Code)

This is a paragraph shown in serif font.


This is a paragraph shown in sans-serif font.


This is a paragraph shown in monospace font.


This is a paragraph shown in cursive font.


This is a paragraph shown in fantasy font.

The CSS: (Code)

p.serif {
font-family: "Times New Roman", Times, serif;
}
p.sansserif {
font-family: Helvetica, Arial, sans-serif;
}

p.monospace {
font-family: "Courier New", Courier, monospace;
}

p.cursive {
font-family: Florence, cursive;
}

p.fantasy {
font-family: Blippo, fantasy;
}

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_2.1! ←

Separate each value with a comma to indicate that they are alternatives.
If the name of a font family is more than one word, it must be in quotation marks:
"Times New Roman".

The font-family property should hold several font names as a "fallback" system. When specifying a web font in a CSS style, add more than one font name, in order to avoid unexpected behaviors. If the client computer for some reason doesn't have the one you choose, it will try the next one.

It is a good practice to specify a generic font family, to let the browser pick a similar font in the generic family, if no other fonts are available.

i.e. Code

body {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

If the browser does not support the font Arial, it tries the next fonts (Helvetica Neue, then Helvetica). If the browser doesn't have any of them, it will try the generic sans-serif.

Remember to use quotation marks if the font name consists of more than one word.

II. Font-Size

The font-size Property

The font-size property sets the size of a font. One way to set the size of fonts on the web is to use keywords. For example, xx-small, small, medium, large, larger, etc.

The HTML: (Code)

Paragraph text set to be small


Paragraph text set to be medium


Paragraph text set to be large


Paragraph text set to be very large

The CSS: (Code)

p.small {
font-size: small;
}
p.medium {
font-size: medium;
}

p.large {
font-size: large;
}

p.xlarge {
font-size: xlarge;
}

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_2.2! ←

Keywords are useful if you do not want the user to be able to increase the size of the font because it will adversely affect your site's appearance.

You can also use numerical values in pixels or ems to manipulate font size.
Setting the font size in pixel values (px) is a good choice when you need pixel accuracy, and it gives you full control over the text size.
The em size unit is another way to set the font size (em is a relative size unit). It allows all major browsers to reize the text. If you haven't set the font size anywhere on the page, then it is the browser default size, which is 16px.

To calculate the em size, just use the following formula: em = pixels / 16
For example: CSS Code

h1 {
font-size: 20 px;
}

h1 {
font-size: 1.25 em;
}

Both of the above examples will produce the same result in the browser, because 20/16 = 1.25 em.

Try different combinations of text size and page zooming in a variety of browsers to ensure that the text remains readable.

III. Font-Style

The font-style Property

The font-style property is typically used to specify italic text.

The HTML: (Code)

This is a paragraph in italic style.

The CSS: (Code)

p.italic {
font-style: italic;
}

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_2.3! ←

The font-style property has three values: normal, italic, and oblique.
Oblique is very similar to italic, but less supported.

The HTML: (Code)

This paragraph is normal.
This paragraph is italic.
This paragraph is oblique.

The CSS: (Code)

p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_2.4! ←

Take note that the HTML  tag will produce exactly the same result as the italic font style.

IV. Font-Weight

The font-weight Property

The font-weight controls the boldness or thickness of the text. The values can be set as normal (default size), bold, bolder, and lighter.

The HTML: (Code)

This is a font with a "lighter" weight.
This is a font with a "bold" weight.
This is a font with a "bolder" weight.

The CSS: (Code)

p.light {
font-weight: lighter;
}
p.bold {
font-weight: bold;
}
p.bolder {
font-weight: bolder;
}

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_2.5! ←

You can also define the font weight with a number from 100 (thin) to 900 (thick), according to how thick you want the text to be.
400 is the same as normal, and 700 is the same as bold.

The HTML: (Code)

This is a font with a "lighter" weight.
This is a font with a "bold" weight.
This is a font with a "700" weight.

The CSS: (Code)

p.light {
font-weight: lighter;
}
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 700;
}

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_2.6! ←

Take note that the HTML  tag also makes the text bold.

V. Font-Variant

The font-variant Property

The CSS font-variant property allows you to convert your font to all small caps. The values can be set as normal, small-caps, and inherit.

The HTML: (Code)

Paragraph font variant set to normal.
Paragraph font variant set to small-caps.

The CSS: (Code)

p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_2.7! ←

Take note that not every font supports CSS font-variant, so be sure to test before you publish.

VI. Color

The color Property

The CSS color property specifies the color of the text.
One method of specifying the color of the text is using a color name: like red, green, blue, etc.
Here's an example of changing the color of your font.

The HTML: (Code)

The text inside the paragraph is green.
The text outside the paragraph is black (by default)

The CSS: (Code)

p.example {
color: green;
}

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_2.8! ←

Another way of defining colors is using hexadecimal values and RGB.
Hexadecimal form is a pound sign (#) followed by at most, 6 hex values (0-F).
RGB defines the individual values for Red, Green, and Blue.

In the example below, we use hexadecimal value to set the heading color to blue, and RGB form to make the paragraph red.

The HTML: (Code)

<h1>This is a heading</h1>
This is a paragraph

The CSS: (Code)

h1 {
color: #0000FF;
}
p.example {
color: rgb(255,0,0);
}

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_2.9! ←

VII. Aligning Text Horizontally

The text-align Property

The text-align property specifies the horizontal alignment of text in an element. By default, text on your website is aligned to the left. However, at times you may require a different alignment.

text-align property values are as follows: left, right, center, and justify.

The HTML: (Code)

This paragraph is aligned to left.
This paragraph is aligned to right.
This paragraph is aligned to center.

The CSS: (Code)

p.left {
text-align: left;
}
p.right {
text-align: right;
}
p.center {
text-align: center;
}

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_2.10! ←

Take note that when text-align is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight (as in magazines and newspapers).

VIII. Aligning Text Vertically

The vertical-align Property

The vertical-align property sets an element's vertical alignment. Commonly used values are top, middle, and bottom.

The example below shows how to vertically align the text between the table.

The HTML: (Code)

<table border="1" cellpadding="2" cellspacing="0" style="height: 150px;">
<tr>
<td class="top">Top</td>
<td class="middle">Middle</td>
<td class="bottom">Bottom</td>
</tr>
</table>

The CSS: (Code)

td.top {
vertical-align: top;
}
td.middle {
vertical-align: middle;
}
td.bottom {
vertical-align: bottom;
}

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_2.11! ←

The vertical-align property also takes the following values: baseline, sub, super, %, and px (or pt, cm).
The example below shows the difference between them.

The HTML: (Code)

This is an inline text example.
This is a sub line text example.
This is a super line text example.
This is an pixel example.

The CSS: (Code)

span.baseline {
vertical-align: baseline;
}
span.sub {
vertical-align: sub;
}
span.super {
vertical-align: super;
}
span.pixel {
vertical-align: -10px;
}

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_2.12! ←

Take note that instead of px values, you can use pt (points), cm (centimeters) and % (percentage) values.

Vertical align property does not act the same way for all elements.
For example, some additional CSS styling is needed for div elements.

The HTML: (Code)

<div class="main">
<div class="paragraph">
This text is aligned to the middle
</div>
</div>

The CSS: (Code)

.main {
height: 150px; width: 400px;
background-color: LightSkyBlue;
display: inline-table;
}
.paragraph {
display: table-cell;
vertical-align: middle;
}

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_2.13! ←

Take note that display: inline-table; and display: table-cell; styling rules are applied to make the vertical-align property work with divs.

IX. text-decoration

The text-decoration Property

The text-decoration property specifies how the text will be decorated.

Commonly used values are:
none - The default value, this defines a normal text
inherit - Inherits this property from its parent element
overline - Draws a horizontal line above the text
underline - Draws a horizontal line below the text
line-through - draws a horizontal line through the text (substitutes the HTML <s> tag )

The example below demonstrates the difference between each value.

The HTML: (Code)

This is default style of the text (none).
This text inherits the decoration of the parent.
This is overlined text.
This is underlined text.
This is lined-through text.

The CSS: (Code)

p.none {
text-decoration: none;
}
p.inherit {
text-decoration: inherit;
}
p.overline {
text-decoration: overline;
}
p.underline {
text-decoration: underline;
}
p.line-through {
text-decoration: line-through;
}

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_2.14! ←

Take note that you can combine the underline, overline, or line-through values in a space-separated list to add multiple decoration lines.

Another value of text-decoration property is blink, which makes the text blink.

CSS syntax looks like this:

text-decoration: blink;

Take note that this value is valid but is deprecated and most browsers ignore it.

X. Indenting the Text

The text-indent Property

The text-indent property specifies how much horizontal space should be left before the beginning of the first line of the text. Property values are length (px, pt, cm, em, etc.), %, and inherit.

The HTML: (Code)

This is an example of
text-indent property.
First line of our text is indented to the right in 60 px.
Besides pixels, you can also use other measurement units,
like pt, cm, em, etc.

The CSS: (Code)

p {
text-indent: 60px;
}

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_2.15! ←

Take note that negative values are allowed. The first line will be indented to the left if the value is negative.

XI. text-shadow

The text-shadow Property

The text-shadow property adds shadow to text. It takes four values:

The first value defines the distance of the shadow in the x (horizontal) direction.
The second value sets the distance in the y (vertical) direction.
The third value defines the blur of the shadow.
The fourth value sets the color.

The HTML: (Code)

<h1>Text-shadow example</h1>

The CSS: (Code)

h1 {
color: blue;
font-size: 30pt;
text-shadow: 5px 2px 4px grey;
}

In the example above, we created a shadow using the following parameters:
5px - the X-coordinate
2px - the Y-coordinate
4px - the blur radius
grey - the color of the shadow

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_2.16! ←

To add more than one shadow to the text, add a comma-separated list of shadows.

text-shadow with Blur Effect

When working with shadows, you can use any CSS-supported color format.

For the x and y offsets, various types of units can be used (like px, cm, mm, in, pc, pt, etc)
Negative values are also supported.

The example below creates a blue drop-shadow, two pixels higher than the main text, one pixel to the left of it, and with a 0.5em blur:

The HTML: (Code)

The HTML: (Code)

This paragraph has multiple spaces and
a line break, but it will be ignored, as we used the nowrap value.

The CSS: (Code)

p {
white-space: nowrap;
}

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_2.24! ←

Take note that the text will continue on the same line until a   tag is encountered.

The white-space Values

The white-space property also supports other values:

pre - text will only wrap on line breaks and white space
pre-line - text will wrap where there is a break in code, but extra white space is still ignored
pre-wrap - text will wrap when necessary, and on line breaks

Here is an example in which all three values are used:

The HTML: (Code)

In the markup, we have multiple spaces
and a line break.


In the markup, we have multiple spaces
and a line break, but in the result, multiple spaces are ignored.


In the markup, we have multiple
spaces and a line break.

The CSS: (Code)

p.pre {
white-space: pre;
}
p.preline {
white-space: pre-line;
}
p.prewrap {
white-space: pre-wrap;
}

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_2.25! ←

Take note that Pre-wrap value behaves as the pre value, except that it adds extra line breaks to prevent the text breaking out of the element's box.

Go to top
« Previous 1 2 3 4 5 6 7 8 Next »