oletusWEBos.es - Lecciones paso a paso para crear tu web. Tutoriales de Dreamweaver, HTML y CSS

Curso CSS - Lección 2: Sintaxis de CSS

En esta lección vamos a aprender a crear nuestra primera hoja de estilos, como ya te dije anteriormente si estas familiarizado con el código HTML te resultará todo mucho más sencillo.

Sintaxis básica de CSS

Imaginate que estas construyendo una web y has decidido que el color de fondo de dicha web sea azul claro:

El código HTML a insertar en tu página sería este:

Ejemplo 1:

Para lograr el mismo resultado usando CSS sería así:

body {background-color: #58ACFA;}

Como te habrás dado cuenta el codigo usado en CSS resulta casi idéntico para conseguir el mismo resultado.

Entonces la sintaxis básica de CSS sería:

Selector: Indica a qué etiqueta(s) HTML le aplicamos la propiedad, en nuestro caso a "body".
Propiedad: Nos indica el efecto a aplicar al contenido del selector, en nuestro caso aplicaremos color de fondo "background-color".
Valor: Nos indica el valor que daremos a la propiedad, en nuestro caso "#58ACFA".
Ejemplo visual: Selector {Propiedad: Valor;} = body {background-color: #58ACFA;}

¿Donde inserto el código CSS?

Hay tres formas de aplicar el código CSS a un documento HTML: En línea, interno y externo. Pero nosotros nos vamos a centrar en el metodo externo ya que es el que más ventajas ofrece y el que la mayoría de los webmaster usa en la actualidad.

Básicamente el metodo externo consiste en enlazar todos los documentos HTML de un sitio web con una hoja de estilos externa. La hoja de estilos externa no deja de ser un fichero de texto con la extensión .css .

oletusWEBos.es - Curso CSS

El la captura de arriva observa como nuestra hoja de estilos la hemos nombrado como "estilo.css", tu puedes nombrarla como quieras pero siempre con la extensión .css

Ahora para vincular los documentos HTML con nuestra hoja de estilos debemos poner el siguiente código en la cabezera de nuestras páginas.

Ejemplo 2:

<html>

<head>

<title>Tu título</title>

</head>

<body>

</body>

</html>

Con esta técnica podemos ahorrarnos mucho trabajo por que si vinculas todas tus páginas de tu sitio con una hoja de estilos CSS podras cambiar por ejemplo el color de fondo, o el tipo y tamaño del texto en un par de minutos... esto es e agradecer cuando un sitio web tiene como oletusWEBos.es más de 100 páginas. Prueba a cambiarlo a mano verás que gracia te hace jeje.

Te recuerdo que puedes comentarnos tus dudas en el Foro OTW

Quiero aprender más!!!

Avanzar a Lección 3: Fondos y colores
Retroceder a Lección 1: ¿Qué es CSS?

Menú

Indice del Curso

Design By: JTole®