This tutorial shows you how to create and edit a style sheet using the Cascading Style Sheet resource panel. Following the steps below you will create a new style sheet, link it to a document and then define a few styles.
Assuming you have started HotDog, close all the open documents.
From the Window menu, select "Close All".
Now to start afresh, create a new document by doing one of the following:
Press <CTRL> + N.
Click the
button on the "File" toolbar.
Add the following text to your document, between the BODY tags:
<H1> This is My Main Heading </H1>
<H2> This is My Secondary Heading </H2>
<H3> This is My Tertiary Heading </H3>
<P> This is a simple paragraph of text </P>
<P> A link to <A HREF="http://www.sausagetools.com">Sausage Software</A></P>
Save your document:
From the File menu, click "Save As..."
Use the Save As dialog to navigate to the "HTMLFiles" directory (under the HotDog6 directory).
In the "File Name" box enter the name "StyleSheetDemo".
Click "Save".
The Cascading Style Sheet resource panel helps you create and control style sheets. To open it:
From the View menu, select the "Resource Manager" sub-menu.
From the Resource Manager sub-menu, select "Cascading Style Sheets".
Firstly we will create a new style sheet by doing one of the following:
Click the button.
Right click in the Cascading Style Sheet resource panel and select "Create Style Sheet".
After doing this a prompt will appear asking you to specify a name for your new style sheet.
Enter the text "Demo1" into the "Create New CSS File" dialog.
Notice that the Cascading Style Sheet Resource Manager now lists "Demo1.css" under "HotDog6 Default Style Sheets". Before adding any style definitions to this style sheet, let's link the style sheet to your new document "StyleSheetDemo.HTML".
Your style sheet will contain instructions for the browser, telling it how to render your different headings. However, you first of all must tell the browser where the style sheet is stored. This is known as linking a style sheet to your document.
To link the style sheet "demo1.css" to your new document "StyleSheetDemo.HTML" follow the steps below:
In the Cascading Style Sheet Resource Manager, right click on the style sheet "demo1.css".
Select "Apply Style To Documents(s)...".
This opens the "Apply Style Sheet" window.
In the "Apply Style Sheet" window select "Link docs. (or a website) to selected style sheet".
Click "Next".
In the drop down list select "Currently Selected HTML Document".
Click "Finish".
Notice that HotDog has inserted the following code into your document:
<LINK REL="STYLESHEET" HREF="..\css\demo1.css" TYPE="text/css" >
This tells the browser where your style sheet is stored.
Try previewing your document (Press F9).
You will notice that your document appears as normal. This is because although the style sheet is linked to your document, it does not yet contain any styles. Step 5 will show you how to add a style definition to a style sheet.
The first thing we are going to do is change the appearance of the H1 tag.
In the Cascading Style Sheet resource panel, right click on the style sheet "demo1.css".
Select "Create Style".
The H1 tag is classified as a "paragraph" tag, as headings share a similar set of properties to paragraphs in terms of the type of effects that you can apply to them. Therefore, from the "Style Type" list, select "Paragraph Style".
Click "Next".
A list of a HTML tags is shown, click "Heading 1" and then click "Finish".
Notice that in the Cascading Style Sheet resource panel, under the "demo1.css" style sheet item, a new style definition item appears with the name "H1". The Style Editor window now opens. Read on for more details.
The Style Editor is designed to help you visually create and edit styles.
Although the Style Editor screen looks complicated, it is very easy to use. All you need to do is select the options that describe how you want text to appear when the tag that you're adding a style to is used in a HTML document.
The preview window in the bottom right hand corner of the Style Editor shows how your style definitions will affect text in a document when that text is surrounded by the tags that you are adding a style definition for.
The examples below are just some of the things you can do with styles. Feel free to experiment!
In the left hand panel of the Style Editor, click on the "Font" item. Doing this causes a range of options to appear in the right hand side of the Style Editor. These particular options control the attributes of the font that text will appear in if it is surrounded by H1 tags.
Under "Text Color" select "red".
Under "Size" select "Enter Number". This allows you to specify a size for the text.
Enter the number "10" into the "Size" field.
Select "mm" from the size units just to the right of the "Size" field.
Notice how the preview window within the Style Editor updates to show how the options you have selected will affect text when it is surrounded by H1 tags.
Click on the "Face" drop down list in the style editor screen.
Select the option "Comic Sans MS" from the drop down list.
NOTE |
Note, by clicking the |
Click on the "Style" drop down list (NOTE: here the word "style" refers to a type of text effect, not a "style sheet") .
Select "italic" from the list of options in the drop-down list.
From the left hand panel of the Style Editor screen, click on the "Paragraph" item. All the options that affect the paragraph positioning of your tag will appear in the right hand side of the Style Editor.
At the top of the Style Editor screen, within the "Text Alignment" box, click on the "center" button.
From the left hand panel of the Style Editor screen, click on the "Border" item. All the options that affect the borders of your tag will appear in the right hand side of the Style Editor.
Use the drop down list boxes to create the borders you want. A preview of your changes will appear in the preview screen in the bottom right hand corner of the Style Editor screen.
From the left hand panel of the Style Editor, click on the "Background" item. All the options that affect the background of your tag will appear in the right hand side of the Style Editor.
Click on the color drop down list box and select a background color for your text.
Click on the "OK" button in the Style Editor screen to save the changes you have made to your style definition for the H1 tag.
The "HOVER" pseudo-class lets you make links that behave in a special way when a user places their mouse over a link. For example, place your mouse over here.
You are now going to create this effect using style sheets.
Add the following HTML text between the body tags of your stylesheetdemo.HTML document:
<A HREF="http://www.sausagetools.com">Test Link To Sausage </A>
Now preview your document (Press F9) - this preview will show how a link usually appears by default.
The first thing to do is to remove the default underline that appears under links. To do this we will add a style to the A tag.
In the Cascading Style Sheet Resource Manager, right click on the style sheet "demo1.css".
Select "Create Style".
In the "Create Style" dialog, select "Character Style".
Click "Anchor (Hyperlinks)".
Click "Finish".
In the Style Editor window that appears, make sure that you are
looking at the "Font" options (click on the "Font"
item in the left hand panel), and then within these options, click .
Click "OK".
Preview your document once more - this time the link will appear with no underline.
Now we are going to define the "HOVER" Pseudo class - this allows us to define the style for the link when the mouse is over it.
In the Cascading Style Sheet Resource Manager, right click on the style sheet "demo1.css".
Select "Create Style".
In the "Create Style" dialog, select "Character Style".
Click "Next".
Click "Anchor (Hyperlinks)".
Click "Advanced".
On the screen that appears, click the "Pseudo Class" check box. This will enable the "Pseudo Class" drop down list. Select the "HOVER" option from this drop down list.
Click "Finish".
The Style Editor window now opens - this style will define how the link appears when the user moves his or her mouse over your links.
In the "Style Editor" window, under "Font", click .
Click "OK".
Now preview your document once more (press F9) - when you move your mouse over the link you will notice that it becomes underlined. Try experimenting with different font styles, colors and sizes.