Types of CSS
Internal Style Sheets
Internal style sheets should be used when you want to control the look and layout of a single web page. The internal style sheet code (<styletype=”text/css”>) is placed in between the head tags.
The following CSS code example shows how this is done.
The internal style sheet code, <style type=”text/css”>, doesn’t do anything visually itself. It simply tells the web browser that an internal style sheet will be used.
<html>
<head>
<style type=”text/css”>
</style>
</head>
<body>
</body>
</html>
The internal style sheet in the following CSS code example tells the web browser to make the text color in the paragraph the color red.
<html>
<head>
<style type=”text/css”>
p
{
color: red
}
</style>
</head>
<body>
<p>
This CSS example is using an internal style sheet. The color of the text in this paragraph will be red.
</p>
<p>
XCnotes.com
</p>
</body>
</html>
Inline Styles
In-line style sheets should be used sparingly since they do not provide the benefits of internal and external style sheets.
The following CSS example shows how to insert an in-line style sheet.
<html>
<head>
</head>
<body>
<p style=”font-weight: bold”>
The text in this CSS example will be made bold.
</p>
</body>
</html>
If you want to specify multiple properties in an in-line style sheet, each CSS statement must be separated by a semi-colon (;).
The following CSS code shows how this is done.
<html>
<head>
</head>
<body>
<p style=”font-weight: bold; color: red”>
The text in this CSS example will be made bold and the text color will be red.
XCnotes.com
</p>
</body>
</html>
External Style Sheets
External style sheets are best used when there is one style applied to many web pages. The style sheet code is placed in a separate file with a “.css” extension, similar to an HTML file. The external style sheet is then referenced to from the HTML files to which it applies by using a link to the CSS file, instead of using the style itself.
The CSS code which is used to link to the external style sheet is
<link rel=”stylesheet” type=”text/css” href=”mystyle.css” />.
Creating a CSS File
To create a sample CSS file, simply open up notepad, or any other plain text editor and type the following CSS code. DO NOT add any HTML tags to the external style sheet.
CSS code
Next, save the file with a “.css” extension. Save the CSS file and name it “mystyle.css”
Now create an HTML file(.html file) with the following code.
Now save the HTML file as “external.htm” or “external.html”. Next, open the “external.htm” file in your web browser(internet explorer, Mozilla). You have now made a web page that uses external style sheets.
Do NOT leave spaces between the property value(like 10 px) and the units! If you use “margin-left: 10 px” instead of “margin-left: 10px” it will not work in Firefox/Mozilla or Netscape, only in Internet Explorer 6.
create 2 Files
external.html
mystyle.css
Run….external.html
Example
external.html
<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
</head>
mystyle.css
body {
background-color: blue;
}
h1 {
color: navy;
margin-left: 20px;
}
