Cascading Style Sheets, or CSS, is a style sheet language used for describing the presentation of a web design's looks and formatting. The use of CSS has become a popular tool and trend for web designers.
CSS that has simple syntax and uses a number of English keywords to specify the names of various style properties, is designed primarily to enable the separation of document content from document presentation, including elements such as the layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity, creating tableless web designs and repetition in the structural content.
CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice and on Braille-based, tactile devices. It can also be used to allow the web page to display differently depending on the screen size or device on which it is being viewed.
The CSS specifications are maintained by the World Wide Web Consortium (W3C). Internet media type (MIME type) text/css is registered for use with CSS by RFC 2318 (March 1998), and they also operate a free CSS validation service.
CSS is a commonly used application to create styles for web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL.
Advantages and Disadvantages
The use of CSS started when the need for functional web designs, both effective and efficient, were in great demand and the use of table were not as effective and as efficient as anyone have thought. Several advantages has been cited as to why CSS became accepted in the growing industry of web design.
Advantages
- Bandwidth - CSS separates a website's content from its design language, dramatically reduce file transfer size. 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. Although downloading an HTML file and a CSS file can take longer than downloading just the HTML file, this will be offset if the user goes on to download many pages using the same CSS.
- Progressive Enhancement - With a simple change of one line, a different stylesheet can be used for the same page. This has advantages for accessibility, giving the chance when a device is unable to read the stylesheet can still display its contents.
- Flexibility - By combining CSS with the functionality of a Content Management System (CMS), 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.
- Consistency - When CSS is used effectively, in terms of inheritance and cascading, a global stylesheet can be used to affect and style elements of the whole website. If the situation arises that the styling of the elements should need to be changed or adjusted, these changes can be made easily.
- SEO - CSS is considered a clean coding technique, which means search engines won't have to problems to read its content. Also, using CSS will leave a website with more content than code. And content is critical to for Search Engine Optimization.
- Browser Compatibility - CSS increase a website's adaptability to different kind of browsers, and ensure that more visitors will be able to view the website in the way it is intended.
- Viewing Options - A common web design concern is the increasing need to make websites available for different media. CSS allows the same markup page to be presented in different viewing styles for different platform, browser and devices.
Though CSS has its strengths, it also has its weaknesses. Professional web designers that used CSS as the base layout for designing have had some drawbacks upon relying heavily on the style sheet language.
Disadvantages
- Browser Support - Although CSS has the advantage of browser compatibility, different browsers will render CSS layout quite differently.
- Collapsing Margins - Margin collapsing with CSS is complicated and frequently not expected by web designers. And with CSS, there is no simple way to control it.
- Expressions - With CSS, there is no ability to specify property values. 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.
- Variables - CSS contains no variables. This makes it necessary to do a total replace of element properties when the web designer wants to change a fundamental constant, such as the color scheme or various heights and widths.
- Vertical Control Limitation - With CSS, horizontal placement of elements is generally easy to control. But vertical placement is difficult and frequently impossible. Simple tasks, such as centering an element vertically or getting a footer to be placed no higher than bottom of viewport.
- Control of Element Shapes - CSS only offers rectangular shapes. Rounded corners or other shapes may require non-semantic markup. However, this is can be done by using CSS Level 3 (CSS3), and is able to be shown on most popular browsers.
- Access to external files - Any pages which depend on a web-level sheet will lose their formatting if access to the web-level sheet site is lost. Similarly, all material linked to from a CSS file (images, for instance) must be available for the CSS to work properly.
- Lack of Column Declaration - While possible in CSS, layouts with multiple columns can be complex to implement. With CSS, the process is often done using floating elements which are often rendered differently by different browsers, different computer screen sizes, and different screen ratios set on different monitors.
- 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.
- Security - CSS is an open text-based system with no built-in security. Anyone with read/write access to a website can changing the CSS files or alter the links in the webpages.