Puntos a tocar:
- ¿Que es?
- ¿Como se hace un css?
- ¿Cual es la estructura de un archivo CSS?
- ¿Como uso los selectores?
- ¿Como es la sintaxis?
¿Que es?
Comencemos por aprender para que sirven las llamadas CSS(Hojas de Estilo en Cascada). Cuando comenzamos a realizar un proyecto web, siempre tomamos en cuenta como sera el color de las letras, la estructura de la página, la imagen de fondo, el tamaño del titulo.
Los css es un documento que guarda información de como se presentará el contenido de un documento html en el navegador.
¿Como se hace un css?
Existen 2 caminos para aplicar las reglas de estilo de un css a un archivo de html o de xml:
1) Hoja de estilo externa: es una hoja de estilo que esta guardado en un archivo externo o diferente al html, es decir, el codigo de la css esta un archivo de extension .css. Esta es la mejor manera de trabajar con css, dado que cuando se quieren realizar cambios sobre la hoja de estilo, solo se aplican sobre el archivo css, y de esta manera todos los otros archivos html que hacen uso del mismo cambian automaticamente su presentación.
Para hacer un archivo .css, tienes que abrir el blog de notas(windows), kate, kwriter(Ubuntu) y guardalo con extension .css
o en caso de usar Dreamweaver o algun framework parecido simplemente selecciona la opción de crear un archivo .css
2)Hoja de estilo interna: es una hoja de estilo que está incrustada dentro de un documento HTML. Este codigo iría dentro de las etiquetas head y style, como se ve a continuación:
<head>
<style type="text/css">
<!--
h1 {color: #00CC00}
-->
</style>
</head>
El beneficio es el mismo que con un archivo .css separado, dado que la presentacion cambia de acuerdo a las reglas que se definan en la hoja de estilo. Pero la deficiencia esta en que, si estas realizando un proyecto web, cada vez que cambies algo en los estandares de un solo archivo html, tendrías que cambiarlas en todos los demás archivos html.
¿Cual es la estructura de un archivo CSS?
Las hojas de estilo están compuestas por una o más de esas reglas aplicadas a un documento HTML o XML.
Cada una de las reglas tiene dos partes, un selector y la declaración. A su vez la declaración está compuesta por una propiedad y el valor que se le asigne.
Ejemplo:
h1 {color: red;}
h1 es el selector.
{color: red;} es la declaración donde color: es una propiedad y red es el valor asignado.
¿Como uso los selectores?
Los selectores son las etiquetas predefinidas de HTML a las cuales queremos aplicarle un estilo. Además podemos crear nuestras propias etiquetas personalizadas. A continuación se nombran los diferentes tipos de selectores que existen:
1)Selectores de etiquetas HTML predefinidas: se utilizan escribiendo el nombre de la etiqueta a la que le aplicaremos el estilo. Ejemplo : body, p, b, h1, entre otras.
2)Los selectores de identificador: se usan para aplicar estilos a etiquetas personalizadas por nosotros. Estas siempre comienzan con un #.
Ejemplo:
#tituloprincipal {
font-family:arial;
font-size: 12px;
color: blue; }
3) Las Clases: son etiquetas parecidas a las anteriores, sirven para aplicar estilos a etiquetas personalizadas, pero estas comienzan con un punto (.).
Ejemplo:
.tituloprincipal {
font-family:arial;
font-size: 12px;
color: blue; }
¿Como es la sintaxis?
La sintaxis es tal como colocamos en los ejemplos anteriores:
1) Se define la etiqueta(predefinida o personalizada).
2) Se abre la { .
3) Se empiezan a colocar los atributos, seguidos de dos puntos ":" y luego el valor seguido de punto y coma ";".
4) Luego que tenemos los atributos con sus valores asignados, estan pueden ir separandas con un espacio o un salto de linea.
5) Se cierra la definición con un } .
Se pueden tener cuantos atributos se quiera.
Aqui mostramos 2 etiquetas personalizadas:
.tituloprincipal { font-family:arial; font-size: 12px; color: blue; }
.tituloprincipal2 {
font-family:arial;
color: blue; }
Actualizado : 20/09/08