Frequently Used HTML Properties

In this article, we will learn about few HTML properties like, Color, Font and Margin :

Color

The color property is used for setting the color of text.

Syntax:

color: value;

The value can be specified in any of the following ways:

* We can specify colors by their English names. The standard color names are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

* Colors can also be defined as an RGB triplet in hexadecimal format i.e. the combination of Red, Green, and Blue color values. The lowest value is 0 (hex 00) and t highest value is 255 (hex FF)

Example:

“#00FF00”

It represents colors as hexadecimal numbers for red, green and blue. The first two characters following the # give the number for red, the next two for green and the last two for blue. These numbers are always in the range 0 to 255 decimal. Above example designates dark green color

Font

The font property is used for setting the font family, size, style and weight of the desired element. The font property includes the following properties:

Font-Family

The font-family property is for setting the font to be displayed in an element.

Example:

font-family: Verdana;

The element to which this property is applied will appear in Verdana font

The value of this property can be any font like verdana, sans-serif, arial, courier etc;

Font-Size

The font-size property is for setting the size of the text used in an element.

Syntax:

font-size: value;

where the value can be any of the following:

* xx-large

* x-large

* larger

* large

* medium

* small

* smaller

* x-small

* xx-small

* length

* % (percent)

Examples:

font-size: xx-large;

font-size: small;

Out of the above font size values, length and % (percent) needs explanation. Both are used for specifying the font size in units.  CSS provides us four different units to specify the font size:

* “Ems” (em) The “em” is a scalable unit that is equal to the current font-size. That is, if the if the current font-size of the document is 12pt, then 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc.

* Pixels (px) – Pixels are fixed-size units used to define the resolution of the computer screen One pixel is equal to one dot (smallest unit) on the computer screen. The size in pixels cannot be scaled up or down.

* Points (pt) – Points are usually used for defining size of printable documents. One point is equal to 1/72 of an inch.

* Percent (%) – The percent unit is much like the “em” unit. If the current font-size of the document is 12 pt, then font size of 100% means 12pt. The benefit of using the percent unit is that the text can be scaled up as well as down.

Note: Both the em and percent units get larger as the base font-size increases, but pixels and points do not.

Examples:

font-size:12px;

font-size:120%;

Font-Style

The font-style property is for setting the style of the text in a desired element.

Syntax:

font-style: value;

where values can be any of following:

* normal

* italic

* oblique

Font Weight

The font-weight property is for specifying the weight of text in a desired element.

Syntax:

font-weight: value;

where value can be any of the following:

* lighter

* normal

* 100 .. 900

* bold

* bolder

Examples:

font-weight:bold;

font-weight:300;

font-weight:lighter;

Margin

The margin property declares the margin between an HTML element and the elements around it. This property can be set for the top, left, right and bottom of an element. It includes the following four properties: margin-top, margin-left, margin-right and margin-bottom to specifying the margins for the top, left, right and bottom of the element respectively.

Syntax:

margin-(top/left/right/bottom): value;

where value can be specified in terms of length, percentage or auto. The length can be specified in terms of px (pixels), pt (points), in(inches) etc.

Examples:

margin-top:10px;

margin-top:.3in;

We can also specify all the four margins of an element in a single property: margin

With margin property, we can specify the top, left, right and bottom margin of an elements simultaneously. The sequence of specifying the four margins is as follows: top, right, bottom and left.

Example:

margin: 10px 10px 10px 10px;

If we want to specify the same margin on all sides, we can even specify a single value to be applied for all sides.

Example:

margin: 10px;

Leave a Reply

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