What is a JavaScript® Style?

A JavaScript® style is part of the JavaScript® code that affects the appearance, or styling, of a Web page. These styles can be broken into five sections: text, font, box, classification, and backgrounds and colors. Each section affects a different part of the Web page, according to the creator’s needs, and comes with its own set of tags.

Text JavaScript® style affects how the text appears on the site. Elements that can be altered here are the height of the lines, how the text is aligned and the size of the indentation for each paragraph. Text JavaScript® style does not affect how the font appears, only how the text is organized.

Font JavaScript® style is similar to text in that it affects the letters, but this style changes the appearance of the letters, not their organization. Areas that can be set with this type of JavaScript® style are font style and font family, whether all the letters are uppercased or lowercased, and how light or dark the letters are. Font family refers to what font the text will use, and font style refers to whether the text is normal, bold or italicized.

Boxes, or hypertext markup language (HTML) tables, are affected by box JavaScript® style. Other sections can also be altered with this style, but it is mainly used for tables. The areas affected here are the margins in all four directions. Setting a margin — for example, a 20-pixel margin at the top — will push the box downward by 20 pixels and will ensure that those 20 pixels of space at the top remain blank. This is commonly used to organize the entire Web page.

Classification JavaScript® style is made to affect lists, both numbered and bulleted. JavaScript® has only one attribute in this regard: listStyle. This affects how the list is organized with other elements on the page. For example, if you set listStyle to “inside,” then the list will appear inside another specified element.

The background and color style comes with two similar, but different, tags: backgroundColor and color. These two tags do exactly the same thing; they are used to set the color of the Web page. BackgroundColor is used to color the entire background of the Web page, though, while color is used only to set the color of an individual element. Colors can either be set by using the color’s name, such as green or red, or using the hexadecimal value of the color.