Technology Networking & Internet

Where Should You Place CSS Tags?

Style sheets can be placed in three places in a document:
  • within an individual tag
  • in the <head>
  • in an external file

Style calls placed within an individual tag will only affect that tag, styles placed within the head of the document affect the entire page, and external style sheets affect any Web page that loads the styles.

Styles on Specific Tags

For example this style is called within the <h4> tag:

<h4 style="color: #0000ff;">a blue headline</h4>
On a page with that element as well as other <h4> tags, only the element with the style would be blue. If you wanted other <h4> tags to be blue, you would need to define it in a more global style sheet.

Creating styles as an attribute of a tag is a quick way to generate the style you would like without impacting your entire page.

Styles on the Entire Page

To create a style sheet within the head of your HTML document, you enclose it in <style> tags. It is a good idea to define the mime type of the styles you are creating (usually text/css), and then to put the style rules within comment tags so that older browsers do not display them as text on the page. For example:

<head> <style type="text/css"> <!-- h4 { color: blue; } --> </style> </head>
This style sheet would cause every <h4> tag on the page to be blue. If you want your entire site to have blue <h4>s then you'd need to use an external style sheet.

Styles on the Entire Site

To create an external style sheet you create a separate document with all of your style information in it and either link or import it into your document.

If you have a large site and would like to maintain consistency across it, then external style sheets are the way to go. They provide you with a simple way to dictate how all instances of various tags will be displayed.

Linking a style sheet
The benefit to linking a style sheet into your document is that it is supported by both the major 4.0 browsers. You call a linked style sheet like this:

<link rel="stylesheet" type="text/css" href="stylesheet.css" />
Importing a style sheet
Importing style sheets allow you to keep all your style information in the same place, within the <style> element, while also loading external files as style commands. For example:

<style> @import URL (; h4 { color: #0000ff; } </style>
Next page > Cascading - What does it mean? > Page 1, 2, 3, 4

Previous Features

Related posts "Technology : Networking & Internet"

What is Home Wireless Networking?


Satellite Internet for the Home


How to Parse Parts of HTML Using VB


Online fundraising


How to Connect My Wii to My Laptop's Internet Using an Ethernet Cord


How to Find a POP3 Server ID


How to Configure a D-Link DIR-655 on a Windows Home Server


Beach Hotels in Florida. The 5 Best Beach Hotels In Cuba


9 Threats to Cloud Industry in 2013


Leave a Comment