Creando nuestro primer archivo css…

Bien, al fin con tiempo, ahora crearemos nuestro primer archivo css… al fin vos, ya era tiempo, me tenias esperando ya calma, bueno comencemos.

Lo primero que haremos, será nuestro archivo HTML con el cual jugaremos, wiiiiiiiiiiii a jugar se ha dicho… calmado, no es cualquier juego.

Haremos un archivo html lo mas básico posible, solo con un párrafo (p), un titulo del tipo H1, un ancla o enlace o hiper-vinculo o como le quieran llamar :P (a), bueno que sean 2 de cada uno, nomas para comenzar, oye, ¿y para eso debo utilizar algun programa avanzado? mmmm…, no, pues solo necesitamos un editor de texto plano, puedes usar Kedit, Kwrite, Kate, Gedit (estos por el lado de SO libres), y por si usas win2sh pues ahí esta el blog de notas.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <meta http-equiv="expires" content="-1" />
 <meta http-equiv="Pragma" content="no-cache" />
 <meta http-equiv="Window-target" content="_top" />
 <meta name="autor" content="Kradssen - Carlos Corvera" />
 <title>Mi primer página XHTML</title>
 <link href="mi_estilo.css" rel="stylesheet" type="text/css" media="all" />
 </head>
 <body>
    <!-- Este es un comentario -->
    <!-- primero solo las etiquetas -->
    <p>Mi Primer Parrafo</p><br />
    <a href="#">Mi primer enlace</a><br />
    <a href="##">Mi primer enlace</a>
    <!-- Ahora usaremos clases -->
    <h1 class="">Mi primer titulo con H1</h1>
    <p class="">Mi Primer Parrafo</p><br />
    <a href="####" class="">Mi primer enlace</a>
 </body>
</html>

Hey pero, si pones eso, solo sera una página fea, no tendrá nada de color… calma mi pequeño aprendiz (al rato y escribo starwarz episodio x :) ), como verán, es solo código html, y solo es el contenido que queremos, nada de darle color y efecto, solo es el contenido por decirlo así el esqueleto, como verán incluyo una etiqueta que hace referencia a mi_estilo.css, bien, es en ese archivo que editaremos la forma de como queremos que se vea nuestra página.

Ok, esta bien, pero antes dime ¿Qué es eso de class? momento todo a su tiempo, solo digamos que es algo que definiremos en el archivo mi_estilo.css y por ende es para darle estilo :)

Bien, css trabaja de la siguiente forma, para definir el estilo primero se escribe el nombre de lo que se va a modelar, ya sea etiqueta html, una clase o un identificador, y luego entre llaves colocamos las características a darles estilo junto a sus parámetros los cuales definen el estilo. y dale con clases y ahora mas me dices identificadores, ¿Qué diablos es eso? ok, ahora te lo explico, primero daré la forma que va:

<Nombre> {
<caracteristica1>: <parametros>;
<caracteristica2>: <parametros>;
...
<caracteristican>: <parametros>;
}

Como pueden notar tenemos Nombre entre los simbolos <> eso quiere decir que esto es requerido en esta parte colocamos el nombre de la etiqueta, clase o identificador.

Etiqueta html: Son aquellas etiquetas que usamos para crear nuestro archivo html, por ejemplo: p, a, h1, body, etc… es decir con esto podemos definir como queremos que estén configuradas las etiquetas ¿y eso para que? si ya funcionan así nomas… cierto ya funcionan así nomas, pero con esto, damos una apariencia nueva, por ejemplo digamos que tu quieres que de fondo de la pagina no sea blanca sino gris, y por lo tanto quieres que las letras sean de color rojo, claro la etiqueta body solo la configuras una vez, pero ¿y los párrafos?, no vas a definir para cada párrafo el color rojo, por ello solo bastaría esto:
Para la etiqueta body solo cambiaremos su color de fondo

body {
  background-color:grey; /* esto es un comentario  de una linea*/
  /* usamos la propiedad background para modificar el fondo,
      desde imagen color etc... en este caso solo usamos la parte del color,
      lo podemos hacer con hexadecimal o usando su nombre en ingles,
      para hexadecimal sería en lugar de grey colocar #666666 que es un
      gris claro.
      en esta linea termina el comentario*/
}

Ahora vamos con la etiqueta de párrafo, digamos que queremos color rojo y tamaño 18 pixeles y que la familia de letra pertenezca a la Arial como predeterminada, sino la tiene que sea Helvica o sino sans-serif:

p {
  color:#FF0000; /*color rojo*/
  font-size:18px; /* font es la caracteristica y size la subcaracteristica*/
  font-family:Arial, Helvetica, sans-serif;
}

Así también podemos modificar las etiquetas de ancla, no queremos que tenga el subrayado, y cambiarles color, bien hagamos lo:

a {
text-decoration:none; /*aquí le quito el subrayado */
color:#00FF00; /* no lo quiero azul */
font-size:18px; /* tamaño que le daremos por defecto*/
}

a:hover { /*envento que sucede al pasar sobre*/
color:#FFFF00; /*con esto cambiara de color*/
font-size:36px; /* y de tamaño al paserle el mouse sobre */
}

a:visited { /*Estado depues de visitar*/
font-size:9px;
text-decoration:line-through;
/* Cabe destacar que soporta herencia,
    no le defino color y tomara el que esta en "a" y al pasar sobre
    no cambiara tamaño solo color, debido a que aqui lo
    obligo a tener solo 9px de tamaño */
}

Bueno esas son algunas propiedades, a estas definiciones también se les llaman reglas, ya que se aplican al todo el contenido de la página, ustedes pueden travesear más ¿Qué? ¿y que acaso ya piensas marcharte y dejar esto hasta aquí? aun no me has dicho que es una clase e identificador…. no, solo daba una pausa, bueno, vamos a clases ¬¬ que feo se oye eso, no quiero ir a la escuela noooo… :P me refiero a definir que son las clases :P

Clases: son definiciones de características que solo se aplican a un elemento o a varios dependiendo, son invocadas mediante la utilización del atributo class de la forma <p class=”mi_clase” y estás se definen de la siguientes formas:
<etiqueta>.<nombre_clase> {…} Si lo que se desea es que la clase sea para ciertas etiquetas.
*.<nombre_clase> o solo .<nombre_clase> Si se desea una clase genérica para usarse en cualquier etiqueta.
Realicemos unas de ejemplo, serán genéricas.

.texto_centrado {
   text-align:center;
}
.texto_tachado {
   text-decoration:line-through;
   font-size:36px;
}
.nose { /*El nombre lo decide el usuario*/
  color:#66FF00;
  font-size:12px;
}

Bien recuerdan el documento html, ahí habíamos colocado atributos class sin nada, bien coloque el nombre de cualquiera de estas 3 clases en ellos y miren lo que ocurre, en mi caso lo deje así:

  <h1 class="texto_centrado">Mi primer titulo con H1</h1>
  <p class="nose texto_tachado">Mi Primer Parrafo</p><br />
  <a href="####" class="nose">Mi primer enlace</a>

Nota que para el párrafo coloque 2 clases, lo cual es posible, pero al haber 2 clases o mas y estas modifican de diferente forma una característica, se tomara la ultima que se haya editado en el archivo css, por ejemplo para esta combinación el tamaño de letra tomado será el de 12px, el color de la clase nose, y la decoración de la clase texto_tachado.

Identificadores: Son como las clases, pero su diferencia es qué solo se les permite ser usados una vez en una misma página html (se pueden usar mas de una vez en la misma, pero va contra los estándares, si se desea utilizar asi, es mejor definirla como clase) estas se definen similar, ya sea para una etiqueta o genérica, salvo que no se definen con el . sino que con # y son llamados mediante el atributo ID, ejemplo <h1 id=”mi_identificador”>, vamos a definir unos:

#fondo {
background-color:#000000;
color:#FFFFFF;
}
#borde {
border:#990000 solid 2px;
background-color:#333333;
color:#0000FF;
font-size:18px;
}
#oculto {/*No importa que le ponga color o tamaño grade no se vera :P */
visibility:hidden;
font-size:36px;
color:#00FF00;
}

y lo he usado así (pueden agregar esto al final de su archivo html):

    <!-- Ahora usaremos identificadores -->
  <h1 id="borde">Mi primer titulo con H1</h1>
  <p id="oculto">Mi Primer Parrafo</p><br />
  <a href="#####" id="fondo">Mi primer enlace</a>

Wooooooooooooowwww, no sabia todo esto :) bueno, espero os sirva está pequeña explicación (en realidad me salio mas larga de lo que esperaba :P ) pero espero que les sirva, luego subo para que descarguen los archivos.

7 comentarios para “Creando nuestro primer archivo css…”

  1. gabys Dijo:
    Julio 19, 2008 a 12:15 am

    Me llega como has explicado todo!! :D !

    jaja el de azul se parece a mi xD jajaa :D !

    Me gustó :D !

    Responder
  2. hechicero Dijo:
    Agosto 22, 2008 a 5:56 pm

    parcero vacano como enseña depronto no tienes algunos codigos de javascript como un menu desplegable

    Responder
  3. txuben Dijo:
    Septiembre 4, 2008 a 12:01 pm

    Necesitaba algunos datos de css, gracias por el articulo.

    Responder
  4. kradssen Dijo:
    Septiembre 4, 2008 a 10:42 pm

    Me alegro que les sea útil mi post :) y pienso ir colocando mas sobre el tema de css, php, mysql y por que no de java :) aunque voy a pasito de tortuga por motivos de tiempo por ahí iré, aun estoy pendiente con los scripts que pregunta hechicero.

    Y para la niña linda (gaby) me alegro que a ti también te gustara :) no creas, el de azul también me recuerda a algunas ocasiones mías cuando aprendía :D y aunque no soy un master me alegra saber que lo poco que se es muy útil para muchos.

    Muchas gracias por sus comentarios positivos :)

    Responder
  5. javier vilchez Dijo:
    Noviembre 6, 2008 a 12:44 pm

    hola chama te felicito buena explicacion y muy practica, para quienes nos complicamo a veces¡¡¡
    saludos y cuando la necesidad de explixar te este rondando en la cabeza bueno explica y publicalo que el mundo te lo agradecera¡¡¡¡

    Responder
  6. DIANA Dijo:
    Noviembre 5, 2009 a 3:06 pm

    De veras muy util tu explicación..Gracias

    Responder
  7. kradssen Dijo:
    Noviembre 5, 2009 a 3:38 pm

    Me alegro q aun les sea muy util esta explicación, en los proximos días espero poder agregar mas sobre el tema ^_^

    Responder

Escribe un comentario