Css

In this tutorials, we're gonna talk about 2 common value-types (Color & Length).
Everyone of us loves colors in our own perspective.
So, let's start with CSS Colors.

Start Reading ;

How to specify Colors in CSS?

Colors are used with many Properties to style text, element’s background, element’s border, etc… The most simple way to specify colors in CSS is using color-names. You can take a look at the color list here: Full list of supported color-names

Let’s write some CSS code using color names.
As I’m not having good sense of design stuff and using colors, so I’m gonna use a picture as color palette and pick some colors from it to use in examples. You should use your own favorite colors in your sample HTML document or your website. :D

Color palette: snow white and 7 dwarfs

HTML code:

CSS code:

Result:

See the Pen Snow White and 7 dwarfs by Kei Nart (@codenart) on CodePen.

In the example above, there’re 2 colors: RoyalBlue and Snow (Snow White is real). As you see that, color names are so descriptive and simple that anyone can guess how the colors look like when peek in CSS code.

Specify colors using HEX-values

There’re also other choices to specify colors in CSS. They’re less descriptive than color names when we look into CSS code but they’re more precise and flexible. Using color-names is the most simple way, and now we’re gonna talk about the most popular way: Using HEX-values.

There are online tools which can help use to pick colors and get their HEX values to use in CSS code: Adobe Color, W3schools Picker. You can also use your favorite image editor to do the task.

This is how we say Red using HEX values: #ff0000.

As HEX values are precise and flexible, we have more choices to say Red. The one above is the most bright Red. My beloved Red is a little bit less bright, so I can say #bb0000.

HTML code:

CSS code:

Result:

See the Pen Red Dwarf by Kei Nart (@codenart) on CodePen.

Let’s assume that you are creating a website to share useful information to help other people and you want to be fair with everyone. There are many people around the world who are using Internet Explorer version 8 and older technology web browsers. Fortunately, using HEX values is supported by all web browsers at the moment. That’s why it’s the most popular option to specify colors in CSS.

Yet, there are more ways to specify colors in CSS. They’re supported by Internet Explorer version 9+, and newer technology web browsers like Firefox, Google Chrome, and Opera.

Here are some reference links to learn more about CSS colors:

  • The most simple way to specify colors in CSS: –Using color-names.
  • The most popular way to specify colors in CSS: –Using HEX-values.
  • The most efficient way to specify colors in CSS: –Using HSLA-values.
  • The most beautiful way to specify colors in CSS: –Using Gradients.

Screenshot (using Gradients): 7 dwarfs

We’ve finished talking about colors in CSS. Let’s talk about the next common value-type: Length.

How to specify lengths in CSS?

In the previous tutorials, we’ve specified lengths in pixel to use with the font-size property. It is the most simple way to specify lengths in CSS: using static values.

Here is another example using static values to specify lengths.

HTML code:

CSS code:

Result:

See the Pen The Fifth Dimension by Kei Nart (@codenart) on CodePen.

Specify lengths using dynamic-values

For the example above, if we resize our web browsers’ windows, those blocks will maintain their specified widths. It means that they’re not adaptive to various screen sizes. Dynamic-values help us to make those blocks flexible and adaptive to various screen sizes so our webpages may look good on any devices.

Let’s change the above CSS code snippet a little bit and resize your web browser to see the effect. This time, we’re gonna use the unit % instead of px for the last two blocks.

CSS code:

Our tutorial about Colors & Lengths has finished! In the next tutorials we’ll talk about styling containers.

Next: Container Types ;