¿Qué es CSS?

CSS es el Acrónicmo de Cascading Style Sheets (es decir, hojas de estilo en cascada).

CSS es un lenguaje de estilo que define la presentación de los documentos HTML. Por ejemplo, CSS abarca cuestiones relativas a fuentes, colores, márgenes, líneas, altura, anchura, imágenes de fondo, posicionamiento avanzado y muchos otros temas.

Es posible usar HTML, o incluso abusar del mismo, para añadir formato a los sitios web. Sin embargo, CSS ofrece más opciones y es más preciso y sofisticado. CSS está soportado por todos los navegadores hoy día.

Después de unas cuantas lecciones de este tutorial serás capaz de crear tus propias hojas de estilo usando CSS para dar a tu sitio web un aspecto nuevo y genial.

¿Qué diferencia hay entre CSS y HTML?

HTML se usa para estructurar el contenido.

CSS se usa para formatear el contenido previamente estructurado.

Una persona llamada Tim Berners Lee, inventó el World Wide Web, el lenguaje HTML sólo se usaba para añadir estructura al texto. Los autores podían marcar sus textos diciendo “esto en un título” o “esto es un párrafo”, usando las etiquetas HTML “<h1>” y “<p>”, respectivamente.

A medida que la Web fue ganando popularidad, los diseñadores empezaron a buscar posibilidades para añadir formato a los documentos en línea. Para satisfacer esta reclamación, los fabricantes de los navegadores (en ese momento, Netscape y Microsoft) inventaron nuevas etiquetas HTML, entre las que se encontraban, por ejemplo, “<font>”, que se diferenciaba de las etiquetas originales HTML en que definían el formato… y no la estructura.

Esto también llevó a una situación en la que las etiquetas estructurales originales, por ejemplo, “<table>”, se usaban cada vez más de manera incorrecta para dar formato a las páginas en vez de para añadir estructura al texto. Muchas nuevas etiquetas que añadían formato, por ejemplo, “<blink>”, sólo las soportaban un tipo determinado de navegador. “Necesitas el navegador X para visualizar esta página” se convirtió en una declaración de descargo común en los sitios web.

CSS se inventó para remediar esta situación, proporcionando a los diseñadores web con sofisticadas oportunidades de presentación soportadas por todos los navegadores. Al mismo tiempo, la separación de la presentación de los documentos del contenido de los mismos, hace que el mantenimiento del sitio sea mucho más fácil.

¿Qué beneficios me ofrece CSS?

 

CSS fue toda una revolución en el mundo del diseño web. Entre los beneficios concretos de CSS encontramos:

  • control de la presentación de muchos documentos desde una única hoja de estilo;
  • control más preciso de la presentación;
  • aplicación de diferentes presentaciones a diferentes tipos de medios (pantalla, impresión, etc.);
  • numerosas técnicas avanzadas y sofisticadas.

¿Cómo funciona CSS?

Muchas de las propiedades que se usan en las hojas de estilo en cascada (CSS) son parecidas a las de HTML. Así pues, si estás acostumbrado a usar HTML para cuestiones de presentación, lo más probable es que reconozcas gran parte del código usado. Examinemos un ejemplo concreto.

La sintaxis básica de CSS, donde queremos un color rojo como fondo de nuestra página web:

Usando HTML podríamos haberlo conseguido así:

<body bgcolor=”#FF0000″>

Con CSS el mismo resultado puede lograrse así:

body {background-color: #FF0000;}

Como verás, el código usado es más o menos idéntico para HTML y CSS.

Color de primer plano: la propiedad ‘color’

Por ejemplo, imagina que queremos que todos los títulos de un documento aparezcan con color rojo oscuro. Todos los títulos están marcados con el elemento <h1>. El código siguiente establece el color de los elementos <h1> como rojo.

h1 {

color: #ff0000;

}

Los colores se pueden introducir como valores hexadecimales, como en el ejemplo anterior: #ff0000; o se pueden usar los nombres de los colores: “red” (rojo), o bien como valores rgb: (rgb(255,0,0)).

La propiedad ‘background-color’

La propiedad background-color describe el color de fondo de los elementos.

El elemento <body> contiene todo el contenido de un documento HTML. Así pues, para cambiar el color de fondo de una página, la propiedad background-color debería aplicarse al elemento <body>.

También se pueden aplicar colores de fondo a otros elementos, entre ellos, a los encabezados y al texto. En el ejemplo que sigue se aplicarán diferentes colores a los elementos <body> y <h1>.

body {

background-color: #FFCC66;

}

h1 {

color: #990000;

background-color: #FC9804;

}


Anuncios
Categorías: 4to | Deja un comentario

Navegador de artículos

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Blog de WordPress.com.

A %d blogueros les gusta esto: