HTML STYLES


Rules that describe how a document will be presented in a browser are called styles in HTML. We can either embed or separately attach the style information in an HTML document. Different ways to do that are written below.


Inline Style Sheet


This method is used to apply a unique style to a single HTML element. The style attribute is used inside the specific tag. It includes a series of CSS property and value pairs, each of which is separated by a semicolon ( ; ).


Example:


<!DOCTYPE html>
<html>
<head>
</head>
<body>

<p style="color:red;">Example of inline style</p>

</body>
</html>
Live Demo!


Output:

Example of inline style



Internal Style Sheets


The effect of the internal style sheet is only in the document their embedded in. In this method, the style element is used inside the element of the document using the <style> tag.


Example:


<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
  background-color: powderblue;
}
p {
  color: red;
  font-family: arial;
}
</style>
</head>
<body>

<p>explaining embedded style sheet.</p>

</body>
</html>
Live Demo!


Output:

explaining embedded style sheet.



In the above example, the font-family property defines the font to be used for an HTML element.
Color property defines the text color.
The use of style property is to set the style of an HTML element and,
background-color property defines the background color for an HTML element.


External Style Sheet


The external Style Sheets method is used when the CSS has to be applied to various web pages. In an external style sheet, all the style rules are held in a separate document that can be linked to the HTML file on your site. The element used to point to an external style sheet is <link>.

External style sheets can be attached in two ways.


1. Linking External Style Sheets

An external style sheet is linked to an HTML document using the <link> tag.


Example:


<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="externalstyle.css">
</head>
<body>

<h3>Example of Linking External Style Sheet</h3>
<p>First paragraph.</p>

</body>
</html>
Live Demo!


In the above example, <link> tag refers to the external style sheet externalstyle.css to apply the styles previously defined in it, onto the current html document.


2. Importing External Style Sheets

@import is used to load the external style sheet into an HTML document. Work of “@import” statement is to instruct the browser to load the CSS file. This is a modern way of using external style sheets in html.


Example:


<!DOCTYPE html>
<html>
<head>
<style type = "text/css">
@import url("importstyle.css");
p{color:powderblue;}
</style>
</head>
<body>

<h3>Example of external style sheet using import</h3>
<p>First paragraph</p>

</body>
</html>
Live Demo!


In the above example, @import property used in <head> tag, simply imports the importstyle.css style sheet into the current html document.