Stylistic Rules, Style Sheet Languages

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:
  1. 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.
  2. 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.
  3. 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.

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>



Result:

This is a Header

This left column is a sidebar.

This main column is for the contents.

This is a Footer

Explanation:

There are three ways of designing HTML documents, either with style sheet which is the intended place for styles or without it:

1. Inline style is the most simplest method to styles an HTML element, but if we think to use it on a big website project, we will realize that by using this kind of method will make it hard to design a website because you must need to insert a style= attribute with a value of CSS syntax' properties and values, to every styled element.

   HTML Element:
   <p style="text-align: right;">This text is aligned to the right.</p>
   Result:
   This text is aligned to the right.

2. Internal style sheet is the same method of CSS styling as the first internal style sheet example that you've seen in this blog post. The script of this style sheet is into the source of an HTML file, and the CSS syntax will be written between the start <style type="text/css"> tag defining CSS and end </style> tag which are the opening and the closing tags of this sheet. Every single HTML file-styling internal style sheet need to have an internal sheet.

   HTML Script:
   <style type="text/css"> p.srssl {text-align: right;} </style> <p class="srssl">This text is aligned to the right.</p>
   Result:
   This text is aligned to the right.

3. External style sheet is the best way to style HTML documents. Just create an external CSS file other than the HTML file, and put all the CSS syntax' styles in there and link all the HTML files to the CSS file, by linking that CSS with an external CSS declaration in the element's empty <link> tag of every HTML file that you've wanted to design. Imagine that we have a CSS file with /style_basename.css path, our external declaration in the HTML would be rel="stylesheet" type="text/css" href="/style_basename.css" and note that every CSS file have a .css extension.

   /style_basename.css File:
   p.srssl {text-align: right;}
   HTML Head:
   <head> <link rel="stylesheet" type="text/css" href="/style_basename.css" /> </head>
   HTML Body:
   <body> <p class="srssl">This text is aligned to the right.</p> <body>
   The Result Would Be Look Like:
   This text is aligned to the right.

Now, go back to our first HTML Source' example, did you see a number "#" sign followed by specific name without a space, in the internal style sheet? That is an ID selector, and a name-followed "." dot is a class selector. A CSS selector have a parameter where the syntax could put on. That's why the #srssl-sample would styles the tag using the id= attribute with "#srssl-sample" value. And the tags with a class= attribute with "srssl-clear" value will be styled by the parameter of a class .srssl-clear selector. Note that it's not practice to start an ID name nor a class name with a number!

There are differences between a class selector and an ID selector. Creating multiple class selectors with the same codename is valid, but not in ID selector! Because writing the same ID selector with the same name on the style sheet isn't valid. And the style rule of a single class selector can be applied to elements as many as you like, but the specific ID selector can only call into a single tag. Yet, you can still create another ID selector with a different name and use to call it on another tag. One of the similarities of ID and class selectors is the capitalization of their names, they are both case sensitive.

And also, the p.srssl on our second small example which is about internal style sheet, the third example of this blog post in chronological order, is a class selector but the style rule of it can only be applied to an element between the opening <p class="srssl"> tag and closing </p> tag. That HTML tag-specified selector can also be an ID selector. Example, we have p#srssl selector on our internal style sheet, it can be called only to the single tag that opened with <p id="srssl"> tag and closed with </p> tag.

The syntax of Cascading Style Sheets has a parameter of declarations, which surrounded by curly "{}" brackets, where style syntax' properties with values will be putted on. In the world of CSS, there are a library or reference of syntax' properties, in which many of them have a list of their own intended values. But not really all their properties have a list of values! A color name, hex and an RGB are the most used value by many CSS declaration's properties. This is the table list of the colors that we've been used on our first and the only big, script example above:

Color Name	Hex	RGB
Grey or Gray	#808080	rgb(128,128,128)
Yellow	#FFFF00	rgb(255,255,0)
White	#FFFFFF	rgb(255,255,255)
Pink	#FFC0CB	rgb(255,192,203)
SkyBlue	#87CEEB	rgb(135,206,235)
Red	#FF0000	rgb(255,0,0)
Blue	#0000FF	rgb(0,0,255)

A color name, hex and an RGB of the color which formatted exactly on the list above, can be used as a value of a background: property with the same result even you've used the color name, hex or the RGB of the specific color. It's good to know the meaning of RGB, it's simply as Red, Green and Blue. Actually, hex is like as RGB! Example in the red's hex #FF0000 code. There are "FF", "00" and "00", the first "FF" is the code for the color red which is at the maximum, the second "00" is the strength of the color green which is at the minimum, and the 3rd and the last "00" defining the blue's strength which is at the minimum. So, the result will be red with #FF0000 hex code. Remember that the minimum is "0" to "9" to "A" and the maximum is the letter "F".