HTML was designed as a language to create content which is viewable on web browsers. It has ability to show content in various formats of color, size, alignment etc. HTML then evolved to have features to accept user input using UI features like textboxes,checkboxes, buttons etc. and dynamically provide output based on the input.
HTML combines content with form. In initial days of HTML, both content and formatting were part of the same HTML file.
However, this caused challenges in maintenance of the page. Skills required for content generation are separate from page design.
When both are separated, different sets of people with requisite skills can work on each independently. Stylesheets are a way to separate content and form. It enables representation of the same content to be transformed dynamically using different stylesheets. This is of common use when adapting the same content on different display units eg. desktop , mobile phones etc. in the design of responsive UIs.
Setting the format or style of an HTML element, can be done with the style attribute, which specifies the CSS style.
The style attribute can be used as follows:
<style>
tag_name{
property1_name:property1_value;
property2_name:property2_value;
}
</style>Or like this:
<tag_name style="property1_name:property1_value;property2_name:property2_value;">
This HTML Code snippet demonstrates both these ways:
<html>
<head>
<style>
body {
color: black;
background: red;
}
</style>
</head>
<body>
<h1 style="color:blue;">This is a heading</h1>
<p style="color:green;">This is a paragraph.</p>
</body>
</html>Style sheet is used by browser to format content in the HTML document as per the information in it.
CSS is the stylesheet used in HTML. It stands for cascading style sheet. Various formatting properties of HTML elements can be set with appropriate values in the CSS file to vary color of each element, background color, margin, padding, line weights, font size and family, text alignment etc.
There are three ways of applying styles. It is possible to merge all the 3 styles in a single HTML file. In such cases, if there occurs a conflict i.e. if different styles have been assigned to same element using the 3 methods, then order of preference of applying the style, from the highest preference order is – inline, internal and external css file.
1. External style sheet
Content would be in the HTML file and a stylesheet file ( filename ending with .css -cascading style sheet) would be included to vary form and design. This separates content and formatting completely.
The reference to the external style sheet
should be placed inside the <link> element within the <head> section.
<html>
<head>
<link rel="stylesheet" href="samplestyles.css">
</head>
<body>
<h1>Sample to demo h1 style</h1>
<p>Sample to demo style of paragraph.</p>
</body>
</html>An external style sheet is a text file ending in .css extension.
Following is the syntax of the “samplestyles.css”. Create and place this file in the same folder of the above html code. Now
open the HTML file using your browser and observe the output :
body {
background-color: yellow;
color:red;
}
h1 {
font-family: arial;
}
p {
font-family: verdana;
}
2. Internal style sheet
There would be a tag <style> </style> inside the element of the html file which contains the styles or format.
So the same effect as in example of external stylesheet can be acheived using following code, without needing an external file.
<html>
<head>
<style>
body {
background-color: yellow;
color:red;
}
h1 {
font-family: arial;
}
p {
font-family: verdana;
}
</style>
</head>
<body>
<h1>Sample to demo h1 style</h1>
<p>Sample to demo style of paragraph.</p>
</body>
</html>
3. Inline style
In this case, style is given inline, ie. with each element. This exploits the style attribute available with every HTML Element.
The same effect of code in the previous example can be achieved like so:
<html>
<head>
</head>
<body style="background-color: yellow;color:red;">
<h1 style="font-family: arial;">Sample to demo h1 style</h1>
<p style="font-family: verdana;">Sample to demo style of paragraph.</p>
</body>
</html>