In this blog, we will learn about colours and CSS units 🤩.

Colors:

CSS Colors, Hexcodes, and Linear Gradients

Colors are an important part of web design, and CSS provides a variety of ways to specify colors. In this article, we'll look at the different ways to define colors in CSS, including using named colors, hex codes, and linear gradients.

Named Colors

The easiest way to specify a color in CSS is to use a named color. Named colors are predefined color names that can be used directly in your CSS. For example, you can set the color of a text element to red like this:

color: red;

Here are some other commonly named colors:

• black

• white

Named colors are convenient, but they have a limited range of options. For more precise control over color, you can use hexcodes.

Hexcodes

A hexcode is a six-digit code that represents a color. Each digit in the code represents a different component of the color: red, green, and blue (RGB). The value of each component ranges from 00 to FF, with 00 being the minimum value and FF being the maximum.

Here's an example of a hexcode:

#FF0000

This hexcode represents the color red, with a maximum value of FF for the red component and 00 for the green and blue components.

You can use hexcodes to specify colors in your CSS like this:

color: #FF0000;

You can also use a shorthand version of the hexcode, where each pair of digits is repeated:

color: #F00;

This shorthand version of the hexcode is equivalent to the previous example.

Linear Gradients

Linear gradients are a way to create a smooth transition between two or more colors. They are defined using the linear-gradient function in CSS.

Here's an example of a linear gradient that goes from red to blue:

color: linear-gradient(to bottom, #FF0000, #0000FF);

The to bottom part of the code specifies the direction of the gradient. In this case, the gradient goes from top to bottom. You can also use other directions, like to right or to top right.

You can also define a linear gradient with multiple colors. Here's an example that goes from red to yellow to green:

background: linear-gradient(to right, #FF0000, #FFFF00, #00FF00);

Linear gradients are a powerful tool for creating beautiful backgrounds and other design elements in your web pages.

CSS Units:

CSS Units: Pixels, Rems, Ems, and Percentages

When you create a web page, you have to use different measurements for things like font sizes and dimensions. There are several units you can use in CSS, including pixels (px), rems, ems, and percentages (%).

Pixels (px)

Pixels are the most common unit used in web design. A pixel is a small dot on the screen, and pixel units refer to the number of pixels used to measure an element's size or position. For example, you can set the font size of a text element like this:

font-size: 16px;

This sets the font size to 16 pixels. Pixels are a good choice for things that need to be precise, like borders or images.

Rems

A rem, short for root em, is similar to an em but is based on the root element of the document. The root element is usually the html element. This means that if you change the font size of the root element, all elements that use rem units will be affected.

Here's an example:

html {
  font-size: 16px;
}

p {
  font-size: 1.5rem;
}

In this example, the font size of the root element is set to 16 pixels. The p element uses a font size of 1.5 rems, which is equivalent to 24 pixels (1.5 x 16). If you change the font size of the root element to 20 pixels, the font size of the p element will also change to 30 pixels (1.5 x 20).

Ems

An em is a unit that is relative to the font size of the parent element. For example, if the font size of the parent element is 16 pixels, setting the font size of a child element to 1.5 ems would result in a font size of 24 pixels (1.5 x 16).

Here's an example:

p {
  font-size: 16px;
}

span {
  font-size: 1.5em;
}

In this example, the p element uses a font size of 16 pixels. The span element, which is a child of the p element, uses a font size of 1.5 ems. This sets the font size of the span element to 24 pixels (1.5 x 16).

Percentages (%)

Percentages are a unit of measurement that are relative to the parent element. For example, if the width of a parent element is 500 pixels, setting the width of a child element to 50% would result in a width of 250 pixels (50% of 500).

Here's an example:

.parent {
  width: 500px;
}

.child {
  width: 50%;
}

In this example, the parent element has a width of 500 pixels. The child element, which is a child of the parent element, has a width of 50%. This sets the width of the child element to 250 pixels (50% of 500).

BONUS:

Here are the two extensions that makes your life easier🤩,

1. live color picker => picks the color of any element on the webpage and when we click on it automatically copies the hexcode to your clipboard.

2. font ninja => when you navigate through the webpage you can find which font is used and how many pixels it is and what is the color of the font, line spacing, line height also.

   If you are learning these extensions will really help you.

Conclusion:

In this article, we've looked at the different ways to define colors in CSS, including using named colors, hexcodes, and linear gradients. Each of these methods has its own advantages and disadvantages, but together they provide a powerful toolkit for designing beautiful and engaging web pages. And also we've looked at the different units of measurement you can use in CSS, including pixels, rems, ems, and percentages. Each of these units has its own advantages and disadvantages, and choosing the right one depends on your design needs. Whether you need precise measurements or flexible layouts, CSS has.

Thankyou😊!