Types of CSS cascading style sheets-inline-embedded and linked sheets

Types of style sheets

Style sheets control the properties of HTML elements and provide an option to make HTML elements beautiful. There are three different ways to use style sheets in your HTML document. These ways of using style sheet are-Inline style sheets, Embedded or Internal style sheets and Linked or External style sheets.

Inline style sheets

This method allows you to take any HTML tag and add a style to it. Using an inline method gives you maximum control over any aspect of web page. For example, you want to control look and feel of a paragraph. You can simply add a style to it and the browser would display that paragraph using the style values you added to the code.

You can add style to paragraphs, headers, horizontal rules, anchors and table cells. The following example uses the paragraph tag along with the style attribute to achieve inline style.

<!DOCTYPE html> 
<html> 
<head> 
<title>Inline CSS</title> 
</head> 
<body> 
<p style = "color:#009900; font-size:40px;font-style:italic; text-align:left;"> 
Welcome to programming tutorial
</p> 
</body> 
</html> 

It results as:

Inline style sheets, www.programmingtutorial.in

Two elements can help you apply inline style to the sections of a page. These two elements are division or DIV tag and the SPAN tag. These tags specify a defined range of text, so everything between them adopts the style you want to use. Let us take examples of DIV and SPAN tag with inline style.

<!DOCTYPE html> 
<html> 
<head> 
<title>Inline CSS</title> 
</head> 
<body> 
<div style="font-family:arial; font-size:15pt;color:blue">
This is first DIV statement
</div>
<div style="font-family:corsiva; font-size:25pt;color:green">
This is second DIV statement
</div>
<span style="font-family:verdana; color:red;">This text uses font family verdana with color red</span> and rest text is a plain text
</body> 
</html>       

It results as:

inline style, www.programmingtutorial.in

Embedded or Internal style sheets

Embedding allows you to control a full page of HTML. In embedded style, the style tag is placed in head section of an HTML page. You can insert detailed style attributes to be applied to the entire page. This can be used when a single HTML document must be styled uniquely. The CSS rule set should be within the HTML file in the head section i.e the CSS is embedded within the HTML file.Let us understand it by an example.

<!DOCTYPE html> 
<html> 
<head> 
<title>Embedded or internal CSS</title> 
<style>
h1{
  background:pink;
  color:red;
  font-family:corsiva;
  width:35%;
  }
p{
  color:green;
  font-family:arial;
  font-size:15pt;
  font-style:italic;
  }
</style>
</head> 
<body> 
<h1>Welcome to programming tutorial</h1>
<p>A platform to learn C, C++, HTML, CSS, javaScript.</p>
<p>It also provides the topics related to Microsoft office</p>
</body> 
</html>       

It results as follows:

Embedded or Internal style, www.programmingtutorial.in

Linked or External style sheet

Linked style sheets also known as external style sheets extends the form of embedded style sheet. In linked or external style sheet, a separate stlyle sheet is prepared and finally linked to a main HTML document. The separate CSS sheet is saved using an extension (.css). you should be sure that separate CSS file is placed in the directory where main HTML file is placed. If it is placed somewhere else then proper path should be given while linking file to an HTML document. Let us take the example of previous embedded code but in this case we will save CSS file as a separate file.

External file saved as (external.css)

<style>
h1{
  background:pink;
  color:red;
  font-family:corsiva;
  width:35%;
  }
p{
  color:green;
  font-family:arial;
  font-size:15pt;
  font-style:italic;
  }
</style>

Main HTML file saved as (type of CSS.html)

<!DOCTYPE html> 
<html> 
<head> 
<title>Linked or external CSS</title> 
<link rel=stylesheet href="external.css" type="text/css">
</head> 
<body> 
<h1>Welcome to programming tutorial</h1>
<p>A platform to learn C, C++, HTML, CSS, javaScript.</p>
<p>It also provides the topics related to Microsoft office</p>
</body> 
</html>    

It results as:

Linked or External style sheet, www.programmingtutorial.in