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 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