¿Qué es CSS?

CSS son un número de reglas de formato que determinan la apariencia de una página web.

Cuando usamos CSS styles para el diseño de nuestra página, el contenido de la página está separada del diseño de la página.
El contenido de nuestra página, esos son los textos, imagenes, tablas, formas, etc., recaen en el código HTML o en otra parte (usualmente en la parte superior) del HTML (interno), mientras que las reglas de CSS están localizados en otro archivo. (externo).

Puedes también usar ambos tanto interno como externamente.
Si por alguna razón ambos estilos CSS están en conflicto, por ejemplo la hoja de estilo interna dice que el color de fondo debe ser verde y la externa dice amarillo, entonces la hoja de estilo interna es aplicada.

Usando reglas CSS nos dan dos ventajas:

1. no tendrás que repetir algún cambio, tu haces la apariencia de tu página, para cada una. Al menos no cuando trabajas con archivos externos CSS.
2. separando los contenidos de la página con un diseño de la página, da un código HTML más simple, el cual dirige al tiempo de carga más corto en el navegador.

Usando las reglas CSS tenemos el control sobre un (gran) número de propiedades de texto, color de fondos, color de ligas, posicionamiento de elementos y mucho más.

Es imposible discutir todas las posibilidades del CSS en éste curso, pero éste curso nos irá dando ayuda.
Para aquellos de ustedes que quieran saber más acerca de los estilos CSS, pueden Googlear en éste tema.

 

Internal CSS

Para crear una página con CSS interno primero abre ésta página.
Haz click en “Modificar” en la barra menu y selecciona “Propiedades de Página” en el menu desplegable.
Esto abre las “Propiedades de página” en una ventana de diálogo.
En la parte izquierda de la ventana de diálogo, tenemos diferentes categorías en el lado derecho, tenemos las configuraciones para las categorías seleccionadas en el lado izquierdo.

Por ejemplo, en la categoría “Aspecto”, podemos ajustar la fuente a usar en ésta página, color de texto, tamaño de texto, etc.
Tenemos la categoría “Vínculos”, donde introducimos las configuraciones para desplegar los vínculos.

En la categoría “Encabezados”, introducimos las configuraciones para desplegar los encabezados usados en ésta página.

Si no sabes que son los “encabezados”, ellos están en la “Ventana Propiedades”, bajo la caja de “Formato”.

Entonces escogiendo la categoría “Encabezados”, podemos cambiar por defecto las configuraciones de esos encabezados diferentes.

 

Las dos categorías restantes tienen poco que ver con el diseño de la página. La única cosa que hay que decir de “Título/Codificación es que tiene que ver con el tipo de código y la categoría “Imagen de Rastreo” es usada como una línea de guía cuando se diseña la página.

Continuamos con la categoría “Aspecto”.
En la parte superior de la caja escoges haciendo click en la flecha que apunta hacia abajo, la fuente a usar en ésta página. En este caso yo escojo la fuente Verdana. Escojo tamaño de fuente de 12 pixeles, para el color de texto, escojo azul. Y para el color de fondo escojo un color khaki.
Puedes customizar colores haciendo click en el seleccionador de color o escribiendo el código HEX, éste es un código de color de Internet, en la caja de texto. Introduce el código de color con un número (#), entonces evitarás problemas en el navegador.
Haz click en el botón Aceptar cuando termines.

Con todo ésto ajustado, veamos que se ha agregado de HTML en ésta página. Selecciona la pestaña “Código para ver el documento.

Como puedes ver en la imagen de abajo, un estilo CSS interno está añadido en la parte superior de la página, que incluye cuatro opciones que acabamos de ajustar.

Un estilo CSS es clasificado de acuerdo de las reglas CSS o está compuesto de distintas reglas. Más acerca de las reglas CSS en la siguiente lección.

Cuando desplegamos nuestro documento de regreso en el ‘Draft’, vemos los siguiente:
el color de fondo es un color khaki, el texto es Verdana de 12 pixeles de ancho y el color es azul.

Ahora veamos que podemos hacer con la categoría “Vínculos”.
Reabre el diálogo de “Propiedades de Página” y escoge la categoría “Vínculos”.
En la parte superior de la caja podemos cambiar la fuente de los vínculos.
En la segunda caja, podemos ajustar el tamaño.
Y tenemos el color en “Color de vínculos”, “Vínculos Visitados”, “Vínculos de Sustitución” y los “Vínculos Activos”.

El primero “Color de Vínculo”, determina el color del vínculo.
El segundo “Vínculos Visitados”, determina el color del vínculo que ha sido clickeado por el visitante.
El tercero “”Vínculos de Sustitución” determina el color del vínculo para la sustitución.
Y el cuarto, “Vínculos Activos”, determina el color del vínculo cuando el visitante está en la página.

Y el último es “Estilo Subrayado” es donde nosotros decidimos como queremos que esté subrayado el vínculo. Por defecto está ajustado a “Subrayar siempre”, pero tenemos la opción “Nunca subrayar”, “Mostrar subrayado solamente al situar cursor encima” o el “ocultar subrayado al situar cursor encima” para nuestro vínculo.

Haz click en Aceptar cuando termines.

Si notamos en el código fuente de nuestro documento, vemos que el estilo CSS ha sido actualizado.
Las cuatro nuevas reglas definidas están añadidas al estilo CSS.
a: link, a: visited, a: hover, a: active.

Cuando vemos una página en el navegador, hacemos click en la tecla F12 de nuestro teclado, vemos que varios estilos CSS han sido nuevamente creados a la fuerza.

Si queremos modificar uno o más estilos, tenemos varias opciones.
La primera es abrir otra vez la ventana “Propiedades de Página”.
La segunda forma es cambiar las propiedades en el código de nuestro documento.

Y la tercera es abrir el panel CSS y cambiar los estilos CSS.
Bajo la pestaña “Todo”, selecciona el estilo y cambia en las Propiedades ****” . Más de ésto en las siguientes lecciones.

 

 

Cursos

• Downloading iPad Apps
• Lesson 1: Introduction to Publisher
• Lesson 65: File Formats