INTRODUCTION CSS
CSS or Cascading Style Sheets is a language used for describing the presentation format of a web page. While HTML focuses on structure, CSS focuses on the presentation. Imagine that you are constructing a house. All the rooms, windows, kitchen, hall etc have been built to specification. But still, it is only after the coats of paint are given, does the finish and appeal to the home come. CSS is like the beautiful coat of paint that you apply to the HTML structure to make it aesthetically appealing. Advantages of CSS include:
1. Separate content
from presentation that is easier for developers to work with.
2. Use different
style sheets to target different web browsers or devices.
3. Save bandwidth by
writing several lines of presentation code in a separate style sheet and link
to it multiple pages.
4. Provide customized
web pages to users based on their preferences. Styles can be applied to a web
page just with a click of a mouse. For example if you have a web page with
content using different HTML elements, you can apply different styles to all
the HTML elements at once. You can also create multiple style sheets that can
be applied to a web page on a rotation basis.
CONTENT AFTER APPLYING DIFFERENT STYLES
CSS
Versions
Like HTML, CSS also
uses simple syntax and is easier to learn. CSS has also evolved over time and
popular versions include CSS 2.1 and CSS3.
CSS
Parts
CSS has two main
parts, Selector and Declaration that associates rules for HTML elements. (Refer figure below)
• Selector specifies the element that needs to be applied (example:
H1)
• Declaration specifies the parameters for the selector. Declaration
has two parts, Properties and Values
• Properties specify the aspects of an element such as font, color,
size, border, etc.
• Values specify the value of an aspect. (example: 14pt, blue, etc.)
Writing
you first CSS Code
You can use a simple
text editor such as notepad to create CSS code. You can integrate the CSS code
in a HTML file by one of the three following methods:
start coding
1. Using INLINE CSS Code
<!DOCTYPE html>
<html>
<head>
<title>Inline Code</title>
</head>
<body>
<p>Use View Source to view
the code as code placed in header section will not be displayed in the body
section.</p><hr>
<h1 style="font-family: Arial;
font-size:
14pt; color:
#0000FF">This is heading 1
formatted with Inline
Code</h1>
</body>
</html>
2. Referring to an external style sheet
· Embedding
CSS Code
<!DOCTYPE html>
<html>
<head>
<title>Embedded Code</title>
<style>
h1
{ font-family: Arial; font-size: 14pt;
color:
#0000FF }
</style>
</head>
<body>
<p>Use View Source to view
the code as
code placed in header section
will not be
displayed in the body
section.</p><hr>
<h1>This
is heading 1 formatted with Inline
Code</h1>
</body>
</html>
The CSS code is placed with <style></style>
tags. Usually it is considered as a best practice to place the code
within the header section of a web page i.e. the <head></head>
section. This is to enable browsers to speed up the process of applying
styles to rest of the content. If you place the CSS code within the body, the
browser will reload the page to apply the code resulting in a slower display of
the web page. In this case, you need to add the CSS Code to all the web pages
in a website.
<!DOCTYPE html>
<html>
<head>
<title>Embedded Code</title>
<style>
h1
{ font-family: Arial; font-size: 14pt;
color:
#0000FF }
</style>
</head>
<body>
<p>Use View Source to view
the code as
code placed in header section
will not be
displayed in the body
section.</p><hr>
<h1>This
is heading 1 formatted with Inline
Code</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>External
CSS</title>
<link rel="style-sheet"
type="text/css" href="CSSExercise001.css">
</head>
<body>
<p>Use View Source to view
the code as
code placed in header section
will not be
displayed in the body
section.</p><hr>
<h1>This is heading 1
formatted with
CSS Code from an external
CSS</h1>
</body>
</html>
H1
{ font-family:
Arial;
font-size:
14pt;
color:
#0000FF }
In
this case there are two documents, a .htm and a .css file. CSS code is placed within
the .CSS file is linked to a HTML page with a single line of code. This can help
in saving time by excluding complete CSS code in all web pages of a website. Yu
can also alter the code in the CSS file that will automatically get executed
when the HTML page is loaded next time. Style sheets have the file extension
.CSS. Now change the CSS code,
h1 { font-family:
Arial; font-size:
14pt;
color: red }
OVERVIEW OF XML AND XHTML
XML EXTENSIBLE MARKUP LANGUAGE
XML or Extensible Markup Language is a markup language that defines a set of rules for encoding formats. Unlike HTML, apart from being used in web pages, XML is also used for variety of purposes such as database storage or retrieval and data exchange. XML is used for separating data and document structure. For example, when you design web sites, you may display product catalog or shopping cart to visitors. The details of the products can be stored locally on the visitor’s computer in an XML file instead of storing on the server thereby reducing the number of trips in between.
Use of XML
Imagine if you want to send
hundred records of matching products to a visitor based on a specified keyword
for example books. Here, each record may contain information on book title,
description, image of the cover, author, publisher, number of pages, etc. and
displaying these records on a single webpage may make it difficult for the
visitor to scroll up and down (a single lengthy page!). On the other hand if
you want to display only ten records a time, you need to send the request
multiple times to the server thus resulting in increased traffic and bandwidth
usage. In such a case, you can store the values of all records in a single file,
write some code using HTML or JavaScript and display ten records at a time in
the visitor’s browser!
XML is also useful when you use incompatible
database management systems. For example, if a company uses proprietary
database software which is different from the client’s software, they may
encounter issues while sending the data to their clients. In such cases, XML can
be used to send the data that can be exported or imported at both ends.
Another advantage is that you can use any other application other than HTML to display the data. For example you can write your own application for addressing people with visual disabilities and read out the data stored in XML.
XHTML
Extensible Hyper Text Markup Language or XHTML is an extension of HTML. XHTML follows strict rules similar to that of XML and is used for creating well formed HTML documents. All elements need to have an opening and a closing tag; some elements that do not require a closing tag in HTML require a self closing syntax when used in XHTML. For example, to include break <br> is used HTML and <br/> is used in XHTML. You can configure your HTML editor to add necessary code automatically. However, you need to specify the DOCTYPE to be used by the editor.
 CASCADING STYLE SHEETS?){kind=link}
0 Comments