Fast way to create and maintain your CSS files
Do you know that your JavaScript Editor is also a comprehensive Cascading Style Sheet - CSS File Editor?
CSS files allow you to define styles for all of the elements on your web pages, including your headings, tables, text, links, etc. The main advantage is that one single change to a particular style is immediately reflected on all the pages using it.
JavaScript Editor allows you to quickly define and edit your styles by using Code Templates.
All the CSS templates have the css prefix, and each one acts as a mini-wizard. For the full list, type css in your document and press Ctrl+Space.
Selecting the template you need allows you to quickly compose all the styles you need for your pages. This tutorial shows you how.
Creating a CSS file
 Select File / New (Ctrl+N) from the menu to create a blank document. Click on Save, select All Files as the document type, and save it as MyStyle.css
You are now ready to start adding styles to your stylesheet. Let's say that you need a table with 1-pixel border on 3 sides and the op side with no border. Please do the following:
Type css and press Ctrl+Space. Select css_class from the list of templates.
Name your class border3side and click OK. The program inserts the class code into your stylesheet:
.border3side{
}
The next step is to add properties to the border3side, one for each side:
Type css and press Ctrl+Space. Select css_border_side from the list of templates.
Select border-top for the border-side and none for the border-style, and press OK.
Repeat the last two steps for border-left, border-right and border-bottom, selecting solid as the border style, and the color of your choice for border-color. Your code should resemble the code below:
.border3side {
border-top: 1px none #003366;
border-right: 1px solid #003366;
border-bottom: 1px solid #003366;
border-left: 1px solid #003366;
}
Save the file. Your new style is ready to be used in a web page.
Linking your CSS file to your web page
Before using your new style, you have to link the .css file to the page using it:
To create a new web page, select File / New from Template / _Standard.htm, and save it as MyPage.htm in the same folder with MyStyle.css.
Place the cursor between the <head> .. </head> tags, type style and press Ctrl+Space. Select stylesheet_link.
Specify MyStyle.css for href. Your page should resemble the code below
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="MyStyle.css" />
</head>
<body bgcolor="#FFFFFF">
</body>
</html>
All the styles in the MyStyle.css file are now available to your web page.
Using different styles in your web pages
To see your style at work, add a table with the border3side class to the body of your page:
<table class="border3side">
<tr>
<td>AB</td>
<td>CD</td>
</tr>
<tr>
<td>EF</td>
<td>GH</td>
</tr>
</table>
... and you're done: you've created a new style, linked the stylesheet to your page and applied it to a table. Here is the end result:
Embedding styles into your web pages
Saving styles in .css files is a great way to make them available to all of your pages.
However, there will be cases when you want to apply a style inside one page only. In this case, more practical solution is to embed the style into the page.
To create a new web page, select File / New from Template / _Standard.htm, and save it as MyPage.htm.
Place the cursor between the <head> .. </head> tags, type style and press Ctrl+Space. Select style_CDATA. The stylesheet template in inserted.
<style type="text/css">
//<![CDATA[
//<!--
//-->
//]]>
</style>
You are now ready to add different styles to your page. In this case, you are not going to create a new class, but specify the style for the <h1> heading tag:
Type css_tag and press Ctrl+Space. Name your tag h1 and click OK.
Using the css code templates, add properties for font-family, font-size, and font-weight. Here is an example:
<style type="text/css">
//<![CDATA[
//<!--
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: bold;
}
//-->
//]]>
</style>
You've defined the style for the <h1> tag. Below is the example code for the entire page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
//<![CDATA[
//<!--
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: bold;
}
//-->
//]]>
</style>
</head>
<body bgcolor="#FFFFFF">
<h1>This heading uses 24-pixel bold Verdana!</h1>
</body>
</html>
Here is how the <h1> heading using this stile looks like:
This heading uses 24-pixel bold Verdana!
Experiment with other css templates to get familiar with them, you before you know it you'll be able to define any still you need in seconds.
Tip: CodeTemplates speed up your work tremendously. When you create styles you use regularly, do not forget to turn them into templates - ready to use with few keystrokes each time you need them, regardless of how complex they are.
|
|
