content: " meter";  /* string */
content: '$ ';      /* string */ 

The keywords in CSS, on the other hand, aren’t marked separately, for example:

color: black;
width: auto;
display: inline-block; 

Named Colors Using a Name as a Color Value

#RRGGBB 

Here R stands for the red portion, G for the green, and B for the blue one. Let’s take a look at a simple example:

.p_article {
  background-color: #0000FF;
  color: #FFFFFF;
} 

With the following specifications, you specify that the paragraph text in white color with 0.3 is exactly 30% visible and 70% transparent:

.p_article {
  background-image: url('background.jpg');
  background-repeat: no-repeat;

  color: rgba(255, 255, 255, 0.3);
} 

Here, an image has also been inserted with background-image to demonstrate how the image remains visible through the text thanks to the rgba() function. You can fine-tune the transparency value even more and use a second decimal place (hundredths) after the decimal point, for example, 0.35.

Many web designers find it more intuitive or easier to remember to specify the hue with an integer value from 0 to 360. To illustrate this, you can imagine a color circle from 0 to 359 degrees, where the value 0 or 360 stands for red, 120 for green, and 240 for blue.

The values of saturation and lightness are provided in percentages. The more the saturation value is reduced from 100% to 0%, the more the hue turns to gray. The normal lightness, on the other hand, is displayed via the value 50%. A lightness of 100% is white, and a lightness of 0% is black.

Here’s a simple example of hsl():

.p_article {
  background-color: hsl(240, 100%, 50%);
  color: hsl(0,100%,100%);
} 

As with the other examples, you use the class selector to define a CSS rule for a paragraph text with the <p> element with a blue background and white font.

Color Selection Tools

If you want to know a specific color value on a website, Firefox provides a color picker in the developer tools. If you select it and move the cursor to the respective color, you’ll know the color value. If you click on it, the hex value will be copied to the clipboard.

You can use short notations in CSS to bundle some CSS features and write them down in one go. Thus, take a specification such as the following:

.my_article { margin: 25px; } 

It is merely a short version of the following:

.my_article {
  margin-top: 25px;     /* Top margin  */
  margin-right: 25px;   /* Right margin */
  margin-bottom: 25px;  /* Bottom margin */
  margin-left: 25px;    /* Left margin  */
} 

The CSS feature margin is used for an outer margin or distance between the current element and its parent or adjacent element. We’ll return to that later.

You can use this short notation not only for more than just four of the same properties but also for specifying four different values in a shorter way:

.my_article { margin: 25px 10px 20px 5px; } 

This shorter specification is identical to the following:

.my_article {
  margin-top: 25px;     /* Top margin  */
  margin-right: 10px;   /* Right margin */
  margin-bottom: 20px;  /* Bottom margin */
  margin-left: 5px;     /* Left margin  */
} 

The only important thing about the short notation is that you know about the clockwise order. Starting from 12 o’clock with top, the order in the clock hand is top, right, bottom, and left.

If the values of left and right are the same, you can use the following:

article { margin: 25px 10px 20px; } 

Because the fourth value (left) has been omitted, the value of right gets used instead, making the value of the left and right margins 10 pixels. You can do the same with top and bottom:

.my_article { margin: 20px 10px; }