Cascading Style Sheets (CSS) Integration Methods
Integration Methods for Cascading Style Sheets
Cascading Style Sheets (CSS) provide mechanisms to control the visual presentation and layout of elements within HTML documents. CSS rules can be included within an HTML document using different techniques that differ in scope, reusable structure, and overall efficiency. Two foundational techniques for integrating style rules into HTML documents are the in-line style method (also called the attribute style) and the internal or embedded style sheet method.
In-Line Style Method (Attribute Style)
The in-line style method, also referred to as the attribute style, allows styling rules to be applied directly to individual HTML elements through the use of the style attribute. This attribute can be included with virtually any element residing in the body section of an HTML document, up to and including the <body> tag itself.
Within an in-line style attribute, styling instructions are written as property declarations. When multiple declarations are provided within a single tag's style attribute, each individual declaration must be separated from the next by a semicolon.
An example of an in-line style declaration applied to a horizontal rule tag is:
<hr style="width: 571; height: 100; background-color: blur">
In this example, the dimensions are specified with a width of units and a height of units, alongside a background color set to blur.
A primary disadvantage of the in-line styling approach is that it is not an efficient use of style sheets. Because an in-line style declaration is bound exclusively to the specific element tag in which it is written, the entire declaration must be manually repeated for every element whenever the exact same visual styling needs to be applied to another element within a document.
Internal or Embedded Style Sheet Method
The internal or embedded style sheet method offers a substantially wider scope than the in-line method. Under the in-line method, visual style effects are strictly restricted to the specific single element containing the style declaration. In contrast, with an embedded style sheet, specified styling declarations automatically get applied to all elements of the targeted type throughout the HTML document.
To construct an embedded style sheet, style rules are defined using the <style> tag, which is placed inside the <head> section of the HTML document. Centralizing style definitions within the <head> section via an embedded style sheet eliminates the need to duplicate styling code across individual tags, providing broad scope across element types and greater document maintainability.