Register For Course

HawksCode Softwares Pvt. Ltd Course Number: ES 227
HawksCode Softwares Pvt. Ltd
COURSE DETAIL

Cascading Style Sheet (CSS) 

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:

The STYLE attribute on an individual element tag

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.

An imported style sheet, using the CSS @import notation to automatically import and merge an external style sheet with the current style sheet

Style attributes specified by the viewer to the browser

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.

 

 

The benefits of CSS

Separation of content and presentation

CSS rules can be provided in a file that is separate to the (content) HTML. If all pages link to this centralised CSS file, then the look of a website can more easily be updated. For example, the colour or size of all level-one headings can be changed by updating a single CSS rule.

Smaller webpage file sizes

As the code required to style content can be removed from individual webpages, the size of each webpage file is reduced. Depending on the benchmarks, file sizes may be reduced by up to 60%.

Improved webpage download speed

Once a stylesheet has been downloaded, it is typically stored on the user’s computer (cached). For each subsequent webpage viewed, only the HTML needs to be downloaded.

Improved rendering speed

Once a webpage has been downloaded, a browser processes the underlying code to determine how content should be displayed. This process is referred to as ‘rendering’. The time a webpage takes to render is affected by the complexity of the code the browser receives. Using CSS to control the layout of a page typically simplifies the the code structure making it ‘easier’ (faster) for the browser to render.

Streamlined maintenance

As less code is required for each webpage, both the likelihood of coding errors and time required to add content to a website are reduced.

Changing presentation for different devices

The CSS specification enables different rules to be used depending on the device used to access the web. For example, a different set of rules can be used to reformat a webpage for printing or viewing on a mobile phone.

Accessibility

Additional features can be added to webpages that provide ‘hooks’ for assistive technologies such as screen readers. (A screen reader is a program that reads aloud the interface to computer programs and computer-based content, including webpages). CSS-based techniques can be used to provide such hooks without impacting on the experience of mainstream users. For example additional headings can be added to content that will only be ‘seen’ by a screen reader. These headings can be used to provide additional contextual information that would otherwise be communicated by the visual design. As an example, the list of glossary terms at the foot of each glossary entry is preceded by the invisible heading: ‘Glossary Trivia’.

Table-less layout

Prior to the introduction of CSS, multi-column layouts could only be created using HTML tables. Unfortunately, at a code-level, a table used for layout purposes cannot be differentiated from a table used to mark-up tabular data (such as statistics). This has the greatest impact on technologies that ‘read’ webpage content at a code, rather than visual, level. If the meaning of content is affected by how it has been marked-up, then using a table for layout purposes has the potential to change the meaning of the content. Utilising CSS-positioning, layout can be achieved without compromising content structure or meaning.

Customisation

Advanced web browsing software enables the user to easily override the author-specified styles. Although admittedly requiring the user to know more about the mechanics of the web, content display can be completely customised.

Search engine optimisation

Search engines may assign greater relevance to content found first in the code, and/or limit the amount of content indexed on each page to a certain character-count. If content blocks are positioned using CSS, the order of webpage code does not need to match the display order. For example, the code for global navigation bars positioned at the top of the screen may come after the content in the source.