Web-Development-Tutorials Home

Web Development Tutorials
HTML Tutorials
CSS Tutorials
Javascript Tutorials

Web-Development-Tutorials.com

Web Development Tutorials and Resources for Web Developers
from Beginners to Professionals

Internal Style Sheets and Inline Styles

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 (<style type="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>
</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.
</p>
</body>
</html>

Web Development Resources

Free Hit Counters
Free Music and
Online Radio Stations

Free SEO Tools
Free Page Rank Checker
Free Back Link Checker
Free Google Banned Checker
Free Keyword Density Checker
Free Link Popularity Checker
Free Search Engine Keyword Position Checker
Free Search Engines Lisitings Preview
Free Link Extractor
Free Source Code Viewer
Free Domain Tools
Free Domain Name Availability Tool
Free Domain Whois Lookup
Free Ping Test
Free Reverse/IP Lookup
Misc Free Web Development Resources View Web Browser Details