Navigation Button

Internet Brothers: Helpware for the Cybercommunity - Cascading Style Sheets

Cascading Style Sheets Basics

CSS, or Cascading Style Sheets, is a newer technology that gives site builders enhanced control over the look of elements on a web page. Objects once considered unchangeable, such as the underline beneath links, the color of form elements, the spacing between text, and more, can now all be altered, thanks to CSS. Before proceeding with this tutorial, it is recommended you have a firm understanding of HTML tags, elements, and properties.

CSS defines text traits Style sheets allow you to adjust the traits that define how text, tagged with a given HTML element, is displayed. Say, for example, you wanted your normal paragraphs — those defined by the <P> tag — to be rendered in a bold, navy, 12-point Arial or Helvetica font. Here's how the Cascading Style Sheet (CSS) definition for that would look:

p {
font-family: Arial, Helvetica;
font-weight: bold;
font-size: 12pt;
color: "navy";
}

Incorporating the CSS Into Your HTML Document

The <STYLE> element, as defined by the <STYLE> and </STYLE> tags, allows you to incorporate CSS style-specification information into an HTML document. This element goes in the <HEAD> section of your document and here is what it looks like:

<style type="text/css">
p {
font-family: Arial, Helvetica;
font-weight: bold;
font-size: 12pt;
color: "navy";
}
</style>

Specifying Multiple Styles at Once

You can use a CSS to define the characteristics associated with multiple tags at once. Nothing to it, really. Just list the tags to be defined, separated by commas, at the beginning of the definition block. Notice the H1 and H2 definitions.

<style type="text/css">
H1, H2 {
margin-left: 15;
font-family: Verdana,Times;
font-size: 18pt;
color: "red";
}
</style>

Here is what it looks like.


except in Netscape, where everything is green. Why?

Continue With External CSS Files

previous page     top of page     next page


HTML Utopia: Designing Without Tables Using CSS
HTML Utopia: Designing Without Tables Using CSS
  • Learn to use CSS for layout
  • Build faster loading, leaner pages
  • Produce clean, beautifully managed code
  • Design device-independent, highly accessible pages
  • Write standards compliant code
Download sample
chapters free!


Read more info


The Internet Brothers have implemented hierarchical menus for navigation. Easier done than said. In our effort to be friendly to all browsers, the menu tree is functional with version 4 or greater of both the Netscape and Internet Explorer products.

As stated above, hovering over the button will open the menu for these browsers. But if you have an older product, don't fret, we'll send you to the scum page. Just click the button.

Why haven't you downloaded the newer versions? They're free you know.
Download Internet Explorer
Download Netscape Communicator

The hierarchical menus were created using Peter Belesis' Dynomat DHTML scripting tool from Webreference. Give them a visit, you'll like what you learn.

Our Lovely Email Icon    another darn bug






Site Map

Was this site useful to you?
Vote For Us at WebbieWorld

Copyright 1997-2004 Internet Brothers. All Rights Reserved. Really.