Introducción al CSS

Introducción al CSS
Comienza a etudiar CSS hoy mismo con mucha información y muchos ejemplos.

¿Qué es CSS?
CSS (Cascading Style Sheets - Hojas de Estilo en Cascada), son un mecanismo simple que describe como se va a presentar un documento en la pantalla, en un dispositivo de sonido,como se va a imprimir, en un dispositivo braille, aparatos moviles, etc.

CSS nos permite posicionar el contenido,diseñar tablas, definir caraterísticas para sitios en diferentes idiomas y propiedades relacionadas con la comunicación del usuario.

CSS nos ayuda a separar el contenido de la presentación.

CSS nos permite controlar el estilo y el formato de múltiples páginas Web a la vez.

Conocimientos previos que debes poseer.
Antes de comenzar con este tutorial es recomendable tener conocimientos básicos deHTML/XHTML.

Si deseas estudiar HTML, diríjete al tutorial de HTML.

¿Por qué trabajar con Hojas de Estilo?
Las hojas de estilo nos ahorran mucho trabajo.
La manera correcta de trabajar es separando el contenido de cada página, del diseño de la misma.

Normalmente los estilos son guardados en un archivo externo con la extensión ".css".
Este archivo le permite hacer los cambios de apariencia ydisposición de los elementos en todas las páginas de su sitio Web, con tan solo editar un solo documento CSS.


La sintaxis de CSS
Comenzamos con la sintaxis básica de CSS y como agregar un comentario.

La estructura de CSS
CSS funciona a base de reglas.

Cada regla está compuesta por un selector y la declaración.

La declaración a su vez esta compuesta por una propiedad y su valor.

La declaracióndebe estar definida entre llaves({...})

Sintaxis
selector{propiedad:valor}

Veamos un ejemplo donde el selector p indica que todos los elementos p del documento HTML serán afectados por la declaración cuya propiedad es color y su valor es blue.
p{color:blue}

Si el valor está compuesto por varias palabras, debemos definirlo entre comillas.
p{font-family:"Times New Roman"}

Si deseas especificarmás de una propiedad, deberás separarlas con un punto y coma(;).
h1{color:red; text-align:center}

Para definir los estilos de forma más clara y fácil de leer, puedes describir cada propiedad en diferentes líneas.
p
{
color:red;
text-align:center;
}

Si deseas definir una misma propiedad para varios selectores, solo debe agruparlos separándolos con una coma(,)
p, h1, h2, h3
{
color:blue;font-family:Arial;
}

El selector class
Con el selector class se pueden definir diferentes estilos para un mismo elemento HTML.
Por ejemplo el elemento p puede ser de color azul o de color rojo. El valor del selector class debe ir antepuesto por un punto (.)
Sintaxis
p.azul {color:blue}
p.rojo {color:red}

Ejemplo

Y así se vería en el documento HTML.
Código





Este texto es de color azul

Este texto es de color rojo

Resultado
Este texto es de color azul
Este texto es de color rojo
Con el selector class también podemos definir diferentes estilos para cualquier elemento HTML.
Por ejemplo definimos un class rojo y uno azul.
Sintaxis
.azul {color:blue}.rojo {color:red}

Ejemplo

Por ejemplo definimos un class rojo y lo utilizamos en dos ocasiones.
Código





Este título es de color rojo
Este texto es de color azul

Y este texto es de color rojo

Resultado
Este título es de color rojo
Este texto es de colorazul
Y este texto es de color rojo

El selector ID
El selector id se utiliza para definir un atributo el cual tiene un valor único en todo el documento. Hacemos referencia a él anteponiendo el símbolo "#".
Sintaxis
#centrado {text-align:center} /* afecta a cualquier elemento que lo use */
h3#subrayado {text-decoration:underline} /* afecta solo al elemento h3 */

Ejemplo

Definimos un id...

Leer documento completo

Regístrate para leer el documento completo.