Search Anything Related to Library and Information Science

Cascading Style Sheets (CSS)


1. Introduction: Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. The CSS specifications are maintained by the World Wide Web Consortium (W3C). It is widely used to change the style of web pages and user interfaces written in HyperText Markup Language (HTML), eXtensible Hypertext Markup Language (XHTML), eXtensible Markup Language (XML), Scalable Vector Graphics (SVG) and XML User Interface Language (XUL). CSS was first proposed by HÃ¥kon Wium Lie on October 10, 1994. Bert Bos’ became co-author of CSS1 and is regarded as co-creator of CSS.

2. Usefulness of CSS: Uses of CSS made documents more simple, smaller, and error-free and easy to maintain. Some other usefulness of CSS are-
a) Separate Document Content from Presentation: CSS is designed primarily to enable the separation of document content from document presentation, including elements such as the layout, colors, and fonts.
b) Reduce Complexity: Use of CSS can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple HTML pages to share formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in the structural content.
c) Save Time: CSS helps to present the same markup page in different styles for different rendering methods, such as on-screen, in print, by voice (for a speech-based browser or screen reader) and on Braille-based, etc. It can also be used to display the web page differently depending on the screen size or device on which it is being viewed. In CSS, hundreds of documents can be changed quickly and easily, by editing a few lines in one file, rather than by a time consuming process of crawling over every document line by line and its changing markup.

3. Problems in Using CSS: CSS has the following problems in implementation-
a) Complex in Comparison to HTML: CSS is just too complex in comparison to HTML. What you can achieve with <table> tag in HTML within minute, you have to work hard to achieve same thing with CSS.
a) Browser Incompatibility: All the browsers do not comply with or adopt the CSS. As a result, the webpages that are designed with CSS, look differently or sometimes horrible in some browser.

4. Basic Syntax of CSS: CSS has a simple syntax and uses a number of English keywords to specify the names of various style properties. A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors, and a declaration block.
a) Selector: In CSS, selectors are used to declare which part of the markup a style applies to by matching tags and attributes in the markup itself.
b) Classes and IDs: Classes and IDs are case-sensitive, start with letters, and can include alphanumeric characters and underscores. This allows one to set a particular style for many HTML elements with the same class.
c) Pseudo-classes: Pseudo-classes are used in CSS selectors to permit formatting based on information that is not contained in the document tree. One example of a widely used pseudo-class is :hover, which identifies content only when the user points to the visible element, usually by holding the mouse cursor over it.
d) Declaration: A declaration block consists of a list of declarations in braces. Each declaration itself consists of a property, a colon (:), and a value. If there are multiple declarations in a block, a semi-colon (;) must be inserted to separate each declaration.
Whitespace between properties and selectors is ignored. Example: body{overflow:hidden;background:#000000;} is equivalent to body { overflow: hidden; background: #000000; }.

5. How to Use CSS: There are three ways of inserting a style sheet- inline, internal and global. If multiple style sheet are applied in an HTML document then the inline style (inside an HTML element) has the highest priority, which means that it will override a style defined inside the <head> tag, or in an external style sheet, or in a browser (a default value).
a) Inline Style: An inline style loses many of the advantages of a style sheet by mixing content with presentation. However, one can use the inline style attribute to the relevant tag. The style attribute can contain any CSS property.
            Example
            <h1 style="color:orange;margin-left:20px;">Your Text Goes Here</h1>
            Comments are used to explain the code, and may help in re-editing the source code at a later date. Comments are ignored by browsers. A CSS comment single or multiline starts with /* and ends with */.
Example
/* This is a comment which will be ignored by web browser */
b) Internal Style Sheet: An internal style sheet should be used when a single document has a unique style. One should define internal styles in the <head> section of an HTML page, inside the <style> tag.
Example
<style>
body {
    background-color: #d0e4fe;
}

h1 {
    color: orange;
    text-align: center;
  margin-left: 20px;
}

p {
    font-family: "Times New Roman";
    font-size: 20px;
}
</style>
c) External Style Sheet: An external style sheet is ideal when the style is applied to many pages. With an external style sheet, one can change the look of an entire Website by changing just one file. An external style sheet composed of two parts. In the 1st part, one needs to create a .css file by using a text editor like notepad. The file should not contain any html and the <style> tag, however must be saved with a .css extension, in the 2nd part in the HTML file where the style need to be used as it is declared in the .css file, a reference need to be made in that file in the <head> section.


Example: One can create a style sheet file by using Notepad and named it as "globalformat.css", with following information.

body {
    background-color: #d0e4fe;
}

h1 {
    color: orange;
    text-align: center;
  margin-left: 20px;
}

p {
    font-family: "Times New Roman";
    font-size: 20px;
}

Now create any HTML webpage and link to the style sheet with the <link> tag. The <link> tag goes inside the head section to use the declaration made in the CSS file. For example:

<head> <link rel="stylesheet" type="text/css" href="globalformat.css"> </head>

6. Conclusion: All browsers cannot correctly parse CSS code. The adoption of CSS was still held back by designers’ struggles with browsers’ incorrect CSS implementation and patchy CSS support. Even today, these problems continue to make the business of CSS design more complex and costly than it was intended to be, and cross-browser testing remains a necessity. Other reasons for the continuing non-adoption of CSS are: it’s perceived complexity, authors’ lack of familiarity with CSS syntax and required techniques, poor support from authoring tools, the risks posed by inconsistency between browsers and the increased costs of testing.



How to Cite this Article?
APA Citation, 7th Ed.:  Barman, B. (2020). A comprehensive book on Library and Information Science. New Publications.
Chicago 16th Ed.:  Barman, Badan. A Comprehensive Book on Library and Information Science. Guwahati: New Publications, 2020.
MLA Citation 8th Ed:  Barman, Badan. A Comprehensive Book on Library and Information Science. New Publications, 2020.

Badan BarmanBadan Barman at present working as an Assistant Professor in the Department of Library and Information Science, Gauhati University, Guwahati-781014, Assam, India. He is the creator of the LIS Links (http://www.lislinks.com) - India’s most popular social networking website for Library and Information Science professionals. He also created the UGC NET Guide (http://www.netugc.com) and LIS Study (http://www.lisstudy.com) website.

No comments:

Post a Comment

Website Pageviews