Welcome back, Navigator! Today, we'll delve into text styling with CSS. We have a sci-fi library page that's currently plain, and we're going to color it! Color is a crucial aspect of web design as it sets the visual tone of a webpage and can highlight important sections, thereby enhancing user experience.

In CSS, we use color and background-color properties to color text and backgrounds respectively. Let's see this in action:

body {
    color: white;
    background-color: black;
}

This code snippet makes all the text in the body element of our HTML document white and gives it a black background.

Colors can be specified in several ways — Named Colors (e.g., blue), HEX Values (e.g., #c0c0c0 for silver), RGB Values (e.g., rgb(0,0,255) for blue), and HSL Values (e.g., hsl(120,100%,50%) for lime). Feel free to experiment with these methods to add some vibrancy to your webpage!

Next, we'll explore font styling, a key aspect for making your web content both appealing and readable.

In CSS, we adjust the text size with the font-size property, define the font with font-family, and alter text thickness using font-weight. Let's incorporate these into our previous style:

body {
    color: white;
    background-color: black;
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: normal;
}

With these changes, our webpage comes across as being easier to read and visually more appealing.

To create visually appealing text styles, the text-decoration-line and text-decoration-style properties work hand in hand in CSS.

The text-decoration-line property sets the kind of text decoration to use. Here are the values it can take:

• none: Produces no text decoration.
• underline: Creates a line below the text.
• overline: Places a line above the text.
• line-through: Strikes a line right through the text.
• blink: Animates the text to make it blink (not generally recommended for usability reasons as well as limited browser support).

Likewise, text-decoration-style lets you specify the style of the line used to decorate the text. It can take one of the following values:

• solid (default): The line is a solid, unbroken straight line.
• double: The line is a double straight line.
• dotted: The line is a series of round dots.
• dashed: The line is a series of short square-ended dashes.
• wavy: The line is a wavy line.

Additionally, we can use the text-decoration-color property to set the color of the text decoration.

With these powerful properties at hand, you can create your own combination of line types and styles. Let's see an example of a dashed underline:

h2 {
    text-decoration-line: underline;
    text-decoration-style: dashed;
    text-decoration-color: green;
}

This gives your text a green dashed underline.

Similarly, you can experiment with different line types/styles for text-decoration, giving your webpage a touch of creativity and making your text more engaging. Enjoy experimenting!

Just as we've done, you can marry these three styles into one simple line using the text-decoration shorthand property. Here's the equivalent shorthand for the code above:

h2 {
    text-decoration: underline wavy red;
}

The first value (underline) sets text-decoration-line, the second (wavy) sets text-decoration-style, and the third (red) sets text-decoration-color.

Fascinating, right? The text-decoration property provides a vast array of options to decorate your text and make your pages aesthetically pleasing. Have fun experimenting with it!