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: The Basics

The previous page explained how style sheets are referenced by the browser. This page expands on that and shows several working examples of style sheets.

Starting off with applying a color to a simple header tag, H1. Here is the complete code for the HTML file with a simple blue header.

<HTML><HEAD>

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

H1 { color: blue }

-->
</STYLE>

</HEAD><BODY>

<H1> A blue header </H1>

</BODY></HTML>

Click here for this example, use your browsers back button to return to this page.

The color tag used affects the Foreground color (text). If you wanted to have this style to be specified in a stand alone file, you would just save the code from the start STYLE tags to the close STYLE tag, inclusively. You would then reference the sheet using the LINK tag mentioned on the previous page.

If you want your header aligned in the center of the document, you can add the 'text-align' property as follows:

H1 { color: blue;
text-align: center; }

To save some space you can specify the attributes on the same line after the semi-colon.

H1 { color: blue; text-align: center; }

Classes

You do not need to define each and every tag specifically, but you can instead define classes and reference the class. Classes are defined by a name and a period in front of it. Here's an example:

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

.myIndent { margin-left: 1.0in }

-->
</STYLE>

The HTML tags to reference the above .myIndent class is:

<H1 CLASS=myIndent>Indented Header</H1>

<P CLASS=myIndent>Also this whole paragraph would
be indented one inch</P>
<P>but this wouldn't be indented</P>

Click here for this example, use your browsers back button to return to this page.

IDs

IDs are similar to classes except they work on a per element basis. ID use is actually discouraged by the W3C. The idea behind the ID is to define a certain style for a single specific element. They can not be used by multiple tags on the same page as the above example did.

IDs are referenced with a pound sign (#) and not a period as classes were.

#item1ID { font: 72pt Courier }

The HTML tag to reference this ID would be:

<SPAN ID=item1ID>some really large type</SPAN>

Being the tricky guy that I am, I have used a new tag, SPAN, to segue into the next topic.

SPAN and DIV

Two new tags have also been introduced to implement CSS. The tags alone do not have any predefined attributes, and are there for style to applied to them.

  • The SPAN tag is an inline element, which means it works with text or items that are on the same line, similar to the B, bold tag.

  • The DIV tag is a block element, which means it works with blocks of text or items, similar to the P, paragraph tag.

Ok, I think we have the basics out of the way. Let's move on and see what we can squeeze out of these style sheets.

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.