Several advantages has been
cited as to why CSS became accepted in the growing industry of web design. Such
advantages are as follows:
* Reformatting or Progressive Enhancement - With a simple change of one line, a different stylesheet can be used for the same page. This has advantages for accessibility, as well as providing the ability to tailor a page or site to different target devices. Furthermore, devices not able to understand the styling will still display the content.
* Bandwidth - A stylesheet will usually be stored in the browser cache, and can therefore be used on multiple pages without being reloaded, increasing download speeds and reducing data transfer over a network.
* Consistency - When CSS is used effectively, in terms of inheritance and "cascading," a global stylesheet can be used to affect and style elements site-wide. If the situation arises that the styling of the elements should need to be changed or adjusted, these changes can be made easily, simply by editing a few rules in the global stylesheet.
* Flexibility - By combining CSS with the functionality of a Content Management System, a considerable amount of flexibility can be programmed into content submission forms. This allows a contributor, who may not be familiar or able to understand or edit CSS or HTML code to select the layout of an article or other page they are submitting on-the-fly, in the same form.
Web professionals that used CSS as their base for layout designing and editing have also cited some drawbacks upon relying heavily on the style sheet language. Here are a short list of the some disadvantages of using pure CSS on web layouts and designs.
* No Expressions - There is currently no ability to specify property values as simple expressions (such as margin-left: 10% - 3em + 4px;). This is useful in a variety of cases, such as calculating the size of columns subject to a constraint on the sum of all columns.
* Collapsing Margins - Margin collapsing is, while well-documented and useful, also complicated and is frequently not expected by authors, and no simple side-effect-free way is available to control it.
* Inconsistent Browser Support - Different browsers will render CSS layout differently as a result of browser bugs or lack of support for CSS features. Numerous so-called CSS "hacks" must be implemented to achieve consistent layout among the most popular or commonly used browsers. Pixel precise layouts can sometimes be impossible to achieve across browsers.
* Lack of Variables - CSS contains no variables. This makes it necessary to do a "replace-all" when one desires to change a fundamental constant, such as the color scheme or various heights and widths.
* Vertical Control Limitation - While horizontal placement of elements is generally easy to control, vertical placement is frequently unintuitive, convoluted, or impossible. Simple tasks, such as centering an element vertically or getting a footer to be placed no higher than bottom of viewport, either require complicated and unintuitive style rules, or simple but widely unsupported rules.
* Poor Layout Controls for Flexible Layouts - While new additions to CSS3 provide a stronger, more robust layout feature-set, CSS is still very much rooted as a styling language, not a layout language.
* Control of Element Shapes - CSS currently only offers rectangular shapes. Rounded corners or other shapes may require non-semantic markup. However, this is addressed in the working draft of the CSS3 backgrounds module.
* No of Multiple Backgrounds per Element - Highly graphical designs require several background images for every element, and CSS can support only one. Therefore, developers have to choose between adding redundant wrappers around document elements, or dropping the visual effect.
* Lack of Column Declaration - While possible in current CSS, layouts with multiple columns can be complex to implement. With the current CSS, the process is often done using floating elements which are often rendered differently by different browsers, different computer screen shapes, and different screen ratios set on standard monitors.
Though a number of difficulties, drawbacks, and disadvantages were found through use of "pure" CSS, its usefulness in web design is still apparent in other ways. CSS consumes lesser bandwidth. With CSS, virtually all of the layout information resides in one place: the CSS document. Because the layout information is centralized, these changes can be made quickly and globally by default. And because of its accessibility, web content for mobiles phones and PDAs became accessible because of CSS.
* Reformatting or Progressive Enhancement - With a simple change of one line, a different stylesheet can be used for the same page. This has advantages for accessibility, as well as providing the ability to tailor a page or site to different target devices. Furthermore, devices not able to understand the styling will still display the content.
* Bandwidth - A stylesheet will usually be stored in the browser cache, and can therefore be used on multiple pages without being reloaded, increasing download speeds and reducing data transfer over a network.
* Consistency - When CSS is used effectively, in terms of inheritance and "cascading," a global stylesheet can be used to affect and style elements site-wide. If the situation arises that the styling of the elements should need to be changed or adjusted, these changes can be made easily, simply by editing a few rules in the global stylesheet.
* Flexibility - By combining CSS with the functionality of a Content Management System, a considerable amount of flexibility can be programmed into content submission forms. This allows a contributor, who may not be familiar or able to understand or edit CSS or HTML code to select the layout of an article or other page they are submitting on-the-fly, in the same form.
Web professionals that used CSS as their base for layout designing and editing have also cited some drawbacks upon relying heavily on the style sheet language. Here are a short list of the some disadvantages of using pure CSS on web layouts and designs.
* No Expressions - There is currently no ability to specify property values as simple expressions (such as margin-left: 10% - 3em + 4px;). This is useful in a variety of cases, such as calculating the size of columns subject to a constraint on the sum of all columns.
* Collapsing Margins - Margin collapsing is, while well-documented and useful, also complicated and is frequently not expected by authors, and no simple side-effect-free way is available to control it.
* Inconsistent Browser Support - Different browsers will render CSS layout differently as a result of browser bugs or lack of support for CSS features. Numerous so-called CSS "hacks" must be implemented to achieve consistent layout among the most popular or commonly used browsers. Pixel precise layouts can sometimes be impossible to achieve across browsers.
* Lack of Variables - CSS contains no variables. This makes it necessary to do a "replace-all" when one desires to change a fundamental constant, such as the color scheme or various heights and widths.
* Vertical Control Limitation - While horizontal placement of elements is generally easy to control, vertical placement is frequently unintuitive, convoluted, or impossible. Simple tasks, such as centering an element vertically or getting a footer to be placed no higher than bottom of viewport, either require complicated and unintuitive style rules, or simple but widely unsupported rules.
* Poor Layout Controls for Flexible Layouts - While new additions to CSS3 provide a stronger, more robust layout feature-set, CSS is still very much rooted as a styling language, not a layout language.
* Control of Element Shapes - CSS currently only offers rectangular shapes. Rounded corners or other shapes may require non-semantic markup. However, this is addressed in the working draft of the CSS3 backgrounds module.
* No of Multiple Backgrounds per Element - Highly graphical designs require several background images for every element, and CSS can support only one. Therefore, developers have to choose between adding redundant wrappers around document elements, or dropping the visual effect.
* Lack of Column Declaration - While possible in current CSS, layouts with multiple columns can be complex to implement. With the current CSS, the process is often done using floating elements which are often rendered differently by different browsers, different computer screen shapes, and different screen ratios set on standard monitors.
Though a number of difficulties, drawbacks, and disadvantages were found through use of "pure" CSS, its usefulness in web design is still apparent in other ways. CSS consumes lesser bandwidth. With CSS, virtually all of the layout information resides in one place: the CSS document. Because the layout information is centralized, these changes can be made quickly and globally by default. And because of its accessibility, web content for mobiles phones and PDAs became accessible because of CSS.