Codificación aprenderaprogramar.com: CU01003D
DEFINICIÓN O CONCEPTO DE LENGUAJE CSS
CSS es un lenguaje utilizado en la presentación de documentos HTML. Un documento HTML viene siendo coloquialmente “una página web”. Así, podemos decir que el lenguaje CSS sirve para dotar de presentación y aspecto, de “estilo”, a una página web. Este lenguaje es principalmente utilizado por parte de diseñadores y programadores web para elegir multitud de opciones de presentación como colores, tipos y tamaños de letra, imágenes de fondo, bordes, etc.
La filosofía de CSS se basa en intentar separar lo que es la estructura o contenido y configuración básica del documento HTML de su presentación. Por decirlo de alguna manera: la página web sería lo que hay debajo (el contenido) y CSS sería “un cristal de color” que hace que el contenido se vea de una forma u otra. Usando esta filosofía, resulta muy fácil cambiarle el aspecto a una página web: basta con cambiar “el cristal” que tiene delante. Piensa por ejemplo qué ocurre si tienes un libro de papel y lo miras a través de un cristal de color azul: que ves el libro azul. En cambio, si lo miras a través de un cristal amarillo, verás el libro amarillo. El libro (el contenido) es el mismo, pero lo puedes ver de distintas maneras. CSS permite cambiar el estilo a los contenidos de las páginas web.
Algunas opciones básicas del lenguaje CSS por ejemplo pueden ser el poder cambiar el color de algunas típicas etiquetas HTML como <H1> (h1 es una etiqueta en el lenguaje HTML destinada a mostrar un texto como encabezado, en tamaño grande). Pero también hay funciones algo más complejas, como introducir espaciado entre elementos <DIV> (div es una etiqueta HTML para identificar una determinada región o división de contenido dentro de una página web) o establecer imágenes de fondo, bordes redondeados, etc..
CSS es muy intuitivo y sencillo una vez se llega a aprender, ya que para su definición siempre se hace uso de un identificador de etiqueta HTML (como por ejemplo <H1>), y luego indicamos con qué aspecto queremos que se muestren todas las etiquetas <H1> que aparezcan en un documento. Podemos definir cómo queremos que se muestren las distintas partes del documento HTML, pudiendo en cada caso definir sus propiedades (color, tipo de fuente, tamaño, espacio de márgenes, bordes, imagen de fondo, etc.) con algún determinado valor deseado.
Vamos a ver primero lo que sería un ejemplo muy sencillo de aplicación de CSS, que tratará de una página web o archivo HTML donde tan solo tendremos un párrafo de texto. El texto estará dentro de una etiqueta <p>. Distinguiremos con este ejemplo entre contenidos y presentación o aspecto.
Para seguir este tutorial es necesario que tengas conocimientos básicos de HTML. Si no los tienes, te recomendamos que realices primero el curso básico de HTML disponible en la sección de cursos de aprenderaprogramar.com (o si prefieres acceder directamente, puedes hacerlo a través de este enlace: http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192).
Nuestro documento html contendrá el siguiente texto de partida (en este caso se ha llamado ejemplo.html):
|
<!DOCTYPE html> <p>Texto de ejemplo para visualizar resultados </p> </body> |
Una vez creado el documento ejemplo.html en nuestro ordenador, lo abriremos con un navegador web, obteniendo un resultado que será similar a éste:
Tenemos una página web que tan solo tiene un párrafo (“Texto de ejemplo para visualizar resultados”). Este aparece en color negro por defecto y nosotros, para ver la utilidad de CSS deseamos mostrar el texto en rojo. En realidad con CSS podemos hacer cosas mucho más complejas, pero ahora sólo queremos poner un ejemplo para mostrar la utilidad de CSS.
Una vez hayamos creado un archivo con el estilo para aplicar a los párrafos (durante el curso aprenderemos cómo hacer esto y muchas más cosas) podremos hacer que todos los párrafos de una página web se muestren de una misma manera sin tener que modificar párrafo a párrafo, sino únicamente modificando el estilo CSS que se debe aplicar a los párrafos. Como decíamos, introduciendo el código CSS adecuado podremos lograr que cambie el aspecto de nuestra página web:
¿Hace falta CSS para realizar esto? Antiguamente no. Podíamos hacerlo simplemente escribiendo:
<font color="red"> <p>Texto de ejemplo para visualizar resultados</p></font>
Sin embargo, con esta escritura sólo estábamos modificando el aspecto de un párrafo, mientras que con CSS podemos modificar el aspecto de todos los párrafos de una página web, repartidos en cientos de líneas y de archivos, “automáticamente”. Con la evolución de HTML, algunas formas sintácticas que servían para dotar de aspecto a las páginas web han pasado a considerarse obsoletas o descatalogadas, dejando que la presentación quede controlada de forma independiente a través de CSS.
CSS hace que resulte fácil cambiar la presentación ya que si ahora quisiéramos cambiar el color, fuente, tamaño, etc, de todos los párrafos de nuestra página web, tan solo deberíamos de cambiar las propiedades en el archivo donde hayamos definido el estilo para los párrafos, sin alterar nada en la página web. Esto es mucho más fácil, rápido y legible que tener que estar modificando todas y cada una de las etiquetas <p> que aparecieran en nuestra página web.
Ahora bien, imaginemos que tenemos una página web con 3 etiquetas <p> pero no deseamos que todas tengan la misma presentación. CSS tiene previsto cómo poder aplicar distintos estilos a ciertos párrafos o etiquetas. Durante el curso veremos cómo. Esta imagen sería un ejemplo de uso de distintos estilos para la etiqueta <p> de párrafos.
La forma de definición de estilos CSS separa la presentación de la información en una página web. Es muy útil porque tenemos los estilos por un lado y los contenidos por otro. Si en un momento dado queremos cambiar la forma en que se ve la página pero no sus contenidos, únicamente tendríamos que modificar los archivos css. Pero también existen estas otras formas de aplicar estilos, lo veremos a lo largo del curso.
Quizás los ejemplos que hemos visto hasta el momento te resulten muy sencillos y poco atractivos. A continuación mostramos imágenes de lo que puede hacerse utilizando CSS a nivel avanzado, que como verás puede ser realmente espectacular.
Fíjate en las dos imágenes que mostramos a continuación y trata de identificar qué tienen en común y qué tienen distinto:
Podemos decir que tienen en común un mismo texto, un mismo menú y posición de menú. En cambio podemos decir que cambian los colores, tipos y tamaños de letra y las imágenes de fondo, tanto detalles decorativos como las flores o personas, como fondos que crean marcos para el texto o los menús. Con un conocimiento avanzado de CSS podremos lograr efectos similares a estos que estamos viendo y cambiar el aspecto de una página web con sólo un click de botón.
Para hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.
