Realice una investigacin relacionada con estilos y plantillas que utilizan CSS, para mejorar el

diseo de las aplicaciones web

El objetivo de esta investigacin independiente es que los estudiantes conozcan la nomenclatura que
utiliza CSS, para que entiendan los dos archivos que se incluyen en este apartado que sern
utilizados la siguiente clase.

CSS son las siglas de Cascading Style Sheets - Hojas de Estilo en Cascada CSS, es una tecnologa
que nos permite crear pginas web de una manera ms precisa y homognea. Gracias a las
CSS controlamos ms an los resultados finales de la pgina, pudiendo hacer muchas cosas que no se
podan hacer utilizando solamente HTML, como incluir mrgenes, tipos de letra, fondos, colores, etc.
Actualmente el tipo ms comn de hoja de estilo es la hoja de estilo en cascada (CSS) o Cascadind Style
Sheets.

Para qu sirve?
CSS es una especificacin desarrollada por el W3C (World Wide Web Consortium) para permitir la
separacin de los contenidos de los documentos escritos en HTML, XML, XHTML, SVG, o XUL de
la presentacin del documento con las hojas de estilo, incluyendo elementos tales como los colores,
fondos, mrgenes, bordes, tipos de letra..., modificando as la apariencia de una pgina web de una
forma ms sencilla, permitiendo a los desarrolladores controlar el estilo y formato de sus documentos.

Cmo funciona?
El lenguaje CSS se basa en una serie de reglas que rigen el estilo de los elementos en los documentos
estructurados, y que forman la sintaxis de las hojas de estilo. Cada regla consiste en un selector y una
declaracin, esta ltima va entre corchetes y consiste en una propiedad o atributo, y un valor separados
por dos puntos.

Tres tipos de estilos

La informacin CSS se puede proporcionar por varias fuentes, ya sea adjunto como un documento
por separado o incorporado en el documento HTML, y dentro de estas posibilidades destacan tres
formas de dar estilo a un documento web:

Hoja de Estilo Externa

La Hoja de Estilo Externa se almacena en un archivo diferente al del archivo con el cdigo HTML
al cal estar vinculado a travs del elemento link, que debe ir situado en la seccin head. Es la manera
de programar ms eficiente, ya que separa completamente las reglas de formato para la pgina HTML
de la estructura bsica de la pgina.
 Hoja de Estilo Interna
La Hoja de Estilo Interna est incorporada a un documento HTML, a travs del
elemento style dentro de la seccin head, consiguiendo de esta manera separar la informacin del
estilo del cdigo HTML.
Estilo en Lnea
El Estilo en Lnea sirve para insertar el lenguaje de estilo directamente dentro de la seccin body con
el elemento style. Sin embargo, este tipo de estilo no se recomienda pues se debe intentar siempre
separar el contenido de la presentacin.

La manera ms directa de aplicar estilos a los elementos de la pgina se hace a travs de la etiqueta
HTML: style.

<p style="color:blue;font-weight:bold">El prrafo saldr con color azul y en negrita</p>

El proceso para incluir estilos con un archivo externo es el siguiente:

Se crea un archivo con la declaracin de estilos: se trata de un archivo de texto normal, que
puede tener cualquier extensin, aunque le podemos asignar la extensin .css para saber de
qu tipo de archivo se trata. El texto que debemos incluir debe escribirse exclusivamente en
sintaxis CSS, que es un poco distinta de la sintaxis que utilizamos dentro del atributo style.
Sera errneo incluir cdigo HTML con etiquetas en este archivo. He aqu un ejemplo:

P{
font-size : 12pt;
font-family : arial,helvetica;
font-weight : normal;
}
H1 {
font-size : 36pt;
font-family : verdana,arial;
text-decoration : underline;
text-align : center;
background-color : Teal;
}
BODY {
background-color : #006600;
font-family : arial;
color : White;
}

Se enlaza la pgina web con la hoja de estilos: para ello se coloc la etiqueta <LINK> con
los atributos:

rel="STYLESHEET" indicando que el enlace es con una hoja de

estilo.
type="text/css" porque el archivo es de texto, en sintaxis CSS.
 href="estilos.css" indica el nombre del archivo fuente de los
estilos.
Que quedar de la siguiente forma:

<html>
<head>
<link rel="STYLESHEET" type="text/css" href="estilos.css">
<title>Pgina que lee estilos</title>
</head>
<body>
<h1>Pgina que lee estilos</h1>
<p>
Esta pgina tiene en la cabecera la etiqueta necesaria para enlazar con la hoja de estilos.
</p>
</body>
</html>

As pues, para indicar que en un documento HTML se quiere incluir un rasgo de estilo que est
incluido en una hoja de estilo, existen 3 formas diferentes:

Desde el atributo "style" de cada elemento: el estilo slo afectar al elemento al que est
asociado y tomar el diseo de la hoja de estilo marcada por defecto en el
atributo "content" del elemento "meta". Casi todos los elementos pertenecientes al cuerpo
(body) del documento pueden llevar este atributo. Por ejemplo, para sealar el tamao de
letra y el color del texto de un prrafo, escribiramos: <P style=font-size: 14 pt; color:
blue">Esta es una web sobre hipertexto.
Desde la cabecera del documento al que se apliquen las normas de estilo: se incluye el
elemento "style" dentro del elemento "head". Por ejemplo, <STYLE type="text/css"
[aqu se incluyen todas las normas de estilo que afectarn al documento]</STYLE>
Desde un documento aparte al que se hace referencia desde el elemento de la cabecera
"link" y su atributo de relacin "rel="stylesheet". Quedara de la siguiente manera: <LINK
rel=stylesheet">. Esta opcin es la ms adecuada si se van a utilizar las mismas normas de
estilo en varios documentos, puesto que nos evitamos repetir esa informacin y adems,
permite dar una uniformidad y coherencia al diseo. Adems, un cambio en la hoja de estilo
afectar a todos los documentos que la referencien, y as evitaremos tener que modificar los
documentos uno a uno.

Plantilla

selector: cadena de caracteres que identifica a qu elemento del lenguaje se aplica la regla.
 propiedad: un elemento del lenguaje CSS que representa una unidad estilstica como el
color (en la figura) o el interlineado. Hay unas cincuenta.
valor: el dato que indica la cantidad en la que se dimensiona la propiedad. ste depender
de la naturaleza de la sta.
declaracin: es un par propiedad-valor separado por dos puntos.,
regla: es la unidad bsica del CSS y se compone de selector ms declaracin. La
declaracin/es se enmarca entre llaves.
Una regla puede contener ms de una declaracin, las cuales iran separadas por punto y
coma:
p{
color: green;
font-size: 18pt;
}

Nomenclatura

Para usar el CSS adecuadamente, lo primero que debe saber es lo siguiente:

En CSS el orden en el que se colocan las instrucciones afecta el orden en el que se ejecutan;
En CSS se puede ser muy especfico de maneras muy sencillas, utilizando Id's y Clases.

Referencias
http://www.masadelante.com/faqs/css
http://www.hipertexto.info/documentos/css.htm

https://es.wikipedia.org/wiki/Hoja_de_estilos_en_cascada