Ways to insert CSS (cascading Style Sheet)

There are 3 ways to insert CSS in website.

  • Inline Style.
  • Embedded Style sheet.
  • External style sheet.

Inline style.

Inline Style is useful, when particular part of contents is to be personalize. Suppose you want that particular text is to be colored and you’re pretty sure you’re not going to put the same color for other HTML elements or other part of text within same page, then inline style.

If you want to change only small piece of content like following example, then no need to create style sheet especially for this. You can just need to provide style attribute under HTML element.

Example:

There are three Primary colors. Red, blue and Green. But, I like <span style=”color: blue;>blue</span> color.


Embedded style sheet.

Some times elements need a same effect frequently within same page, then you need Embedded style sheet. Embedded style sheet reduce effort of assigning same style again and again to multiple elements. Scope of Embedded style sheet is within a page. Elements in other pages remains unaffected.

Embedded style sheet should be written within <head> section.

Example:

<head>
<style>
h2, span
{
    color : blue;

</style>
</head>

Above style will be apply on all h2 and span elements within page.

<h2>welcome to seowebsiteblog.com</h2>
Here you will get knowledge about <span> SEO, web designing, content marketing etc.</span>


External style sheet:

External style can change behavior of specified elements throughout whole website. External style sheets enable you to change the appearance of the entire site through a single file. You just need to create css file and link in page that you want to style.

Lets learn to use External style sheet by following demonstration.
To create a CSS file, open notepad and type following code.

h1
{
color: Blue;
}

p
{
color: red;
}

p.centerorange
{
text-align: center;
background-color: orange;
color: blue;
}

Create new folder and Save file as “mycssdemo.css” in that folder.

To create HTML file, type the following code in new notepad.

<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”mycssdemo.css”>
</head>
<body>
<h1>This is Demo of external style sheet</h1>
<p> Text in this paragraph will become red</p>
<p class=”centerorange”>Text in this paragraph will align canter and text
background becomes orange. Font color will become blue</p></body>
</html>

Save this file as “externalstyledemo.html” in same folder where you saved css file.

Now run externalstyledemo.html and see magic.

You will get following output.

External stylesheet demo

Comments

comments