Updated September 09, 2012
If you want to set up a stylesheet to affect the current web page, you can do that with a stylesheet in the HEAD of your document. For this you use the STYLE element inside the HEAD element. This is called an embedded style sheet because the styles are embedded right in the HTML.
Rules for Style Sheets
- Always place your
STYLEelement in theHEADelement of your web page
While you can include theSTYLEelement elsewhere in a document, browsers might not support this and your styles not show up. - All style information should be stored between the
<style>and</style>tags.
This is how the browsers know that the information is for styles. - In HTML 4 documents, you should include the mime type in the
typeattribute, but this is not required in HTML5
This attribute indicates what types of style rules you will be using. The most common type of style rule is CSS, but there are other types (XSL, JSS, and others).
Tips for Working with Embedded Style Sheets
Here are some tips for working with embedded stylesheets:
- Define the MIME type only when you need to
The MIME type is defined only in HTML 4. In HTML5 you can leave it off, as browsers assume CSS for style sheets. In HTML 4 you write:<style type="text/css"> - Comments are not required
It used to be recommended that you surround all your styles inside embedded style sheets with HTML comments (<!-- … -->), but all modern browsers have no problems with CSS and don't need the styles commented out. If you believe you will be displaying your style sheets to browsers built back in the 1990s, you can comment out your styles like this:<style type="text/css">
<!--
style properties
-->
</style> - Always work out how you want your page to look before trying to write your CSS
In many cases, you won't need to set a lot of different styles, just simple ones that cover how your text and other elements should be displayed on your page. If you don't plan to have any red, blinking, 36 point headlines on your page, then defining a style for that is a waste of time and bandwidth.
Sample HEAD Element with Embedded Styles
Here is an example of a HEAD element with some embedded styles.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sample HEAD of an HTML Document</title>
<style>
body {
font-family : arial;
font-size : 12pt;
}
</style>
</head>
Next Page: External Style Sheets > 1, 2, 3, 4
