Introduction to CSS
What is CSS?
- CSS stands for Cascading Style Sheet
A cascading style sheet (CSS) is a Web page derived from multiple sources with a defined order of precedence where the definitions of any style element conflict. The Cascading Style Sheet, level 1 (CSS1) recommendation from the World Wide Web Consortium (W3C), which is implemented in the latest versions of the Netscape and Microsoft Web browsers, specifies the possible style sheets or statements that may determine how a given element is presented in a Web page.
CSS gives more control over the appearance of a Web page to the page creator than to the browser designer or the viewer. With CSS, the sources of style definition for a given document element are in this order of precedence:
1. The STYLE attribute on an individual element tag
2. The STYLE element that defines a specific style sheet containing style declarations or a LINK element that links to a separate document containing the STYLE element. In a Web page, the STYLE element is placed between the TITLE statement and the BODY statement.
3. An imported style sheet, using the CSS @import notation to automatically import and merge an external style sheet with the current style sheet
4. Style attributes specified by the viewer to the browser
5. The default style sheet assumed by the browser
In general, the Web page creator’s style sheet takes precedence, but it’s recommended that browsers provide ways for the viewer to override the style attributes in some respects. Since it’s likely that different browsers will choose to implement CSS1 somewhat differently, the Web page creator must test the page with different browsers.
Benefits of CSS
- Reduces design/development time
- Reduces updating and maintenance time
- Increased accessibility (fewer, or no, HTML tables; no invalid junk markup)
- Adheres to W3C recommendations, improving interoperability and ensuring greater longevity (sites will not become obsolete)
- Better, more professional appearance
- Increased readability
- More easily transition in future to more powerful standards such as XML (because page content no longer contains junk markup)
- Using CSS makes it possible to centralize the styling of a whole website by making all the pages of a given website link to a single CSS file. This file that could then be updated to affect the whole look of the website without the need to edit and update each and every page and that guarantees that the look of the website will be consistent throughout. This code centralization is also beneficial for individual pages as well since the developer does not have to search within the page to alter the look of a certain element in it.
- Using CSS saves time and reduces the developer’s workload as there is less code to type. When using CSS you style an element once only and all the instances of that element will correspond to the style sheet no matter how many times they occur. It is also possible to style multiple elements at the same time as well.
- Pages that use CSS load faster because the amount of code is less as mentioned in the previous point and also because the external CSS file could be cached by the browser to avoid the need to download it again when accessed by other pages using the same style.
- CSS provides advanced styling options which are not available through HTML providing the designer with greater control over the layout. Those new options include control over the margin and padding around each element, the option to add borders and backgrounds to each element, control over capitalization of text, and control over the display of elements.
- CSS also makes it possible to control the way the website looks depending on the device that accesses the website. It is possible to use one style sheet to control the way the website looks when displayed on a normal browser, on a mobile phone, or even when printed. This removes the necessity to create multiple versions of a certain web page when serving different media types.