Proyecto: CSS: estilos básicos

Resumen

Aprender el lenguaje de estilos CSS. Conocer algunas herramientas que ayudan a escribir CSS correcto y compatible con distintos nave­gadores.

Contenido

  1. Objetivos
  2. ¿Qué tengo que hacer?
  3. ¿Cómo lo hago?
  4. Recomendaciones
  5. Recursos

Objetivos


¿Qué tengo que hacer?

En esta práctica tienes que crear el estilo visual de las páginas web de la práctica anterior y del resto de páginas que harás en las próximas prácticas. Como mínimo, tienes que emplear las siguientes propiedades de CSS:

Además, define al menos un par clases para definir el estilo particular de algunos elementos, como por ejemplo, .anuncio para aplicarlo a un párrafo que define un anuncio o .conBorde para aplicarlo a aquellos elementos que tienen que aparecer con un borde.

Importante: en esta práctica no debes realizar la maquetación de la página, no debes definir el layout de la página. Eso lo harás en la siguiente práctica.


¿Cómo lo hago?

Para definir el estilo visual tienes que emplear el lenguaje de estilos CSS. No tienes que crear un fichero distinto para cada página, sino que el mismo fichero lo utilizarás en todas las páginas, a no ser que existan algunas páginas con estilos visuales muy diferentes (por ejemplo, la página de inicio, la página principal y el resto de páginas).

Tienes varias formas de crear una hoja de estilo CSS:

  1. Crear una hoja CSS desde cero: esto lo podrás hacer cuando ya tengas un conocimiento amplio del lenguaje CSS.
  2. Tomar un CSS como "inspiración" para crear un CSS propio. En este caso, es una buena práctica citar al autor de la o de las hojas CSS en que te has basado, pero si existen grandes diferencias no es del todo necesario. La cita la puedes indicar mediante un comentario en la misma hoja CSS.
  3. Adaptar una hoja CSS a la estructura de tu página o, al revés, adaptar la estructura de tu página a una hoja CSS. Cuando usas directamente el CSS de otra persona, primero tienes que consultar si es posible hacerlo, es decir, si el autor de la hoja CSS te da permiso. Lo normal es que te pida (y si no lo hace, hazlo) que cites claramente al autor del CSS en la página web, pero a veces con un simple comentario en la misma hoja CSS puede ser suficiente.

Si quieres escribir directamente el código CSS, cualquier editor de texto sencillo como el Bloc de notas es suficiente. Sin embargo, puedes emplear un programa como Notepad++, que posee algunas características que ayudan a escribir el código, como la sintaxis coloreada o la función de autocompletado (pulsa Ctrl+Espacio).

Si prefieres emplear una herramienta que te permita crear un CSS de forma visual, emplea EclipseStyle, que evita tener que conocer las propiedades y valores de CSS.

Para indicar que se está usando un fichero CSS en una página web se emplea la etiqueta <link />. Es una misma página web se pueden indicar varios ficheros CSS que se combinan todos ellos o también se puede indicar de forma que definan estilos alternativos. Por ejemplo, en el siguiente código se define un estilo CSS que se debe emplear cuando se imprima una página web (print) y un estilo que se debe emplear en el resto de casos:

<link rel="stylesheet" type="text/css" href="home.css" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

Recomendaciones

El estilo que definas no debe ser muy simple (no vale con cambiar el color de fondo de la página y definir un estilo para el texto), pero tampoco es necesario que sea muy complejo. Con unas pocas reglas de CSS bien elegidas se puede lograr un estilo visual impactante.

En general, se recomienda que como mínimo se utilicen tres colores diferentes (y suele ser lo suficiente en la mayoría de los casos) y no más de seis.

En general, se recomienda que se utilicen dos tipos de letra (un tipo de letra para los títulos y otro para el contenido principal) y como máximo tres (un tipo de letra para contenido adicional, como puede ser una barra lateral).

Una mala práctica es definir múltiples clases (class) e identificadores (id). Siempre que sea posible, emplea selectores simples que hagan referencia a elementos de HTML.

Recuerda que hay propiedades que se heredan, por lo que no es necesario definirlas para todos los elementos, sino que si se define en un elemento padre, todos sus hijos la tomarán. Por ejemplo, para aplicar un mismo estilo de texto en toda una página web, lo más sencillo es definirlo en el elemento html o body.

Un fichero CSS puede llegar a tener cientos o incluso miles de líneas, por lo que pueden aparecer problemas importantes:

Para evitar estos problemas, es necesario organizar un fichero CSS de alguna forma. Cada uno tiene que desarrollar su estilo propio, con el que se sienta más a gusto. Algunas posibilidades son:

Utiliza los comentarios de CSS /* ... */ para separar las diferentes partes de un CSS y para desactivar ciertas propiedades cuando quieras realizar pruebas.


Recursos

¿Cómo se escribe una regla en CSS? ¿Qué propiedades y valores existen en CSS? ¿Cómo se selecciona un elemento de una página web para aplicarle una regla de CSS?

¿Cómo puedo saber que el código CSS que he escrito es correcto?

¿Cómo se representan los colores en CSS? Para trabajar con los colores necesitas conocer la codificación RGB (red, green, blue):

¿Qué combinaciones de colores son correctas? Los colores armónicos son aquellos que funcionan bien juntos, es decir, que producen un esquema de color atractivo a la vista. Algunas páginas donde puedes encontrar combinaciones de colores armónicos:

¿Existen plantillas de CSS que pueda emplear en mi sitio web? Existen multitud de sitios web donde se pueden encontrar plantillas gratuitas y de pago. Algunos sitios que ofrecen plantillas gratuitas son:

¿Existe alguna herramienta que me pueda ayudar a escribir el código CSS?