Define your own styles

We will create and define a style appropriate to the work we want done.

We saw the previous tutorials, how to apply a style to a certain label and that the default would apply these same labels. We did it with the links, and text, but we could do with them all, but of course, we saw that in each paragraph, would have the same style, all links have the same decoration, text, etc. ..

So while this has the advantage that will be applied automatically when inserting the text, or links, it is best to create a style and define it as we wish and apply ourselves.

Htm document will open a new (all white) and save with a name:

* Note: Normally this is how we will start designing a website, so this document, I'd keep the name 'plantilladisenio' for example. Or anyone else who later will become the real Web template.

Activate the window pane style / CSS Styles

Click the icon to create new rule:

1

We scored Advanced and select the body tags, td

* Note: we can put several on each style rule, separated by commas. We define in this rule, the font, size, color .. and will automatically apply to all documents that we make in this style.

Remember, that this style sheet, we have linked with the document which later (in theory, to build a website) will do the template. ;)

We begin with:

2

Here we will ask that we keep:

3

You can have in one place more than one style sheet, just enough to remember and know what documents is linked with one and with which other or others ;)

We define the font, the color of this, the size .. etc:

4

Now the margins of the document. It is important to have all the space possible to start designing. So will 0 to all:

6

We accept and all these values ​​are automatically applied each time, once turned into a real template, open a new document. Create another style rule, only to the body tag:

body

Fund Category:

5

we set the background color and accept.

To define the styles of links, we proceed similarly as we'd done in the previous tutorial.

* Note: And I tell you a trick that I do and it saves me time.

I usually define all these styles when I create a new document from the Property Inspector, As you recall, these styles are inserted into the same document code. Thus, copy, delete the labels:

<stylo> and </ stylo>.

I think a new cascading style sheet, which do not define any style, once we hit open the document you create in htm, from the Property Inspector. I keep the blade and I find it faster and more comfortable ;)

But this is a trick, what he would do so just as I indicated earlier. This done, we will begin to create styles that we will be inserting and suits us.

New style rule:

7

note that the style name is preceded by a period (.) and then I put a name to recognize later. I define the background color:

8

and accept.

el ancho, la alineación: Htm In the document, create a new table, in which, as usual we set the width, alignment:

9

We place the mouse cursor in the table and click on the label that appears just above the Inspector

10

stay well is selected and we will apply the style we created earlier:

11

we see that the background color of the table will change to our choice.

In this way we will apply the styles from now. To remove a style, you see that the first option will always be 'No' because in the same way that we have applied before, select None and go away now, or press any other change of style to the bottom of the table.

Similarly we can define the bottom of a td. First, from the Inspector, we define the alignment of the cell, and New Style Rule / Category fund:

12

And given a fund for the cell:

13

To apply a cell style, the first click on the label, as with the table:

14

Insert a background image:

y desde examinar, busco una imagen en la carpeta imágenes del Sitio en el cual estoy trabajando: New style rule: as I put the style name. Fondotabla2 and from review, I look a picture in the Pictures folder in the Site I'm working on:

16

We create the style now. Fondoimgtd and put these values:

17

See here example

We can make different combinations with these values, so try and investigate until you find what you like is worth more? Another way to apply styles are:

15

Mmm .... you find the same thing now would be easier to create the portal not? Inserting the colors of the funds of the tables and cells, with style, right?

For if chiquis, but what we learned then .. but should cost us ... we would have lost ;) And now all that will emerge and we will be much easier

And that I skip it all directly from source eh? : P We save the style sheet and climbed to the server along with other documents and images.

ni espacios en blanco . Remember that the name of the styles, can be anything, but it must be a period (.) At the beginning of them, have no special characters or spaces.

Finally, in column of panels that are left we see reflected the styles that we create in the order that we are doing:

styles

To alter them, select one and click the pencil icon, then the window appears where you can change values. Automatically be applied, ie we can change the background colors of the tables, cells, text formatting, text color, etc ... to save the document styles, upload it and all will have new styles page ;)

Answer