CSS is the Static Approach Whereas JavaScript is the Programmatic Approach.

A style sheet enables the user to control fonts, color, and layouts. They enable web page designers to use standard HTML elements in a variety of new ways. A single style sheet can be used as a template for many web pages. There are two types of style sheets available namely :

  • Cascading Style Sheets (CSS)
  • JavaScript Style Sheets

CSS is the static approach to specifying style and JavaScript is the programmatic approach. A CSS style sheet is specified as “text/CSS” and the type of JavaScript Style sheet is “text/JavaScript”. Although both types can be used CSS style sheets is the most widely used since almost all browsers support it.

Cascading style sheets are collections of rules formed into style sheets. Cascading style sheets are called cascading because more than one style sheet can influence the presentation of a document. Different Style sheets are thought of as coming in a series or cascade. Style sheets come from multiple sources like the browser, the web page designer, etc, Each browser has a default style sheet that describes how it displays a document. The syntax for defining a style sheet is :

The properties of cascading style sheets are listed below :

PROPERTYVALUES
background-colorA named color or a 6-digit hexadecimal value such as #00FF00 or an RGB value such as RGB(10%, 10%, 80%)
background-imageURL of the image
border-colorNone or a named color or a 6-digit hexadecimal value such as #00FF00 or an RGB value such as RGB(10%, 10%, 80%)
border-styleNone, solid, double, inset, outset, groove or ridge
border-top-width border-bottom-width

border-left-width

border-right-width

border-width

Numerical values such as 25pt, 0.2in.
colorA named color or a 6-digit hexadecimal value such as #00FF00 or an RGB value such as RGB(10%, 10%, 80%)
displayblock, inline, list-item, none.
floatTo align an element within its parent. It can take values left, right, none.
font-familyName of a font family
font – sizeLarger, smaller, xx-small, x-small, small, medium, large, x-large, xx-large or a length such as 15pt or a percentage such as 80%.
font-styleNormal or italic
font-weightNormal, bold, bolder, lighter or a value from 100-900 with 400 as normal and 700 as bold.
line-heightNormal or a number to multiply the current font height
list-style-typedisc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none.
margin-left margin-right

margin-top

margin-bottom

auto or numerical values such as 25pt, 0.2in.
marginTo set margins all at once. Its arguments are top, right, bottom, and left margin values in order.
padding-top padding-right

padding-bottom

padding-left

Numerical values such as 25pt. 0.2in. or percentage of the elements font size.
paddingsTo set paddings all at once. Its arguments are top, right, bottom, and left padding values in order
text-alignleft, right, center, justify
text-decorationnone, underline, line-through, blink
text-indentNumerical values such as 25pt, 0.2 in. or percentage of elements width size.
text-transformcapitalize, uppercase, lowercase, none
white-spacenormal, pre
widthNumerical values such as 25pt, 2.0 in. or percentage of the elements font size.

 

This example is used to illustrate the use of the cascading style sheets and its various properties. This text would appear in red background with a top margin of 50 pixels, a left margin of 20 pixels and a border width of 2 pixels