Unit 4.  Working with text


CSS Styles

In the Text menu, select 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 text attributes - they can be the color or the size; so isn't necessary to 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, or other characteristics that are not available from HTML tags, like the background color for the text, etc.

They even allow you to apply a style in all of the HTML labels of the 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, although these browsers are usually older versions, and so this will rarely happen.

The characteristics we apply to a text automatically creates CSS styles, which are inlayed in the actual document's heading.

Let's see that:

To create a personalized CSS Style:

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

2. In the Properties inspector, modify 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 previous 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 to the style to have a name referring to the type of text to which it will be applied. To do this, unfold the style list and select the Change name... option. A dialog window will appear to introduce the new name as the image below.

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

Click on OK, and 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 the Text menu, and then selecting the CSS Styles option.

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

 

 

If you want to learn more about the CSS panel click here .

 

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

Class Style Text

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

<head>

<style type="text/css">

<!--

.redstyle {

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

font-size: 18px;

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 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 select the style created by us from the list that appears when you unfold the Style field.

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

 

  Unit 4 Exercise

  Unit 4 Test

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

Page 4.2