web blazonry web development scripts and tutorials Get best price on Samsung Galaxy S4, Black 16GB (Verizon Wireless)
   PHP       Name Generators       Perl       CSS       Javascript       Java       MySql       How Tos       Resources   

CSS Home



CSS Tutorial
  Introduction
  Getting Started
  The Basics
  Margins
  Fonts and Text
  Backgrounds
  Miscellaneous
  Tips and Tricks
  Problems & Compatibility
  Examples
  CSS Reference Guide

Bookmark and Share




CSS Tutorial: Getting Started

I am going to assume any style sheet file we are using is called 'style.css', and that it resides in the current directory. we Style sheet files can have any name and any extension and are referenced like any other file on your web server.

You can view the source code of any of these HTML pages or example HTML pages by using your browsers "View Source" menu item. This is usually located in the "View" menu at the top, or by right-clicking the mouse.

ok, let's get down to it, boppers!

Specifying the Style

The browser needs to know what style sheet or style elements being specified. There are several ways style can be specified:

1. embedding a style Style sheet information can be placed in the HTML file itself. The following tags goes in the HEAD portion of the document:

<style type="text/css">
<!--

...style code goes here...


-->
</STYLE>

If you are familiar with JavaScript you will notice the same use of comments to fool older browser to ignore the extra code. The HTML specification states that browsers are to ignore tags they do not understand. Thus, an older browser reading this could would ignore the STYLE tag, and then bypass the style code because it is between HTML comments (<!--    -->)


2. Linking to a separate style sheet file. Instead of embedding the style code in each HTML file, you can put all of the style code in its own text file and link each document to that file. The following tag to link a style sheet is placed in the HEAD of the HTML document:

<LINK REL=STYLESHEET TYPE="text/css" HREF="style.css">


3. Importing a style sheet. You can also combine the above two items by importing a seperate style sheet into an individual HTML file. For example you can import a basic sheet, and then add on extra styles to it. The import command is placed in the STYLE section mentioned above and should be the first thing in that section:

<STYLE TYPE="text/css">
<!--

@import url(style.css);

... rest of style code goes here

-->
</STYLE>


4. Inline style Style can also be specified on a per HTML element basis. Below is an example of specifying a 1" margin on one specific paragraph.

<P STYLE="margin: 1.0in">This paragraph will have 1" margins all around.</P>

Next >>

 

Newest Pages
Test Google Ads Ver. 2
Free Linux Admin Books
Free Linux Books for Programmers
Free Books for Linux on the Desktop
Free PHP Books
Free JavaScript Books
Free Java Books - Advanced
Free Java Books - Basic
Free Perl Books
Free Python Books
Quote of the Day (PHP)
Debugging Part 2
How to Test Google Ads
Most Popular Pages
Baby Name Generator
U.S. Name Generator
Wu Name Generator
Popup Windows (JavaScript)
Upload and Resize an Image (PHP)
How To Install Apache + PHP + MySQL
Intro to Web Databases (PHP, MySQL)

Least Popular Pages
iNews Applet (Java)
Java Resources
Site Monitor (Perl)
PHP Resources
 
 

  privacy policy     ||     © 1997-2016. astonishinc.com   All Rights Reserved.