HOME
 HTML
 CSS
 PHP
 PHOTOSHOP
 WEB DESIGN
 SITE INFO
CSS
INTRODUCTION
 TEXT FORMATTING
 INTERNAL STYLES
 EXTERNAL STYLES
 ADVANCED CSS

Internal CSS Stylesheets

Introduction

This article outlines how to create internal stylesheets and how to overwrite the default styles for certain parts of an HTML page.

Basics

For now, we'll deal with the entire HTML page as a whole, and simply make changes to the entire body tag. In between the <head> and the <body> section, a <style> attribute can also be attached, creating a stylesheet for the page, as seen below.

<style type="text/css">
<!--
body {
  font-family:arial, helvetica, sans-serif;
  color: #BBBBBB;
  background-color: #000000;
}
-->
</style>

That example would change all of the styles within the body of that HTML page to have a background color of black, a text color of light gray, and a font of Arial. Any attribute previously mentioned as an inline attribute can also be used here in an internal stylesheet.

Defining Classes

An internal stylesheet gives the designer the power to create their own classes that can be used throughout the HTML page. For example, if you wanted to define a class that specified a border and a background, as specifed below, whenever you referred to that class, it would carry the same style.

<style type="text/css">
<!--
  .classname{
  border: 3px solid red;
  backround-color: #333333;
  }
-->
</style>

To implement the above class in your HTML document, you would simply use <div class="classname">Text Here</div>. You can define an unlimited amount of classes and use them wherever necessary. They are particularly useful if you will be reusing the same style over and over again for different parts of the page.

Overwriting Built-In Classes

Internal style sheets also give you the ability to overwrite built-in classes. An example of a built-in class is the italics tag or <i> or <em>. If you wanted to make everything italicized on your HTML page also a different color, you would insert the following within your <style> tags:

i,em {
color:#555555;
}

The comma defines the information in the brackets for both the <i> tag, but also the <em> tag, which have the same default style. You can also overwrite all of the <h1>, <h2>, etc. classes using the same method. See below for an example:

<style type="text/css">
<!--
  h1 {
   font-size:200%;
    color: #343434;
  }
  h2 {
    font-size:150%;
    text-decoration:underline;
  }
-->
</style>

Internal stylesheets also allow for overwriting most HTML tags, including <ol>, <table>, <td>, <p>, <bold>, <strong>, <blockquote>, <code>, <pre>, etc. They also allow you to specify particular styles for hyperlinks, in the form of <a href="http://site.com">. There are multiple classes within the <a> class, such as hover (the style that occurs when the mouse hovers over the hyperlink), visited (the style that occurs when a link has been visited already), link (general style), and active (the style that occurs when the hyperlink is clicked). See below for an example of each of these in use.

<style type="text/css">
<!--
  a:link, a:active, a:visited {
    text-decoration:none;
    color:#444444;
  }
  a:hover {
    text-decoration:none;
    color:#000000;
  }
-->
</style>

You can also specify built-in classes within a user-defined class. For example, changing attributes to .cool a:hover, will only affect the hover hyperlink style when a hyperlink is put within a div associated with the class "cool".

Sources / For More Information

<< Prev | Next >>