span style font size, color, weight, style, type

span is an inline-level element. It is used within block-level elements (<p>, <div>) to make annotations and syntax highlighters. The inline-level element does not start on a new line.

See the following CSS rules to annotate a piece of text present within span element. We'll apply the following CSS properties (size, color, weight, style, and type) one by one to get the desired annotation.

span font size

It defines the size of text present within span element. The possible values are in px, pt, in, mm, and cm. Relative sizes may be specified with the percentage value (%).

font-size: 20px;
font-size: 20pt;

font-size: 1in;

font-size: 2mm;

font-size: 1cm;

span font color

It defines the color of text present within span element. The rgb, hexadecimal, or named values may be used.

color: lightblue;
color: #ff0000;
color: rgb(0,0,255);

span font weight

It defines the weight of text present within span element. This property accepts numerical as well as keyword values. For example, 100-900, light, bold, lighter, etc.

font-weight: 100;
font-weight: 500;
font-weight: 900;
font-weight: light;
font-weight: bold;

span font style

It defines the style of font i.e. normal or italic style.

font-style: normal;
font-style: italic;

span font type

We can get the desired type by using the font-family property. There are five main families of font. And each one has further font families that you can find at google fonts.

font-family: serif;
font-family: sans-serif;
font-family: fantasy;
font-family: cursive;
font-family: monospace;