Unit 4. Working with text (II)


CSS Styles (I)

In the Text menu, and then the Style option, there are a set of predefined styles that can be applied to the selected text.

You can define another set of styles, applicable to paragraphs or selected words. These new styles, called CSS Styles, are used to combine a set of the text attributes - they can be the colour or the size; so isn't necessary assign those atributtes one by one each time you want to repeat the assigning of these same values or other parts of the text. Many of these options can be used as well to define image attributes, other characteristics don't let you define HTML styles, like the background colour for the text, etc.

CSS styles are in automatically updating style sheets (also called Cascade style sheets) are used to combine a set of the text attributes, as for example the colour or the size, so it isn't necessary to assign these attributes one by one each time you want to repeat the asigning of these same values or other parts of the text. Many of these options can be used as well to define image attributes, other characteristics don't let you define HTML styles, like the background colour for the text, etc.

They even allow you to apply a style in all of the HTML labels of a same type, for example the A HREF label, which corresponds to hyperlinks. This way, all hyperlinks would acquire a defined appearance in this style.

A CSS style is no more than a set of format rules that controls the aspect of a web site's content. CSS styles give flexibility and control to the view you are looking for in a Page, from the exact position of the elements to the font designs and specified styles.

One of the big advantages of CSS styles is that they have a simply updating capacity; when you update a CSS style, the format of all the documents with that style are automatically updated.

The disadvantage of working with style sheets is that some browsers cannot support them, though these browsers are usually older versions, and so this will rarely happen.

With Dreamweaver MX 2004, the newest feature is that the characteristics we apply to a text automatically creates CSS styles, which are inlayed in the actual document's heading.

Lets see that:

To create a personalized CSS Style:

1. In the document, you select the text you want to apply the specific characteristics to.

2. In Properties inspector you have to modify all the text format properties, and establish the font attributes, and the paragraph you want.

Dreamweaver will automatically create a new style with the name Style1 or Style2 or Style3,... depending on the created names and styles.

It will appear as the name: Style1 in the Style window of properties panel.

You can also change the name of the style, it's preferable that the style has a name referring to the type of text to which it will be applied. To do this, we unfold the style list and select the Change name... option. A dialog window will appear to introduce the new name as the image below.

We then write the new name without blank spaces. In this case: redstyle.

When you click on OK, you will see a panel with the name Results. Close this window.

This way you can create a style and add it to a document.

Each new style that is created is added to the style list, and you can access them quickly through Text menu, and then the CSS Styles option.

In the Design panel you can verify that the new style has been automatically added.

 

Now, you have a paragraph in which the previous CSS style has been applied.

Class Style Text

In the Page's code HTML, the text is like this :

<head>

<style type="text/css">

<!--

.redstyle {

font-family: Arial, Helvetica, sans-serif;

font-size: 18px;

font-style: italic;

font-weight: bold;

color: #FF0000;

}

-->

</style>

</head>

 

<body>

<p class="redstyle">CSS style text</p>

 

To apply a personalized CSS Style:

In the document, select the text to which you want to apply the CSS style, or place the mouse insertion point in a paragraph to apply the style to the whole paragraph. If you select a text rank inside a paragraph, the CSS Style will only affect the selected rank.

In the Properties Inspector you select the style created by us from the list that appears when you unfold the Style window .

To practice, you can do Step by step exercise to Create a CSS style.



  Go to the previous page page Content  Go to the nex page  

Page 4.2

Legal warning: Authorised on-line use only. It is not allowed the use of these courses in companies or private teaching centres.
aulaClic. All rights reserved. Reproduction in any form whatsoever is prohibited.
November-2005.