codescracker


css

CSS Inclusion



« Previous Tutorial Next Tutorial »


Insert CSS in HTML Document

You can use a CSS style sheet with an HTML document by learning how to link the CSS code with the HTML document.

A CSS style sheet can be linked to an HTML document in a variety of ways, where each way has its own advantages and disadvantages.

There are the following three ways to apply CSS style to your HTML document.

The Internal Style Sheet - Embedded CSS

The internal style sheet is written the HEAD element of the HTML document. This style is applied only to the documents in which it is defined and not referenced by any other Web document.

The syntax of internal style sheet is written as follows.

<STYLE type="text/css">
	selector { property: value; }
</STYLE>

In the above syntax contains the starting and the ending tags of the STYLE element. The STYLE element contains a type attribute with value text/css. The opening and the closing tags of the STYLE element embeds the style declaration. The declaration consists of a selector followed by a curly braces. The curly braces hold a property followed by a colon, which is further followed by a value, and finally that value is followed by a semicolon.

The following code fragment shows a sample CSS document written using the internal style sheet.

<head>
<style type="text/css">
p { font-family: sans-serif; color:#c00; }
h1 { font-family: sans-serif; color:#f00; }
</style>
</head>

In the above code fragment, the style element is placed inside the HEAD element. The CSS statements are written within the style element. The two selectors are p and h1. The properties of the p element are font-family and color. The value of font-family is sans-serif and the value of color is #c00. Similarly, the properties of h1 element are font-family and color. The value of font-family is sans-serif and the value of color is #f00.

Example

Here is an example shows how to use embedded CSS for applying styles to HTML elements.

<!DOCTYPE html>
<html>
<head>
	<title>Embedded CSS Example</title>
	<style>
		p
		{
			text-align: center;
			color: red;
		}
	</style>
</head>
<body>

<p>Hello Browser!</p>
<p>This is embedded CSS example.</p>

</body>
</html>

Here is the sample output produced by the above embedded CSS example code:

Embedded CSS Example

Advantages and Disadvantages of Embedded CSS

The following are the advantages of using the internal style sheets.

Internal style sheets have the following disadvantages.

The External Style Sheet - External CSS

The syntax to create an external style sheet is same as that of creating an internal style sheet. In case of internal style sheet, the CSS file is placed inside the HTML document; whereas, in case of external style sheet, the CSS file is written outside the HTML document and the reference of the CSS file is placed in the HTML document.

In an external style sheet, the style sheet rules are saved into a text file with the .css extension. Once you have a style sheet document, you can link it with your Web pages in the following two ways.

(i) Linking - Refers to the HTML LINK element, which is used to link a style sheet. This element has the following three attributes.

The rel attribute specifies what you are linking (style sheet in this case). The type specifies the MIME type for the browser, and the href attribute specifies the path of the .css file, as shown in the following code fragment.

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

In the above code fragment, the value of the rel attribute is set to stylesheet, value of the type attribute is set to text/css, and the value of the href attribute is set to test.css.

(ii) Importing - Helps you in accessing the style rules from other CSS style sheets. The @import keyword is used, followed by the Uniform Resource Identifier (URI) of the style sheet to which you want to import the style rules.

The following code fragment shows an example of using the @import rule.

<style type="text/css">
	@import url("mystylesheet.css")
	h1 { color: blue }
</style>

In the above code fragment, we have used the @import keyword followed by the URL of the style sheet, named mystylesheet.css.

In addition to the @import rule, the @media rule of CSS helps you in applying the styles to the media device depending on the type of the device a page is displaying. Some of the media devices supported by the CSS are computer screens, printers, televisions, handhelds, speech synthesizers, and projectors.

Please note that all the media types are not supported by all the Web browsers, for example, the Internet Explorer 4.5 and Netscape Navigator 4.7 browsers or their later versions, support the computer screen, printer, and projector media types.

The following code fragment shows an example of using @media rule.

<style type="text/css">
	@media screen
	{
		body { font-size: 13px; }
	}
</style>

In the preceding code fragment, we have defined the @media rule for the screen media type.

Example

An external style sheet is a separate text file with .css extension. You define all the Style rules within this text file and then you can include this file in any HTML document using <link> element.

Open your text editor and type the following code into it.

p
{
	text-align:center;
	color:red;
}

Save the file as filename.css and close it.

Now this time type the below html code into your text editor like notepad for windows user.

<!DOCTYPE html>
<html>
<head>
	<title>External CSS Example</title>
	<link rel="stylesheet" href="full path of css file">
</head>
<body>

<p>Hello Browser</p>
<p>This is external CSS example.</p>

</body>
</html>

Open your file named filename.css into your web browser like google chrome, and copy the url (full path) of this file.

In the place of full path of css file, place the full path (copied from browser) of your css file (filename.css).

Now open the above html file, it will display the following output in the browser:

External CSS example

Advantages and Disadvantages of External CSS

The following are the advantages of using the external style sheets.

External style sheets have the following disadvantages.

The Inline Style - Inline CSS

The inline style properties are written in a single line separated by semicolons. These properties are placed inside the style attribute of the HTML element, on which you want to apply the style.

<p style="background:#ccc; color:#fff; border:1px solid black;">

In the above code fragment, the p element is styled.

Example

Let's look at the following example that shows how to use Inline CSS to style HTML elements:

<!DOCTYPE html>
<html>
<head>
	<title>Inline CSS Example</title>
</head>
<body>

<p style="text-align:center;color:red">Hello Browser</p>
<p>This is inline CSS example.</p>

</body>
</html>

Below is the sample output produced by the above inline CSS example code:

Inline CSS Example

Advantages and Disadvantages of Inline CSS

The following are the advantages of applying inline style in an HTML document.

Inline styles have the following disadvantages.


« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test