CSS
As we may already know CSS stands for "cascading style sheets". Furthermore CSS administers XML documents to be viewed in a web browser in other words a single CSS file can contain positioning, layout , font, colors and style information for an entire web site. The file can be referenced by each html file on the site.CSS is a means of separating the content of an html document from the style and layout of that document. Also Defining a DTD and parsing it in the web browser are fundamental piece with CSS as it is the major imperative component to exhibit the structure of the document and feature part definition in the web browser. in addition,
The main benefit of CSS has already been mentioned - it allows a consistent style to be applied across a number of web pages. If formatting changes are required then changing the style sheet will apply those changes throughout, where the alternative would be to edit all the pages manually. Using web-level style sheets means that all responsibility for formatting can be taken by a single office or person even for a multi-national corporation with dozens of websites.
And there are some weakness using CSS
And there are some weakness using CSS
Cons of CSS
- Speed issues -- downloading an HTML file and a CSS file will always take longer than downloading just the HTML file, though this will be offset if the user goes on to download many pages using the same CSS.
- Different syntax to HTML -- CSS was developed independently of HTML and uses a different syntax, so a web developer has to learn two sets of formatting syntax instead of one. CSS syntax is also rather clumsy and user-unfriendly.
- Requires access to external files -- If you save an HTML file on disk without the associated style sheet then it wil lose its formatting when you look at it offline. Similarly, any pages which depend on a web-level sheet will lose their formatting if access to the web-level sheet site is lost. Similarly, all material linked to from a CSS file (images, for instance) must be available for the CSS to work properly.
- Can easily be overridden -- because CSS is an open text-based system there is no security built in, and anyone with read/write access to a website can disrupt the formatting by changing the CSS files or altering the links in the webpages.
- Complicates templates -- CSS files are particularly troublesome within authoring packages which use templates, like Dreamweaver, since a CSS link that works within the template may not necessarily work when the template is used to create a web page.
- CSS also gets complicated in content management systems (CMSs) like Joomla! and Drupal, because CSS links have to be maintained across a range of directories as files are created and moved around. Most CMSs use CSS files as part of their formatting system, but these are usually fairly complex, and tinkering with them can have unforseen consequences.
As mentioned above creating an XML document, writing the DTD, and parsing it with a browser are all fine, but how will the document display when you view it? XML is not a language of display. In fact, documents written with XML will have no formatting at all.
So, How Do I View My XML?
The key to viewing XML in a browser is Cascading Style Sheets. Style sheets allow you to define every aspect of your XML document, from the size and color of your text to the background and position of your non-text objects.
Say you have an XML document:
<?xml version="1.0" standalone="yes">
<!DOCTYPE family [
<!ELEMENT parent (#PCDATA)>
<!ELEMENT child (#PCDATA)>
]>
<family>
<parent>Judy</parent>
<parent>Layard</parent>
<child>Jennifer</child>
<child>Brendan</child>
</family>
If you were to view that document in an XML ready browser, such as Internet Explorer, it would display something like this:
Judy Layard Jennifer Brendan
But what if you wanted to differentiate between the parent and child elements? Or even make a visual distinction between all the elements in the document. You can't do that with XML, and it is not a language that is meant to be used for display.
But luckily, it is easy to use Cascading Style Sheets, or CSS, in XML documents to define how you want those documents and applications to display when viewed in a browser. For the above document, you can define the style of each of the tags in the same way you would an HTML document.
For example, in HTML you might want to define all text within paragraph tags (<p></p>) with the font face verdana, geneva, or helvetica and the background color green. To define that in a style sheet so that all paragraphs are like that, you would write:
p {
font-family : verdana, geneva, helvetica;
background-color : #00ff00;
}
The same rules work for XML documents. Each tag in XML can be defined in the XML document:
family {
color : #000000;
}
parent {
font-family : Arial Black;
color : #ff0000;
border : solid 5px;
width : 300px;
}
child {
font-family : verdana, helvetica;
color : #cc0000;
border : solid 5px;
border-color : #cc0000;
}
Once you have your XML document and your stylesheet written, you need to put them together. Similar to the link command in HTML, you put a line at the top of your XML document (below the XML declaration), telling the XML parser where to find the stylesheet. For example:
<?xml-stylesheet type="text/css" href="stylesheet.css"?>
As I said above, this line should be found below the <?xml?> declaration, but before any of the elements in the XML document.
Putting it all together, your XML document would read:
<?xml version="1.0" standalone="yes">
<?xml-stylesheet type="text/css" href="stylesheet.css"?>
<!DOCTYPE family [
<!ELEMENT parent (#PCDATA)>
<!ELEMENT child (#PCDATA)>
]>
<family>
<parent>Judy</parent>
<parent>Layard</parent>
<child>Jennifer</child>
<child>Brendan</child>
</family>
References:
(Written by WendyAng) Advantages and Disadvantages Using CSS, [Online] Viewed at http://www.zimbio.com/SEO+Tools+and+Company/articles/100/Advantages+Disadvantages+Using+CSS[Accessed 12-12-2010].
Mike Hall (1995-2010) Using CSS (Cascading Style Sheet), [Online] Viewed athttp://www.brainjar.com/css/using/ [Accessed 12-12-2010].
No comments:
Post a Comment