The most used web style sheet is CSS. A web style sheet is a set of styles for designing documents that thereon the Web. An external style sheet is stored in different file of style sheet separated from the documents who links it. Style Sheet Languages (or style languages) expresses the presentation, the looks and formatting of structured documents. There are only two web style sheets in this (2013) generation.
- CSS, which stands for Cascading Style Sheets, is a style sheet language that can style web pages written in Hyper Text Markup Language or any kind of XML-based language, in other words, an application of Extensible Markup Language. This is the only style language that can be use to style HTML documents. And the most used style sheet language in this time. (2013) The extension of a CSS file is .css which used in external styling, because there are three ways to style the compatible documents for it, the inline style, the internal style sheet and the external style sheet, which are going to explain later.
- Extensible Stylesheet Language (XSL) was originally developed to be an XML-based style sheet language. It consists of three parts, it is a set of three different computer languages, a style sheet language, query language and markup language:
- XSL Transformations (XSLT) is the most important part of XSL. It's a “style sheet language” used to transform XML into another XML document. Normally, XSLT does that by transforming each XML element into an XHTML element. The .xsl extension is for the path name of an XSLT style sheet file, which used to insert into the
<xsl:stylesheet>or<xsl:transform>root element. - XPath, also known as XML Path, is a query language used by XSLT (and some other artificial languages) to access or refer to the parts of an XML document. It's a “query language” for addressing parts of an XML, designed to be used by both XSLT for selecting nodes from an XML document, and XPointer (a.k.a. XML Pointer,) to link to the specific parts of an XML document.
- XSL Formatting Objects, also known as XSL-FO, was now formally named as Extensible Stylesheet Language (XSL) as its generalized style sheet language under it. XSL(-FO) is a “markup language” for specifying formatting semantics which is often used to generate Portable Document Format (PDF) files. An XSL-formatted file can be with .xml extension but the specific extension which was exist to used on their files is an .fo or an .fob file extension.
- XSL Transformations (XSLT) is the most important part of XSL. It's a “style sheet language” used to transform XML into another XML document. Normally, XSLT does that by transforming each XML element into an XHTML element. The .xsl extension is for the path name of an XSLT style sheet file, which used to insert into the
Web developers knew that the HTML is the most used web development language, and because Cascading Style Sheets is the only style sheet that can design HTML documents, it became the most used web style sheet. A little stylistic HTML script example below that styles with internal style sheet, to know how Cascading Style Sheets works:
HTML Source:
<style type="text/css">
#srssl-sample {
width: 230px;
margin: 0 auto;
background: #808080;
padding: 4px 0;
}
#srssl-header {
background: #FFFF00;
width: 222px;
margin: 0 auto;
text-align: center;
font-size: large;
font-weight: bold;
}
#srssl-container {
width: 222px;
margin: 4px auto;
background: #FFFFFF;
padding: 2px;
}
#srssl-sidebar {
float: left;
width: 64px;
background: #FFC0CB;
font-size: small;
margin-bottom: 20px;
}
#srssl-content {
float: left;
width: 152px;
background: #87CEEB;
margin-bottom: 20px;
padding: 0 3px;
}
.srssl-clear {
clear: left;
background: #FF0000;
height: 3px;
}
#srssl-footer {
width: 218px;
background: blue;
margin: 0 auto;
font-size: small;
color: white;
font-style: italic;
text-align: right;
padding: 0 2px;
}
</style>
<div id="srssl-sample">
<div id="srssl-header">This is a Header</div>
<div id="srssl-container">
<div id="srssl-sidebar">This left column is a sidebar.</div>
<div id="srssl-content">This main column is for the contents.</div>
<div class="srssl-clear"></div>
</div>
<div id="srssl-footer">This is a Footer</div>
</div>
