CSS Inclusion

What is CSS Inclusion?: CSS inclusion explains how to add Cascading Style Sheets to a web page, they are of 4 types

  • Inline CSS
  • Embedded CSS
  • External CSS
  • Imported CSS

Inline CSS

In Inline CSS, all the styling applied inside the HTML tag with the help of style attribute. So, the rules are applied only to that element.

Inline Syntax

<element style = "... style rules...">

Inline CSS Example

<html>
<head>
</head>
<body>
<h1 style = "color:#ff9900;"> InlineCSS
</h1>
</body>
</html>

Inline CSS Example Output

Inline CSS output

Embedded CSS

In this Embedded CSS the styles are embedded inside HTML document within style element(inside <head> tag).

Embedded CSS Example

<!DOCTYPE html>
<html>
<head>
<style type = "text/css" media = "all">
body {
background-color: grey;
}
h1 {
color: #ff0099;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>Tutorials.freshersnow</h1>
<p>Paragraph stars from here.</p>
</body>
</html>

Embedded CSS Example Output

embedded CSS output

External CSS

In this External CSS all CSS you want to use in the entire website are stored in a separate file with the extension .css You can easily add this external style sheet to any HTML document. The <link> element is used to ass an external stylesheet to HTML document.

External CSS Syntax

<head>
<linl type = "text/css" href = "....." media = "......."/>
</head>

External CSS Example

Let’s create a file named “style.css” which specifies the style requirements.

style.css

h1,h2,h3{
color: #ff9900;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}

Add “style.css” to HTML Document

<link rel="stylesheet" href="[external-style-sheet.css]" type="text/css">

Imported CSS

To import the external style sheet in any HTML document you can use @Import rule.

Imported CSS Example

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
<!--
@import "external_style_sheet.css";
@import url(http://www.samplesite.com/external_style_sheet.css);
-->
</style>
</head>
<body>
<h1>Tutorials.freshersnow</h1>
<p>Paragraph stars from here.</p>
</body>
</html>

Imported CSS Example Output

Imported CSS output