CSS (Cascading Style Sheets) is a popular style sheet language that’s used for describing documents written in markup languages, such as HTML. We can use CSS files and CSS code to manipulate the style, formatting, layout, and presentation of our web pages. In this CSS tutorial, we’ll cover some CSS basics, such as Font Style, Text, and Color. Let’s get started!
CSS Text includes a lot of different properties for formatting and styling our text. Let’s explore some useful CSS Text properties:
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:
Let’s see how they would look in an HTML document:
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.
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:
The CSS Text Spacing properties allow us to manipulate indentation, letter spacing, word spacing, white space, and line height.
text-shadow property allows us to add shadows to text:
The CSS Text Color property allows us to manipulate things like text color and background color using
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.
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 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
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.
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
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 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 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 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:
Join a community of 500,000 monthly readers. A free, bi-monthly email with a roundup of Educative's top articles and coding tips.