How to Include CSS into HTML file

Posted on Updated on

CSS occupies very important position to design your website as beauty as possible. There are many way to include CSS-stylesheet into your HTML page. This article will describe you about it.

CSS can be abbreviated as Cascaded Stylesheet. CSS plays important position when developing a website. There are three way to include into HTML page.

1. External style sheet
2. Inner style sheet
3. Inline style sheet

We will discuss about each type and I’ll provide code snippets for all the three types below.

External style sheet

In the external style sheet type create a separate CSS file. The extension for CSS file is .css and write the CSS code into the file. You have to include your CSS file into the HTML file using tag like the below code snippet. You have to copy paste the following snippet into the tag like below.

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Inner style sheet

In the inner style sheet type, no need to create a separate page. You have to include class and id attribute into the

ortag and write the CSS code snippet in the tag of HTML page. Below is the sample code snippet of placing a CSS code in the HTML page.

HTML code snippet

<html>
	<head>
		<title>ProgrammingSnippet</title>
		<style>
			.text
			{
				font-family:Algeria;
				font-size:12px;
				margin:0px auto;
				align:center;
				padding:
			}
                        #textid
			{
				font-family:Algeria;
				font-size:12px;
				margin:0px auto;
				align:center;
				padding:
			}
		</style>
	</head>
	<body>
              <div class="text">
                  sample code for class attribute
              </div>

              <div  id="textid">
                  sample code for ID attribute
              </div>
        </body>

NOTE: use .(dot) for class attribute and # for id attribute.

Inline style sheet

In inline style sheet type, you will have to write the CSS code in the

oror some other tag itself.like the below code snippet.

     <html>
        <head>
           <title>Programming Snippet</title>
        </head>
        <body>
              <div style="font-family:Algeria;font-size:12px;">
                  sample code for class attribute
              </div>
        </body>
     </html>



Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s