Introducción a CSS

Posted on 20 agosto, 2008. Filed under: ¿? |

CSS son las siglas de Cascading Style Sheets, que en español suele traducirse como Estilos de hoja en Cascada.

El CSS permite darle un estilo a una página web sin agregar ni alterar el contenido de las mismas.

¿Qué ocurría, antes, cuando se hacían las páginas web con HTML. Por ejemplo, para cambiar el color de un texto presente en varios títulos, había que editar cada una de las páginas del sitio, seleccionar cada subtítulo y cambiar el color de su tipografía.

En cambio, al utilizar CSS y una buena estructuración de página web, se tiene un estilo, llamado subtítulos, definido con una serie de atributos, como el color de la fuente usada en ellos.

De tal forma que para cambar el color de los subtítulos de las páginas, sólo se deberá cambiar el color en la hoja de estilos (archivo .css) y de forma automática se aplicará a todos los subtítulos del sitio.

Con CSS se puede crear un estilo personalizado y configurar todas sus propiedades, darle un nombre único a dicho estilo y luego aplicarlo en páginas HTML.

Hay dos formas de utilizar CSS:

1) Hacer un archivo .css que se vincule a todas las páginas del sitio web, lo que permite tener por separado la hoja de estilos de las páginas de contenido. Esto es lo mejor aunque más complejo, sobre todo cuando hay muchos estilos aplicados a diferentes partes de una página web.

2) Agregar código para estilos dentro del head de una página HTML, o sea, entre las etiquetas <head> y </head>
Por ejemplo, para lograr un texto en bold o negrita, en color rojo y en tipografía Verdana, hay que introducir el siguiente código dentro del head:

Código HTML:
<style type="text/css"> <!--
 .resaltados { 
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-weight: bold;
 color: #FF0000;
 }
 --></style>

y luego en la página HTML donde se utilice este estilo se aplica la clase que se llamó resaltados, de la siguiente forma:

Código HTML:
<p class=”resaltados”>Aquí va el texto a mostrarse resaltado</p>

En esta forma de aplicación de CSS incluímos el código inline, o sea, directo en la página web.

Conceptos básicos de Etiquetas, CCS y HTML:

Anuncios

Make a Comment

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

Liked it here?
Why not try sites on the blogroll...

A %d blogueros les gusta esto: