HTML Stylesheet

What is HTML Stylesheet?
In the latest versions of HTML (HTML 4.0), defining and displaying the content are treated as two different processess. Since many of the formatting tags and attributes are deprecated (not supported) in the recent versions of html, it is decided that html can handle only the defining part of the content. That is whether it is a heading or paragraph or table or something else.
The displaying part is taken care by CSS (Cascading style sheets) which handles formatting and appearance of the web site. The sheet which contains the styles to control the appearance is generally known as stylesheet.

Integration of Styles with HTML
Though the displaying part is not written with HTML, it is necessary to integrate with it for greater usability. There are 3 great ways to achieve it:

1. External Style Sheet – It is a separate file that contains all the styles and saved with “.css” file extension. It is then linked with html file using the <link> tag in the head section.
   Eg: <link href=”sample.css” type=”text/css” rel=”stylesheet>.
   Here an exernal css file name “sample” is linked using the attribute “href”. The main advantage of external style sheet is it can be linked to as many as html files. And the change we implement in single sheet will affect all the linked html files. So maintenance is simplified by using external style sheet.
2. Internal Style Sheet – Instead of maintaing a separate style sheet, the css can be written within the html document in the head section.
   Eg: <style type=”text/css”>CSS coding goes here….</style>
   The internal style sheet can only be accessed by the particular html document. It cannot be referenced to any other document.
3. Inline Style – Inline styles are nothing but adding css properties to an html tag using an html attribute “style”
   Eg: <h1 style=”color:#ff0000”>Heading1</h1>
   In this sample, “color:#ff0000” is a css property which sets the color of h1 to red. To add more than one property semicolon; can be used between two properties.
   Eg: <h1 style=”color:#ff0000;margin:5px”>Heading1</h1>
   Here margin is an another css property which sets margin for h1 tag and the margin value is 5px (pixel).

Pixel (px) is a unit of measurement with regards to CSS. As we use Km to measure distance, Kg to measure weight, we use px to measure in web designing. We also use pt (point), em, % (percentage) other than px. Why are they used and what’s the difference between them? It will be discusses in out next lesson units of measurements.

About these ads

Source : webdeveloperguide[dot]wordpress[dot]com