Hello, world!

Style Sheet HTML

HTML Style sheets defines the three methods to use CSS to HTML: In-line, internal, and external. CSS provides some properties to style your HTML page



HTML Style Sheet

Cascading Style Sheets (CSS) define the presentation of your HTML contents on screens or in print.
Applying CSS allows you to identify various style properties from fonts and colours to the entire layout of a HTML page.
Cascading Style Sheets (CSS) are much more efficient than defining everything in HTML on each page.
Every property contains a name and a value, using a colon (:) to parted it.
Every property declaration applies semi-colon (;) to separate them.

Three ways to use CSS in your HTML document:
External Style Sheet Specify style sheet rules in a separate CSS code, then that external style sheet may be linked to an HTML document by means of HTML’s <link> element.
Internal Style Sheet Specify style sheet rules in the head section of the particular HTML document by means of HTML <style> element.
Inline Style Sheet Uses <style> attribute to style a specific element which is directly connected to the HTML elements.


Inline Style Sheet

In Inline styles you can use style sheet rules directly to any particular HTML element through the style attribute.
This can be only perform once you are keen to modify any HTML element only.
The rules stated in internal style sheet will supersede the rules stated in an external CSS file and in <style> element.

HTML code example inline style sheet:

<p style="color:blue;">Text is blue</p>
<p style="font-size:40px;">Text is thick</p>
<p style="color:brown;">Text is brown</p>
<p style="color:brown;font-size:40px;">Text is thick and brown</p>

HTML output inline style sheet:

Text is blue

Text is thick

Text is brown

Text is thick and brown



External Style Sheet

It is suggested to separate style sheets from HTML documents, if you want to use your style sheet to different pages.
CSS file applies .css extension and through the use of <link> tag it will be added in HTML files.

First specify a style sheet file style.css:
 .blue{
   color: blue;
}
.thick{
   font-size:40px;
}
.yellow{
   color:yellow;
}

Then you can now defined three CSS rules which are related to three different classes defined for the HTML element.

HTML code example external style sheet:

<!DOCTYPE html>
<html>
<head>
<title>Example of  HTML External CSS</title>
<link rel="stylesheet" type="text/css" href="https://drive.google.com/uc?id=0B3wdKlA6ta9rVncwYkdyVmpNMGs">
</head>
<body>
<p class="blue">Text  is blue</p>
<p class="thick">Text  is thick</p>
<p class="brown">Text  is yellow</p>
<p class="thick yellow">Text  is thick and yellow</p>
</body>
</html>

HTML output external style sheet:

Example of HTML External CSS

Text is blue

Text is thick

Text is yellow

Text is thick and yellow



Internal Style Sheet

You can use <style> tag to put Internal style sheets in the <head> of the HTML content.
The rules stated in internal style sheet will supersede the rules stated in an external CSS file.

HTML code example internal style sheet:

<!DOCTYPE html>
<html>
<head>
<title>Example of HTML Internal CSS</title>
<style type="text/css">
.red{
   color: blue;
}
.thick{
   font-size:40px;
}
.brown{
   color:brown;
}
</style>
</head>
<body>
<p class="red">Text is blue</p>
<p class="thick">Text is thick</p>
<p class="brown">Text is brown</p>
<p class="thick brown">Text is thick and brown</p>
</body>
</html>

HTML output internal style sheet:

Example of HTML Internal CSS

Text is blue

Text is thick

Text is brown

Text is thick and brown