CSS basics: Get started with Text, Color, and Font Style

CSS Text#

CSS Text includes a lot of different properties for formatting and styling our text. Let’s explore some useful CSS Text properties:

CSS Text Decoration#

The text-decoration property allows us to add or remove decorative elements from our text. For example, if we want to remove an underline from a link, we can use the text-decoration: none; value:

There are other values that we can use to decorate our text using CSS, such as:

• Strikethrough: text-decoration: line-through;

• Overline: text-decoration: overline;

• Underline: text-decoration: underline;

Let’s see how they would look in an HTML document:

CSS Text Transform#

The text-transform property allows us to change letters to uppercase or lowercase. We can also use this property to turn the entire text into uppercase or lowercase letters, or we can capitalize the first letter of each word in the document.

CSS Text Align#

The text-align property allows us to set the horizontal alignment of text. Let’s take a look at how to left-align, right-align, and center-align text:

We can also manipulate the text direction like this:

CSS Text Spacing#

The CSS Text Spacing properties allow us to manipulate indentation, letter spacing, word spacing, white space, and line height.

text-indent:

letter-spacing:

CSS Text Shadow#

The text-shadow property allows us to add shadows to text:

CSS Color#

The CSS Text Color property allows us to manipulate things like text color and background color using color and background-color. In the following example, we’ll change the color of the text to blue and white, and the background color to grey and black.

CSS Color Values#

We can use the CSS Color Codes and Values to manipulate the colors of different aspects of our web page. We can also use RGB values, RGBA values, HEX values, HSL values, and HSLA values to specify color.

RGB values

RGB color values use the rgb() property. The RGB property takes three values. Each value can be represented as a percentage or a number between 0 and 255. The first number represents a red value, the second number represents a green value, and the final number represents a blue value. Not every browser supports RGB, so make sure to check before using it.

The RGB value for the color red is rgb(255,0,0).

RGBA values

RGBA color values are an extension of RGB values that specify the opacity of a color. This property takes four values. The first three values are the same as the values in RGB. The fourth value is called an alpha parameter. This number falls between 0.0 to 1.0.

HEX values

Hexadecimal color values are six-digit representations of color. Each code begins with a pound sign # and is followed by six numbers. The first two digits represent a red value, the second two digits represent a green value, and the final two digits represent a blue value.

The HEX value for the color red is #FF0000.

HTML Color Names

There are 140 HTML color names that are represented as HEX values. We can use these values to specify different colors within our web pages.

HSL values

HSL color values use hue, saturation, and lightness to determine color. The hue value is a degree on the color wheel that can fall between 0 and 360. The saturation value is a percentage that can fall between 0 and 100 percent. The lightness value is a percentage that can fall between 0 and 100 percent.

The HSL value for the color red is hsl(0, 100%, 50%).

HSLA values

HSLA values are an extension of HSL values that specify the opacity of a color. Similar to RGBA, HSLA takes four values, with the final value being the alpha parameter that indicates the opacity.

CSS Font Style#

The font-style property allows us to set different font styles for our text. For example, we can make the font style “normal”, or we can make it “italic”. Let’s take a look:

Wrapping up and next steps#

CSS is an important part of web page creation. It allows us to take control of the design and layout of our web pages so we can create visually appealing websites. It also plays a big role in accessibility efforts because it separates the structure of our documents from the overall presentation. By using CSS styles, we can manipulate many different aspects of our pages, such as alignment, coloring, positioning, spacing, and more.

We covered a lot of important information about CSS styling today, but there’s still a lot more to learn. Some recommended topics to cover next include:

• CSS selectors
• CSS with HTML text, HTML tags, and HTML elements
• CSS background-image

To get started learning these concepts and more, check out Educative’s learning path Become a Front End Developer. In this hands-on learning path, you’ll gain a mastery of HTML, CSS, and JavaScript, which will allow you to create functional websites and web applications. By the end, you’ll have a valuable leg up on your web development journey.

Happy learning!

Continue reading about CSS#

• SASS for CSS: Advance your frontend skills with CSS preprocessor
• CSS Flexbox tutorial: How to use Flexbox properties
• React Bootstrap tutorial: Upgrade React apps with a CSS framework