CSS Tutorial: Introduction to Cascading Style Sheets
Email Us

info@yourdomain.com

Call Us

+01 3434320324

Find Us

234 Littleton Street

Values and units of measurement in CSS

We have learned that a CSS property can be set by assigning specific values. In this lesson we will see which are the types of values and the units of measure with which you can define the properties. First of all, however, it is appropriate to explain two fundamental syntactic rules.

1. The values of a property should never be put in quotes. The only exceptions are values expressed by text strings and font names made up of more than one word. An example:

/* Express values for the content property

  with a text string */

content: “Long live CSS”;

/* Font definition Times New Roman */

“Times New Roman”, Georgia, serif.

2. When using numerical values with units of measurement, there must be no space between the number and the unit code. It is therefore correct to write 15px or 15em. It is wrong to use 15 px or 15 em instead. In these cases the rule will be ignored or misinterpreted.

Value types

In CSS the values can be expressed by:

  • numbers can be defined as integers (1, 23, 45, etc.) or floating point (1.2, 3.45, 4.90, etc.)
  • unit of measure
  • percentages
  • codes for defining colours
  • URI
  • keywords
  • text strings

/* Line height with a number */

I’ve got a lot of work to do.

/* Width with unit of measure */

I’m sorry. I’m sorry. I’m sorry.

/* Width in percent */

I’m going to have to go back to the old days, and I’m going to go back to work.

/* Color with hexadecimal code */

body color: #2795b6;}

/* URL for a background image */

body {background-image: url(sfondo.jpg);}

/* Background repetition with a keyword */

body {background-repeat: no-repeat;}

/* Text string */

content: “Long live CSS”;

Unit of measurement for dimensions

This is the list of units of measure used to define dimensions, spaces or distances. In common practice only some of them are actually used. However, we list them all for completeness.

in

(inches – inches) classic measure of the American metric system. Virtually nil its value on a medium such as a web browser.

cm

(centimetres) same speech seen for the thumbs, the greatest difficulty lies in the rendering on the monitor, which is something else than the printed paper.

mm

(millimeters) see what is said for centimeters and inches.

pt

(points) unit of typographical measurement designed essentially to define the size of fonts. Its use is in fact limited to CSS for printing.

pc

(picas) unit not widely used. 1 pica equals 12 points.

em

(em-height) unit of measure of wide use if you want to set the size of fonts or boxes with a relative unit of measure.

ex

(ex-height) in fact non-existent its use. 1ex is the height of the lowercase x character of the chosen font.

px

(pixels) unit of measure ideal for screens. It is the most used and easy to understand unit.

Percentage

A value expressed as a percentage is always to be considered relative to another value, generally the value expressed for the relative element. It is expressed with a numerical value followed (without spaces) by the percentage sign: 60% is therefore correct, 60% is not.

Colours

On the different ways to express the value of a colour, see lesson 24 of the guide.

Strings

Some CSS properties may have as value a text string to be inserted as added content in the document. Values expressed by strings should always be enclosed in quotes. There are two properties involved: content and quotes.

URI values

These are URLs pointing to external documents (usually images, like in backgrounds). They can be absolute or relative URLs. In this case, the path always refers to the position of the style sheet and not the HTML document.

The address definition is always introduced by the keyword url and should be inserted in brackets round, with or without quotes. These can be single or double. An example:

background-image: url(background.jpg);

background-image: url(‘background.jpg’);

background-image: url(“background.jpg”);

Leave a Reply

Your email address will not be published. Required fields are marked *

Solve : *
30 × 10 =