CSS para principiantes
Para este y tutorial sólo necesitas un navegador y un editor de texto. Si el editor tiene resaltado de sintaxis CSS pues mucho mejor. Si usted está acostumbrado a usar Dreamweaver déjelo un momento aparte pues nada se compara a controlar el código de manera directa.
Cascading Styling Sheets u Hojas de Estilos en Cascada, es uno de los grandes avances en la creación de páginas y programas Web. Uno de los aspectos más importantes de CSS es que no sólo maneja los estilos y tipografía sino también la distribución espacial del contenido de las páginas. Si durante años ha usado HTML y el tag table y siente que no hay necesidad de cambiar debo decirle que está en un error. En cuanto pruebe la potencia y sencillez de CSS se convertirá en un entusiasta. Además, las páginas hechas en CSS son más rápidas y ligeras, y se colocan mejor en los buscadores pues a Google y a Yahoo! les gusta lo hecho con CSS. Además, ahorrará muchas horas de trabajo, su jefe creerá que usted tardo días para cambiar el diseño de un sitio pero en realidad solo fue necesario hacer algunos pases mágicos por la hoja de estilos a la hora de la comida ;-).
Lo primero en CSS
Lo primero que debe tener en claro es que el tag font está terminantemente prohibido en CSS. Esto es así porque en CSS todo se maneja a través de “clases” o estilos. Existen algunas clases predefinidas por el navegador que usted conoce y ha usado cientos de veces: H1, H2, P, HR, TR, etcétera, estas clases son las que hemos usado siempre. La magia de CSS radica en que podemos crear nuevas clases y modificar las existentes. Los primero es crear la página primer-css.html.
<html><head> <title> :: Mi primer CSS :: </title> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" href="estilos.css" type="text/css" /> </head> <body> <p><span class="slogan">Parrafo sin acentos</span></p> <p><span class="titulo">Otro parrafo sin acentos</span></p> <p><span class="titulo">Este es un <span class="slogan">tercer parrafo</span> sin acentos</span></p> <h1>Este es el tag h1</h1> </body> </html>
Note que después del tag </title> están las indicaciones para que la página HTML “jale” el diseño CSS. A continuación, cree un archivo en blanco y guárdelo en el mismo directorio con el nombre estilos.css.
Comentar la hoja de estilos
Es una buena costumbre que las clases que se crean en los archivos CSS estén comentadas para saber en que y en donde las usamos, los comentarios se colocan entre un /* y un */. Las primeras clases (o estilos) que crearemos serán las clases “slogan” y “titulo”, que se usan para darle diseño al slogan y al titulo de la página, coloque este código en el archivo estilos.css.
/* Clase para el slogan */
.slogan {
color: #097a19;
font-size: 14pt;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: center;
background-color: #b4b4b4;
}
/* Clase para los titulos */
.titulo {
color: #d3a900;
font-size: 11pt;
font-family: Arial, sans-serif;
text-align: left;
}
/* Mi versión de h1 */
h1 {
color: #dd1010;
font-size: 18pt;
font-family: Arial, sans-serif;
text-align: center;
}
Las clases que uno crea comienzan con un punto (.) mientras las predefinidas (como h1) no lo tienen. Note además que el código CSS se escribe con minúscula pues así lo exige el estándar.
El tag SPAN sirve para marcar bloques de texto. Un bloque span, como vemos en el tercer párrafo, puede colocarse dentro de otro bloque SPAN.
|
Artículos Relacionados Como usar distintos colores en un select menu con CSS Podemos personalizar nuestros select menu asignádoles clases a las opciones del menú. Como prueba añadiremos distintos colores... Estilos aleatorios con CSS y PHP En estos días he estado trabajando en algunos diseños y en uno tuve la idea... Primeros pasos con CSS (hojas de estilo) ¿Porqué Usar CSS? CSS (Cascading Styles sheets) también conocido como hojas de estilo, es una... Videotutoriales de Hojas de Estilo (CSS) Nivel avanzado Curso avanzado en video tutoriales sobre el uso de Hojas de Estilo (CSS).... |
(2 votos)
Loading ...Autor y licencia
Autor: Mononeurona
URL: Mononeurona
4 Comentarios para “CSS para principiantes”
Enlaces a esta entrada
RSS
Esta informacion esta muy bien, pero yo me pregunto de cuando es? me refiero a la fecha en que fue publicada, entonces uno puede saber si es actual o tal vez las reglas de especificacion han cambiado. Como todos sabemos en esta materia constantemente hay nuevos cambios entonces no seria mala idea referir la fecha en la cual estos tutoriales fueron escritos.
12/07/09 - 18:53 #
Luz tienes toda la razón, intentamos que la información publicada sea lo más actual posible, porque como bien dices en este tema las cosas cambian constantemente y algo escrito hace 5 años puede estar ya completamente obsoleto.
Desgraciadamente no todos los artículos está claro cuando fueron escritos, evidentemente si vemos que la información no es correcta o está desactualizada no lo publicamos.
Un saludo.
27/07/09 - 23:40 #
deben poner los ejemplos generados por el codigo para que nos sea mas facil. gracias
1/08/09 - 22:10 #