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:
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 . Let's incorporate these into our previous style:
