CSS Properties and Values

CSS Properties and Values:

Figure 1: A diagram that illustrates CSS syntax.

font family:

In CSS, there is the property:

font-family

. We employ this property so as to set our font.

Examples:

This sentence takes the value, serif.

This sentence takes the value, Times New Roman.

This sentence takes the value, San Serif.

This sentence takes the value, Cambria Math.

font-weight

In CSS, there is the property:

font-weight

. We employ this property so as to either embolden or lighten our text.

This sentence has a value of normal.

This sentence has a value of bold.

This sentence has a value of bolder.

This sentence has a value of lighter.

We may also set numerical values for our:

font-weight

property, within the range:

100-900

. The numerical value:

400

is equal to the value:

normal

.

This sentence has a value of 100.

This sentence has a value of 400.

This sentence has a value of normal.

This sentence has a value of 900.

color

In CSS, there is the property:

color

. This property is employed so as to set the text color.

This sentence has a value of #000000 .

This sentence has a value of black.

This sentence has a value of red.

This sentence has a value of orange.

This sentence has a value of yellow.

This sentence has a value of green.

This sentence has a value of blue.

This sentence has a value of indigo.

This sentence has a value of violet.

This sentence has a value of white.

This sentence has a value of #FFFFFF.

background-color

In CSS, there is the:

background-color

. This property sets the background colour of the element in question.

font-variant

font-variant

is a CSS property. This CSS property allows us to render some text as:

small-caps

. The font-variant property takes the values:

small-caps

and:

normal

.

This Sentence Has a Value Of small-caps.

This sentence has a value of normal.

font-size

In CSS, there is the:

font-size

property. We employ this property so as to set the size of our text. In browsers, the default text-size is:

16px

, or 16 pixels.

font-size units:

We can specify the font-size, in CSS, through employing the following units of measurement:

pixels or px
ems or em
percent or %
points or pt

.

pixels

The pixel or:

px

specifies the font-size in pixels.

examples:

This sentence has a value of default.

This sentence has a value of 16px.

This sentence has a value of 8px.

This sentence has a value of 32px.

ems

An:

em

is a unit of measurement, in CSS, that denotes a multiple, of the:

font-size

of the parent element. The

font-size

of this parent:

element is:

32px

. Within this:

element:

1em = 32px

.

This sentence has a value of 32px.

This sentence has a value of 1em.

This sentence has a value of 2em.

This sentence has a value of 3em.

This sentence has a value of 0.5em.

Now that we have exited the above:

element, the unit:

em

now refers to multiples of the font-size of the ancestor:

element, in which we still find ourselves, which has a value of:

16px

.

This sentence has a value of 32px.

This sentence has a value of 16px.

This sentence has a value of 1em.

This sentence has a value of 2em.

This sentence has a value of 3em.

This sentence has a value of 0.5em.

%

The percentage unit of measurement, much like the:

em

unit of measurement, has, as its unit of measurement, the:

font-size

of the parent/ancestor element.

We now find ourselves within a:

parent element, that possesses the:

font-size

value:

28px

. When, through CSS, we assign a percentage value to the:

font-size

properties of one of these children:

elements, we are here referrring to a percentage value of:

28px

.

This sentence has a value of 28px.

This sentence has a value of 100%.

This sentence has a value of 200%.

This sentence has a value of 300%.

This sentence has a value of 50%.

point

In CSS, the:

point

unit of measurement is equal to:

1/72 inch

. When one composes a document in Microsoft^TM Word^TM , then he/she will be used to setting his font size employing the:

point

unit of measurement. When I compose text in the Microsoft^TM Word^TM word processsor, I like to employ the:

Times New Roman

font;

a font-size of:

18pt

for my level-1 headings;

16pt

for my level-2 headings; and:

14pt

for my body text:

The font-size value of this level-1 heading is 18pt.

The font-size value of this level-1 heading is 16pt.

The font-size value of this piece of body text is 14pt.

Generally:

1em = 12pt = 16px = 100%

.

css_properties_and_values