El CSS es el código que usamos para dar estilo a los objetos de una página web. Para dar estilo a un objeto, es muy importante usar los atributos “id” y “class”

¿Dónde se escribe? 

Se puede escribir:
  • En una hoja aparte (No lo vamos a ver, pero es igual)
  • En el html, con la etiqueta <style>:
    • Escribiríamos algo así:
    • <html>
      <head>
      <style>
      ...el código CSS
      </style>
      </head>
      <body>
      ...Contenido de la página...
      </body>
      </html>
  • En la misma línea de código (no es lo más ortodoxo, pero a veces es muy útil):
    • Escribiríamos algo así:
    • <div style="propiedad1:valor1; propiedad2:valor2;"></div>

¿Cómo se escribe? 

Pues supongo que, si habéis visto el último cuadro de código, os haréis una idea.
Si escribimos en la misma línea, solo hace falta escribir las propiedades y sus valores (más adelante veremos las más importantes).
Si escribimos entre las etiquetas tenemos que seleccionar a qué queremos que se apliquen. Esto se hace así:
<style>
selector{
propiedad1:valor1;
propiedad2:valor2;
propiedad3:valor3;
}
</style>

Los selectores:

Hay varios tipos de selector. Aquí solo vamos a ver los más importantes.
etiqueta“: Si escribimos esto, estamos haciendo que afecte a todos los elementos con esa etiqueta. Así, si escribimos “p{propiedades y valores}” esas propiedades afectarán a todos los párrafos.
.clase“: Si escribimos esto, hacemos que todos los elementos que tengan la clase indicada sean afectados. Por ejemplo, si escribimos “.miclase {propiedades y valores}”, todos los elementos que tengan la clase “miclase” serán afectados por esas propiedades.
#id“: Si escribimos esto, solo el elemento que tenga la id será afectado por esas propiedades. Así, si escribimos “#mi-id{…}” solo el elemento que tenga ese id será afectado.

Ejemplo básico de CSS:

Este será el código que usaremos:
<style>
p{
color:red;
}
.p-ejemplo{color:blue;}
#especial{color:yellow;}
</style>
<p>Soy un párrafo cualquiera</p>
<p class="p-ejemplo">Yo uso la clase "p-ejemplo"</p>
<div class="p-ejemplo">Yo también, aunque no soy un párrafo, soy un div</div>
<p id="especial">Yo tengo una id propia y por eso soy amarillo</p>

Este será el resultado:
Soy un párrafo cualquiera
Yo uso la clase “p-ejemplo”
Yo también, aunque no soy un párrafo, soy un div
Yo tengo una id propia y por eso soy amarillo
Bueno, vale por hoy, ¿no? Como siempre (aunque ya me harto de repetirlo), cualquier cosa, duda, comentario, sugerencia, lo que sea, estoy a vuestra disposición.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Puedes usar las siguientes etiquetas y atributos HTML:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre data-language=""> <ul> <ol> <li>
Para poner código usa <pre data-language="[lenguaje]"><code>[código]</code></pre>, y no olvides escapar el HTMl.