Copyright: Copyright © 1998 CoffeeCup Software


Welcome
Welcome to the CoffeeCup StyleSheet Maker++

http://www.coffeecup.com

Welcome to the world of creating Cascading Style Sheets (CSS) with the CoffeeCup StyleSheet Maker++.  This help file is designed to give the user a clear definition of what a Cascading Style Sheet is and how to create one with this program.  This help file WILL NOT give you all the answers.  To learn all there is to know about CSS, it is highly recommended that you purchase the Cascading Style Sheet Book.

Related Topics:

   Overview

   What is a Style Sheet?

   Getting Started with CSS


   What is a Style Sheet?

A Cascading Style Sheet is a method used to enhance the property of HTML tags that offers enormous benefits for Web authors.  Web authoring with style sheets allows you to focus on the presentation of your work, giving you complete control over all the features HMTL tags without changing the content of your webpages.  As you will see, this will give you increased flexibility and control over your creations.  (See for a sample of a style sheet.)

When you create Cascading Style Sheets, you are incorporating more properties onto one or more existing HTML tags.  Additional properties can be applied to an infinite number of tags, one after another.  The end result is a series of styles that can be applied to your webpages.

IMPORTANT:

Cascading Style Sheets can only be implemented in either Microsoft's Internet Explorer 3.0+ or Netscape's Navigator 4.0+.  Any other previous versions of WILL NOT be able to view the style sheet.

Lets take a closer look at another sample of a style sheet.  Shown below is an example using the HTML tag <CENTER> .  When placed in a webpage, it causes the text to align center...

SAMPLE:  (without a style sheet)

This sentence is in the <CENTER> tag.

With a style sheet implemented for the <CENTER> tag, notice what happens:

SAMPLE:  (with a style sheet)

This sentence is in the <CENTER> tag.

This is what the Style Sheet for this example looks like:

<style type="text/css">

<!--

     CENTER

             {

             font-family: Courier;

             font-style: Italics;

             font-size: 14px;

             font-weight: 500;

             color: #0000A0;

             }

-->

</style>

Keep in mind that you can make the style sheet reflect any style you want.  And you can have as many as you want in your webpage, not just one.

What happens when you start adding more than one Style Sheet on a website ?

Adding more than one Style Sheet is where the term Cascading Style Sheet came from.  They are designed to be read in cascading order, one after the other.

Let's take an example where you have two Style Sheets, one for the <BODY> tag and one for the <H1> tag.  It could look something like this:

<style type="text/css">

<!--

     BODY {

          background: #008000;

     }

     H1 {

          font-family: Verdana;

          color: #C0C0C0;

          background: #000000;

     }

-->

</style>

In this Style Sheet, the <BODY> tag has a green background.  <H1> has been given the properties of silver VERDANA font with a black background.  The result could look something like this:

Related Topics:

   Overview

   Getting Started with CSS


CSS

CSS is an acronym for Cascading Style Sheets.


<CENTER>

This HTML tag will cause text or images to be aligned in the center of a browser.


   Getting Started with CSS

  The Tutorial Wizard can help you begin creating Cascading Style Sheets.  To begin the tutorial, simply click on the Wizard button.  The Tutorial Wizard will take you through a simple three-step process outlined below.

Step One:  Open a New Style Sheet

You can do this by selecting File|New from the program menu, by clicking on the New button, or the Style Sheet button.  A popup quick start window will prompt you to select either a New Style Sheet or to Open a Blank Page.  Choosing the New Style Sheet button will create an outline of HTML style sheet code.

  New Style Sheet Button	  Style Sheet Button

Step Two:  Customize HTML Tags

To customize a tag, select it from the toolbar Pick A Tag drop down box.  Your tag will appear in the HTML Source Code Viewer window with the correct CSS coding.

	• Click on the arrow to see the drop down menu of tags. • Select a tag by clicking on its name.  The tag will appear in the currently active menu.

NOTE:

When you insert an HTML tag into a window, It CANNOT BE INSIDE another tag’s brackets.  Make sure that each time you pick a new HTML tag, it is placed after the end bracket  } of an existing tag.  If you put a new tag inside an existing set of brackets { }, your style sheet will not work.

The first tag inserted in  this example is the BODY tag. Notice that the H1 tag was inserted outside of the BODY tag brackets.
Then click one of the attribute buttons on the right-hand toolbar to set properties for the tag chosen.  Any tag can use multiple properties, so apply as many as you like.  Your choices of properties include:

  Font Designer

  Color and Background

  Alignment

  Margins

  Padding

  Borders

Step Three:  Test & Save Your Style Sheet

Once you have customized all of the tags desired, be sure to save your changes by clicking the toolbar Save button.  You may also want to test your style sheet.  Then, when you are satisfied with the results, implement the style sheet into your webpage(s).  You can either place the style sheet code directly into your webpage(s) or just add a reference link in your webpage(s) that will point at your style sheet file.  See the topic on Saving for a more detailed look at how you can apply your style sheets to webpages.

Related Topics:

  Testing

  Saving

  HTML Source Code Viewer


   Testing Your Style Sheet

How to Test Your Style Sheet

IMPORTANT:

Your style sheet must be viewed in either Netscape 4.0+ or Internet Explorer 3.0+.  If you view your style sheet in any previous version, the style sheet won't work.

To Test the Current Style Sheet you are working on, push either one of following buttons to see your creation in a browser:

  This will test your style sheet in your Favorite Browser

  This will test your style sheet in the Default Browser

What this will do is bring up a page with over 50 tags on it.  Any tags that you have been manipulated with the StyleSheet Maker++ will be displayed with all your modifications.  This will give you a quick visual representation of any and all the attributes included in your style sheet.

After you are happy with your test results, save your style sheet.  At this point, you will just have to put those tags that you modified in your webpage and they will follow the look of the Style Sheet.  Alternatively, you can add a reference link in your webpage(s) that will point at your style sheet file.  See the topic on Saving for a more detailed look at how you can apply your style sheets to webpages.

If you don't see any effect to the tags you place Style Sheet Properties on, check and make sure you are using either Netscape 4.0+ or Internet Explorer 3.0+.  (You can check the version number of the browser by clicking the HELP Menu of the browser, and then choosing About.

Related Topics:

  Saving

  Printing

  HTML Source Code Viewer


   HTML Source Code Viewer

What the heck is this?

This window is where all the HTML goes that makes up your Style Sheet.  It is continuously refreshing itself every time you click on an HTML item or a property for that item.  The HTML Source Code Viewer contains the text that needs to be placed in your webpage for the Style Sheet to work.

What can I do with the HTML Source Code Viewer ?

Use the Viewer window to see your style sheet code as you create it.  Cut, copy, paste, and undo options are all available to give you maximum flexibility.  The HTML Source Code Viewer windows act just any other window – you can resize, move, maximize, minimize and open as many windows as you like.

Besides seeing newly created style sheets, the HTML Source Code Viewer windows can be helpful for other tasks.  Look in the CSS Library by selecting the CSS tab to bring up a listing of your saved style sheets.  Just double click on a file to see it displayed in an HTML Source Code Viewer.  From this window, you can add modifications to the style sheet.  You can also quickly locate any .css or other file - just click the Files tab to use the File Control .  Just like in the CSS Library, double click on a file in the File Control to view it in the Viewer window.

It is recommended that you save all your work before you start implementing any Style Sheets into your webpage.  It is also recommended that you test out your Style Sheet before you place it into your webpage.

Style Sheets will enhance your work, they will not delete any content you have on your webpage.  But, if you have a webpage with a Style Sheet already in it, and you Save a New one over it, the previous Style Sheet will be erased.

The code you see in the HTML Source Code Viewer goes anywhere above the <BODY> tag of your webpage.  When you save your Style Sheet into an HTML file, The CoffeeCup StyleSheet Maker++ will automatically place it above the <BODY> tag for you.

Related Topics:

  Testing

  Saving

  Printing


   Saving

How to Save

  You can save your style sheet in several different ways.  How you save your style sheet depends on how you want to use the file and your preferred method for implementing style sheets into webpages.  The flexibility we offer will help you to gain better control over your creations.

You can either:

1) Save as a CLIENT-SIDE Style Sheet in an existing or new HTML file (htm, .html)

To view your Style Sheet into a webpage you have already created, use this option.  Or to place the Style Sheet in a new HTML file, to be edited later in either the CoffeeCup HTML Editor++ or another editor.

2) Save as a SERVER SIDE Style Sheet (.CSS)

You can save just the Style Sheet and have a reference link on your webpage that will apply it to your .html file.  Here is how it works:  You save the Style Sheet in .CSS format.  All it will contain are the Style Sheet properties you have defined.  Next, you need to place LINK REL code in your webpage to link the style sheet attributes to your webpage.  You can easily do this with the StyleSheet Maker++.

1.  Click on the Files tab and then locate your webpage in the File Control .  Double click on your webpage and it will appear in an HTML Source Code Viewer window.

2.  Click on the LINK REL button [image]  This will create the code outline for the link in the currently active file.  Just add the filename of your .css file and type in a title.  Make sure to place the code above the <BODY> tag in your webpage:  Your code will look like this:

<LINK REL="stylesheet" TYPE="text/css" HREF="filename.css" TITLE="mytitle">

This code tells the browser to retrieve your .CSS file and to use it as the Style Sheet for the page.

3) Save as SERVER HTML (.ASP,.SHTML, .PHTML) or TEXT FILE (.TXT, .CGI, .PL)

Use this option if you want to save your file as either server HTML or as a text file.

NOTE:

It is recommended that you save all your work before you start implementing any Style Sheets into your webpage.  It is also recommended that you test out your Style Sheet before you place it into your webpage.

Style Sheets will enhance your work, they will not delete any content you have on your webpage.  But, if you have a webpage with a Style Sheet already in it, and you Save a New one over it, the previous Style Sheet will be erased.

Related Topics:

  Testing

  Printing

  HTML Source Code Viewer


   Class and ID Attributes

The CLASS attribute

  What if you could make up your own tags?  Well now you can by inserting your own attributes into the HTML Source Code Window using the CLASS attribute.

Start by deciding on a name.  Here we have used "ROCKY" and "BULLWINKLE".  Then place the name of your new attribute in the Style Sheet.  Make sure there is a period (.) before the name.

Then apply the properties to that tag.  In this example, .ROCKY is given Arial font, whereas . BULLWINKLE is given Times New Roman font.

Finally, to apply the attributes to your webpage, you must use the CLASS= tag.  With the name of the attribute after the equals (=) sign.

Example:

<STYLE TYPE="text/css">

     .ROCKY {

          font-family: Arial;

          color: #FF00FF;

          background: #000000;

     }

     .BULLWINKLE {

          font-family: Times New Roman;

          color: #FFFF00;

          background: #800080;

     }

</STYLE>

<BODY>

<P CLASS=ROCKY>This font is Arial.</P>

<P CLASS=BULLWINKLE>This font is Times New Roman.</P>

</BODY>

The ID attribute

  Similar to the CLASS attribute, the ID attribute is different because it CAN NOT be used more than once in a webpage.  In the CLASS attribute example above, the ROCKY attribute could be used more than once.  An ID attribute can only be used once.  The creation of one is the same as CLASS attributes except that a number sign (#) is required before the name.  The name MUST START WITH A LETTER.  It can be a word or a word/number combination.

Example:

<STYLE TYPE="text/css">

     #B213 {

          font-family: Arial;

          color: #FF00FF;

          background: #000000;

     }

     #B214 {

          font-family: Times New Roman;

          color: #FFFF00;

          background: #800080;

     }

     #BOB {

          font-family: Verdana;

     }

</STYLE>

<BODY>

<P ID=B213>This font is Arial.</P>

<P ID=B214>This font is Times New Roman.</P>

<CENTER ID=BOB>This font is Verdana.</CENTER>

</BODY>

You would not be able to repeat the same ID in the same webpage.  ID attributes are exclusively used once.


   Dynamic HTML Snipplets

DHTML Snipplets

The seven Dynamic HTML Snipplets found under the DHTML tab are additional style sheets that can really add spice to your webpages.  These DHTML Snipplets have been formed so that you can customize them to your liking.  All seven Snipplets have names referring to their specific function (i.e., Drop Down Menu Snipplet creates a drop down menu).  You can make modifications and put these Snipplets in your own webpage(s).  Some suggested changes you can make are outlined below.

	• Choose from seven Snipplets. Double click on a Snipplet and its HTML will appear in an HTML Source Code Viewer window.  Right click on a Snipplet to see opening options. • The Snipplet HTML code appears here

Double click on any of the Snipplets and an HTML source code window will appear.  Here you can add additional attributes and alter the Snipplets to your heart’s desire.

The Snipplets included are listed below with brief suggestions for alterations:

Drag and Drop Images

This script allows the user to Drag and Drop images within the browser.

Suggested Changes:

•	Text within <FONT>

•	Customize Pics in <DIV ID=plane(n)>

<BODY onLoad="init()">

<CENTER><FONT FACE="Arial" SIZE=5>Flying High on Caffeine</FONT><BR>

<FONT FACE="Arial" SIZE=4>Move a Plane if your browser can handle it !</FONT></CENTER>

<HR WIDTH=300 NOSHADE>

<DIV ID=plane1><IMG NAME="planePic1" SRC="plane1b.gif" BORDER=0 ALT="That Coffee was Strong !"></DIV>

<DIV ID=plane2><IMG NAME="planePic1" SRC="plane2b.gif" BORDER=0 ALT="I should have stopped after the 10th Cup"></DIV>

</BODY>

Drop Down Menu

Creates a drop down menu of text lines, each one a link to a website.

Suggested Changes:

•	<A HREF...  Website links and link label (“Link(n)”)

•	#divMenu:  Change the position, size, and color of the Snipplet

<BODY BGCOLOR="FFFFFF" TEXT="000000" LINK="0000FF" VLINK="0000FF">

<div id="divMenu">

<CENTER><A HREF="http://www.coffeecup.com">Link1</A><br>

<A HREF="http://www.coffeecup.com">Link2</A><br>

<A HREF="http://www.coffeecup.com">Link3</A><br>

<A HREF="http://www.coffeecup.com">Link4</A><br>

<A HREF="http://www.coffeecup.com">Link5</A><br>

<A HREF="http://www.coffeecup.com">Link6</A><br>

<A HREF="http://www.coffeecup.com">Link7</A><br>

<a href="javascript:up()"><IMG SRC="up.gif" WIDTH="15" HEIGHT="15" BORDER=0></a>

<a href="javascript:movemenu()"><B>Menu</B></a>

<a href="javascript:down()"><IMG SRC="down.gif" WIDTH="15" HEIGHT="15" BORDER=0></a></CENTER>

</BODY>

Highlight

With Highlight, you can now make links out of TEXT or IMAGES that automatically change border or background color when you place the mouse over them.

Suggested Changes:

•	<A HREF...  Website links and link label (“Link(n)”)

•	onmouse(over/out):  Customize colors to your liking

<div id="link1" class="fillin">

<!--In the next line, specify the link URL-->

<A HREF="PUT YOUR LINK HERE"

onmouseover="CoffeeCup('link1','#FFFFFF')"

onmouseout="CoffeeCup('link1','#000000')">

<IMG SRC="1.gif" WIDTH="100" HEIGHT="100" BORDER=0 hspace="10" vspace="10"></a></div>

Link Message

This Snipplet displays a unique message for each of the links listed in the browser.

Suggested Changes:

•	<div id=”startingMsg”>  Type in a starting message

•	messages[n]:  Type in messages unique to your links

•	<A HREF...  Website links and link label (“Link(n)”)

<div id="startingMsg">

Put your starting message here....it will go away when the links are touched.

</div>

messages=new Array(4)

messages[0]="This is a message for LINK #1"

messages[1]="This is a message for LINK #2"

messages[2]="This is a message for LINK #3"

messages[3]="This is a message for LINK #4"

messages[4]=""

<a href="http://www.coffeecup.com" onmouseover="mover(0)" onMouseout="mout(4,0)">Link 1</a><P>

Pop Out Text

The Pop Out Text Snipplet begins as a divit, but then pops out into a message box where you can place links, images, news, and more.

Suggested Changes:

•	<B>  Type in a poem or somethin’ in the text box

•	<A HREF=... Change the website link

<div ID=poptextDiv>

<FONT FACE="Verdana, Arial" COLOR=000000 SIZE=2><B>You can put anything you want in this text box.  This is a great place to announce news, product descriptions, links, or images.</B><P><TT>Example:</TT><P><IMG SRC="book.gif" WIDTH="25" HEIGHT="25" ALIGN=MIDDLE> Visit the <A HREF="http://www.coffeecup.com/bookstore" onMouseOver="window.status='BookStore '; return true" onMouseOut="window.status=' '">HTML Bookstore !</A></FONT>

<P>

</div>

<!--Put regular stuff Underneath Here-->

<div ID=maintext>

Click the above divit and a box will appear.

</div>

Scrolling Webpage

This script allows you to place text descriptions of any sort and it will scroll up the page.

Suggested Changes:

•	<font>  Change the font attributes

•	<P>  Customize the text

•	<IMG SRC=...  Use your favorite pics

<BODY onload="scroller()">

<CENTER>

<font face="VERDANA, ARIAL" size="5" color=804040>Rolling Credits</font><p>

<font face="VERDANA, ARIAL" size="4">This script allows you to:

<HR WIDTH=350 NOSHADE>

<P>

Place<P> text<P> descriptions<p>

of <P>any <P>sort<p>

and it will <P>scroll up<p>

the page <P>until its done.<p>

<p>

You can even<P> make <A HREF="http://www.coffeecup.com/">Links.</A><p>

Or<p>use<P>images:<p>

<IMG SRC="book1w.gif" WIDTH="60" HEIGHT="45">

<IMG SRC="hat1w.gif" WIDTH="80" HEIGHT="50">

<IMG SRC="safe1w.gif" WIDTH="45" HEIGHT="70">

<p></font>

</CENTER></BODY>

Zoom Message

This will make your messages jump out!  Your words will appear to zoom toward the viewer, getting larger and larger.

Suggested Changes:

•	text=new Array  - Type in whatever text you want to zoom

•	var numText=(n) – The number of words (strings) in array

•	Any of the other parameters (colors, endSize, etc.)

//<!--Change this text-->

text=new Array('www','coffeecup','com','CoffeeCup Software')

//<!--This is the number of words in your message-->

var numText=4

//<!--These are the colors the last word will fade to.  The first color is the main color.-->

color=new Array('#000000','#2F2F2F','#4F4F4F','#7F7F7F','#408080')

//<!--This is the total number of colors from above.-->

var numColors=5

//<!--This is the size you want the zoom to end at.-->

var endSize=70

//<!--This is the speed you want it to zoom in.-->

var Zspeed=30

//<!--This is the speed the colors will fade.-->

var Cspeed=200

//<!--This is the font of the fade in message.-->

var font='Arial Black'

//<!--This will allow you to have the message stay or go.  True will make it go.

//      False will make it stay.-->

var hide=false


   Font Designer

   The Font Designer options are divided into three main parts in the CoffeeCup StyleSheet Maker++:  the Font Family, Font Size, and Font Characteristics.

FONT FAMILY

Once you have a chosen an HTML tag, select which FONT will appear on the web browser when text is displayed in that tag.  In this example, ARIAL has been selected to be the FONT.  A second FONT and Generic Choice FONT can also be selected to heighten this effect, but they are not necessary.

FONT SIZE

Now choose the SIZE of the FONT.  You have four different ways of representing the FONT SIZE.

Absolute:  This is an index of font sizes kept by the browser.

Relative:  Use this selection to make the FONT SIZE either larger or smaller than the font size of the Parent HTML Tag it lies within.

Length:  This is the most commonly used way to adjust the FONT SIZE.  Pick the pixel length you wish each letter to be.

Percentage:  Use Percentage to size the text according to the size of the browser window.

FONT CHARACTERISTICS

These boxes determine the way the text will look overall on the web browser.  Activate them by checking the appropriate box.

Weight:  Specifies the weight of the font.  Used to make the text lighter, bolder, or in degrees of weight.

Style:  Specifies either italics, oblique, or normal text.

Decoration:  It is used to add underlining, overlining, strike-out, or blinking effect to text.  The most common way this is used is for Links (when you have "none" selected, the links will not have be underlined)

Transform:  Makes all the text all lower case, all upper case, or capitalize the first letter in each word.

Variant:  Lets you specify a small-caps style.

Other Properties:

  Color and Background

  Alignment

  Margins

  Padding

  Borders


   Color and Background

  The Color and Background properties window allows you to alter the color, background color, and background image for the particular attribute chosen.

COLOR (Background and Foreground)

For each tag you choose in the Style Sheet Items box you can select which color (Foreground Color) the text will appear as.  You can also choose the Background Color of the space behind it, but this attribute is not limited to text alone.  You can use Background Color to specify the background color of Tables, Paragraphs, Lists, Links, or even your entire website.  When choosing a color, use the drop down boxes to make quick generic color choices.  Or click on { Custom FG } or { Custom BG } to choose a specific color of your choice.

Background Image

Want to use a background image instead of a background color?  It's as easy as clicking the Background Image box, then { Locate }, and then choosing an image from your computer.  (Anytime you have images in your website, make sure they are in the same directory as the .html file of your website)  Use these attributes to further define your background image:

Repeat:  Leaving this box "unchecked" will, by default, make the image you choose repeat itself over and over again (this is called the tiling effect).  By checking the box you can define how it is repeated.  Repeat-x will make the image only repeat horizontally.  Repeat-y will make the image only repeat vertically.  No-Repeat will have the image displayed only once.  It will not tile itself.

Attachment:  In this selection box are two choices; "scroll" and "fixed".  "Scroll" is the default setting.  It will make the image scroll along the browser.  "Fixed" will make the image fixed along with the canvas.  This means the image will stay where it is at, even if you scroll down the browser.

Background Position:  This will let you position the image using percentages, pixels, or alignment keywords (top, bottom, left, center, or right).

Other Properties:

  Font Designer

  Alignment

  Margins

  Padding

  Borders


   Alignment

  Alignment properties give you several different ways to alter the appearance of text.  Either by raising it, lowering it, indenting it, spreading it out, centering it, etc.  You can manipulate these values to get the perfect look on your webpage.

The text-indent property

The Indentation box alters the text-indent property.  It will specify, in either pixels or in percentages, the distance from the left border the first line of text will begin.

The line-height property

This property will determine the distance between the lines in a paragraph of text.

The word-spacing and letter-spacing properties

These values determine the additional length, if any, of the blank space between words and letters.

The vertical-align property

This property effects how the text is aligned with it's adjacent element.  For example, a line of text were beside an image.  The value is set by percentage or one of the following properties:

Baseline - Alignment is normal.  This is the default value.

Bottom - Aligned to the bottom of the lowest element on the line.

Middle - Aligned at the midpoint.

Sub - Subscripts the element

Super - Superscripts the element

Text Bottom - Aligns the bottom of the font with the lowest element on the line.

Text Top - Aligns the top of the font with the highest element on the line.

Top - Aligned to the highest mark on the line.

The text-align, clear, and float properties

Hoizontal Alignment:  Refers to the position of the text (text-align) in left and right terms.  The text can be all aligned left, all aligned right, centered, or justified.

Float:  This property will align the element to the left or right of the Parent HTML Tag.

Clear:  Determines if an element will allow another element Float on either side of it.

Other Properties:

  Font Designer

  Color and Background

  Margins

  Padding

  Borders


   Margins

  Margins settings allow you to manipulate the margins of text or images.  The MARGIN properties can be adjusted so that elements can be closer or father apart.

What are MARGINS ?

Margins are the space between the text or image's bounding box and the bounding box of adjacent text or images.  Each side of the Margin (left, right, top, bottom) can be changed the same way.  To change the values, pick a radio button, then adjust it's numeric value.  If Auto is chosen, then the value will be left up to the browser.

Width and Height Properties

Width:  Refers to the value of the width of the element.  Specify either a pixel length, a percentage, or auto to let the browser adjust the value.

Height:  Refers to the value of the height of the element. Specify either a pixel length or a percentage.

Other Properties:

  Font Designer

  Color and Background

  Alignment

  Padding

  Borders


   Padding

  Padding properties allow you to adjust the padding values.  This effect is somewhat similar to Cellpadding in a table.

What is PADDING ?

Padding is the distance between text or images and it's Border or it's Margin if no BORDER is present.  The PADDING properties can be adjusted so that elements can be closer or father apart to the BORDER or MARGIN.

Other Properties:

  Font Designer

  Color and Background

  Alignment

  Margins

  Borders


   Borders

  Borders button will allow you to alter more effects than the Margin or Padding property settings.  You can adjust the border width, choose from several border styles, and pick a border color.

What is a BORDER ?

A Border is a way of highlighting text or images.  It is placed between the element's Padding and the element's Margin.  You can take advantage of more features with BORDERS than with the properties for PADDING or MARGINS.  The following steps will show you how to alter the border width, border style, and border color.

Setting the Border Values

1) You first must determine the size of the Border.  You have three choices.

Fixed:  This is a general way of sizing the border.  It uses the values: none, thin, medium, or thick.  Medium is the default size.

Length:  Use pixels to determine the size of your border.

Percentage:  This option uses the overall size of the browser to determine its size.

2)  Next you can choose the Border Style.  You have nine different choices.

None - The border is not displayed

Dotted - The border is a dotted line, like a cut-out coupon.

Dashed - The border is dashed, similar to dotted but with bigger sections of line.

Solid - The border is continuously solid.

Double - The border contains two lines.  Not to be confused as two different borders.

Groove - The border is a 3D groove.  Looks as if it is grooved into the webpage.

Ridge - The border is exactly like Groove except that the border is sticking out instead of pushed in.

Outset - The border is actually a solid rectangle (the dimensions of the element), and it is sticking out of the webpage.

Inset - The same as Outset except that the solid rectangle is pushed into the webpage.

3)	Finally, you can assign the Border Color.

Choose among all your favorites, including Teal, Aqua, Fuchsia, and the rest of the rainbow.

Other Properties:

  Font Designer

  Color and Background

  Alignment

  Margins

  Padding


   Buy The Book

Need more help?   Buy The Book!

The CoffeeCup StyleSheet Maker++ is just that.  It will not however give you the complete explanations of each style sheet command, tag, and attribute.  For this reason we recommend the purchase of this book.  In it you will find a rich source of information pertaining to Style Sheets and how they work.

Visit the Website:

http://www.awl.com/css/

Visit the website above to see preview sections of the book and to learn more on Style Sheets.

Then go to http://www.coffeecup.com/bookstore to purchase it.

The definitive source for style sheet information is the website compiled by the W3C (World Wide Web Consortium).  Visit it at:

http://www.w3.org/Style/CSS/

This site is a good alternative source from purchasing the printed book.  It is from the same authors of the book who are members of the W3C.


   Online Help

Visit our OnLine Help File at:

http://www.coffeecup.com/help

View other people's work using Style Sheets:

The best way to learn Style Sheets is to view other people's work.  Below is the URL to a listing of websites on the Internet that use Style Sheets:

http://www.coffeecup.com/style/links.html

Use this page for resources and links.  If you want your URL listed here to show off your work with Style Sheets, drop us a line at editor@coffeecup.com.


   File Control

The main function of the File Control is to give you easy, quick access to all files in any directory.  It is activated by clicking on the File tab on the left side of the StyleSheet Maker++.

	• File Control allows you to quickly locate any folder • Select a type of file and they will appear in this area.  Double click on a file and it will appear in a HTML Source Code Viewer window.  Right click on a file to see opening options.
Once you have found a folder and specified the type of file that you want to look at, a list of files (for that type) will appear in the lower window.  At this point, you can double click on a file name and it will appear in a HTML Source Code Viewer window.  You may also want to open the file using other methods....

Right click on a file will allow you the following choices:

•	Open File:  Clearly, it will do just that – open the file.

•	Insert Into Current Document:  This will insert the file (such as a html file) into the currently active document.

•	Open in New Window:  A new window will open with your file.

•	Open in Associated Application:  If you want to open a file in an application other that the StyleSheet Maker, choose this option.


   CSS Library

The CSS Library will keep a listing of all your Cascading Style Sheet files.  Click on the CSS tab on the left side of the StyleSheet Maker++ to active the CSS Library.

	• The CSS Library shows a listing of your .css files.  Right click on a file to and select a way to open it.  • The HTML code of the .css file selected above is displayed here.

When you right click on a CSS file name, a popup menu appears.  From here, you can open a CSS file in three different ways:

•	Open File:  Clearly, it will do just that – open the file.

•	Insert Into Current Document:  This will insert the CSS file into the currently active document.  This is helpful if you have open a webpage and you want to insert your style sheet file.

•	Open in New Window:  A new window will open for your CSS file.


Overview
   Overview of the StyleSheet Maker++

CoffeeCup StyleSheet Maker++ allows you to construct full-featured cascading style sheets, giving you full control of text placement, fonts, backgrounds, and more. You just have to change the tag definitions in the CSS file, then use it with each webpage where it will look to the CSS file to reference how to set up the style sheet attributes.  You'll also be able to overlap text, create links that aren't underlined, place image backgrounds in tables, and even create your own tags with the functions you assign them. The StyleSheet Maker++ lets you do all of these potentially confusing things through a simple interface and a Tutorial Wizard to help get you started. You select tags from a menu of 50, and manipulate them using font styles and colors, images, background colors, alignment, margins, padding, and borders. There's one-click access to previewing your page in a browser, so you can get a sense of what you're doing without even saving your work. This latest version offers a revised interface and new features that include an easy access File Control tab, CSS Library , and Dynamic HTML Snipplets .

Related Topics:

   What is a Style Sheet?

   Getting Started with CSS


Parent HTML Tag

The HTML Tag such as <BODY> that controls the overall text of the style sheet


Sample

BODY

     font-family: Arial;

     font-size: 14pt;

     color: #FF00FF;

     text-indent: 10pt;

* In this style sheet example, anything placed in the <BODY> tag will have Arial font with a size of 14 pt, it will be colored #FF00FF (hexidecimal for the color violet), and will be indented 10pt to the right.


   Printing

How to Print

  To print out your style sheet, all you need to do is click on the Print icon.

The CoffeeCup StyleSheet Maker++ will automatically find your default printer and print out the style sheet you are working on.


   Preferences

  You can set your StyleSheet Maker++ preferences by clicking on the Preferences button or finding it in the tools menu.  Change any of the settings in the popup Preferences window to suit your needs.

•	General:  Check/uncheck  word wrap

•	Testing:  Choose a Web Browser for testing externally.  Click on the folder icon to locate a browser.

•	Appearance:  In this tab you can select the editor’s background color, font, and font size.  You can also check/uncheck your desire to show the background image logo.


   Resources at CoffeeCup Software

Additional References Available at the Coffeecup Bookstore!

Visit http://www.coffeecup.com/bookstore

For Books on HTML, CGI, Javascript, etc.

Website Hosting

Need a place to host your site?

http://www.coffeecup.com/hosting.html