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 (http://yoursite.com/stylesheet.css); 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?

Networking

Satellite Internet for the Home

Networking

How to Parse Parts of HTML Using VB

Networking

Online fundraising

Networking

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

Networking

How to Find a POP3 Server ID

Networking

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

Networking

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

Networking

9 Threats to Cloud Industry in 2013

Networking

Leave a Comment