Cascading styles, from now, css

The first thing is to have an idea, however vaguely that it is the style and that will serve us in designing Web pages. I copied part of an article that will give us an idea slightly, the author of that article is the Director of the page desarroWeb.com

We went in with the background of this technology, the reasons that have developed cascading style sheets, and objectives that seek to fulfill. The HTML language is limited when applying to a document form. This is because it was designed for other uses (mainly scientists), unlike the current, much larger. To solve these problems, designers have used techniques such as the use of transparent images to fit tables, use of labels that are not standard HTML and others. These "traps" have often caused problems on pages when viewing on different platforms. In addition, designers have been frustrated by the difficulty that, even using these tricks, they were at the time of laying out the pages, since many of them were maquetando pages on paper, where the control over how the document is absolute. Finally, another precedent that has necessitated the development of this technology is that Web pages are mixed in your HTML document content with the necessary labels to shape. This has its drawbacks because reading HTML code lee heavy and difficult when looking for errors or debug pages. Although, from the point of view of the wealth of information and usefulness of the pages when storing their content is a big problem that these texts are mixed with embedded tags to shape these: it degrades their usefulness. Miguel Ángel Álvarez Report Director of DesarrolloWeb.com

There are several ways to use styles and although you may not know it, we've been

using them for some time, even here, we saw not long ago, wanting to put a

scroll with specific colors, an example of how to use them. And also often seen in

view source code in the mail from OE.

de los documentos y que tiene este aspecto: A code that appears in the Head of the documents and that looks like this:

> The label <style> with the parameter type = "text / css">

P

{

font-family: "Times New Roman", Times, serif;

font-size: 12px;

font-style: italic;

font-weight: bold;

text-transform: capitalize;

color: # CC3300;

}

Closing the tag as we already know:

</ Style>

P = a paragraph

Among key {}

instructions to be applied to the label <p>

This means that we will insert some text in a document posted:

This is an example of style, This is an example of style,

This is an example of style, This is an example of style,

This is an example of style, This is an example of style,

This is an example of style, This is an example of style,

: Selecting the text, go to the Property Inspector and Format:

convert all text in a paragraph. Automatically, the style will be applied to the text being as follows:

To be watching its operation, it is best that you should open a completely new document, no template or anything, a blank sheet total. Better not even focus ... and enter text. : Get the style that I put above and paste in the source code:

Enlarge

and convert your text in a paragraph. You see the result as you indicated in the catch. : You can to check the code to be changing colors, font size:

Color is now # 00A000 and 20px size (always put px or pt, px = pixels, pt = points)

This would create different styles and we would apply manually. But the Dream is a more convenient way to do it.

etc.. ) insertamos un texto cualquiera: Open a new document completely blank (or clean it once above) and trying not to insert any label (remember, <div> <span> etc. ..) insert some text:

From the main menu, go to Window / Style CSS:

In the right column opens a new window, that if we work on a document that has not yet linked a style sheet appears as follows:

Click the New icon to create a style:

And it opens a new window, which initially may take default and other selections marked and we are going to change this:

We will create the same style as we saw earlier:

And we accept. que esta exactamente igual que el que habíamos puesto manualmente. If, as I said, we have the text within a paragraph tag, and can be applied automatically check the source code is exactly like the one we put manually.

, pero todas quedaría igual, es decir, todos los párrafos serian igual, si lo aplicásemos a <td> todas las celdas tendrían el mismo color de fondo , si lo habíamos puesto, mismo color de texto …etc, etc. We could create styles for all tags, but all remain the same, ie, all paragraphs would like, if we apply to <td> all cells have the same background color, if you had set, same color text ... etc. etc.. We would be condemning the labels.

, que quizás si queramos hacerlo, pero si es para una misma pagina, seguro que habrá muchos que serán básicos y ya los tendríamos en el primero y no habría necesidad de volver a crearlos. Also, in this way, only apply to the document we're creating at the time, so in the next, we will create other colors, maybe if we want to, but if for the same page, sure there are many to be basic and would in the first and no need to recreate them.

So if it is automatically applied, and we save a great job in the end we will be very profitable

Therefore, we will continue in the next tutorial and a final shape that we will see to apply to an entire staff of a Web page or any other document that we need.