¿Por que utilizarlos?

1. Para separar el estilo visual, del contenido, y hacer que el código quede más claro
2. Porque nos permiten tener mayor control sobre la apariencia final de la página (podemos definir + formatos, margenes y opciones)
3. Sobretodo porque si tenemos un SITE web de 200 página y definimos los estilos para todas ellas en un fichero aparte, cambiar la apariencia de todo el sitio sera modifcar un fichero (el de estilos), y no todos.
4. Con JavaScript podremos cambiar la apariencia de la web mientras la estamos viendo, modificando los estilos

¿De cuantas formas podemos USAR estilos?

1. Aplicación directa de los estilo en la etiqueta HTML directamente utilizando el ATRIBUTO STYLE
• <B STYLE="font-size:14pt;color:red">es más grande y está en rojo</B>.

 

2. Especificando los estilos en una ZONA APARTE, ya sea en el mismo .html o en un fichero .css aparte.
   1. Redefinicion de etiquetas.
      • BODY {font-family:Verdana,sans-serif;font-size:x-small; margin-left:0.25in; margin-right:0.25in}
   2. Clases (conjunto de propiedades que podemos utilizar en cualquier sitio y cuantas veces queramos) . !Ojo con el PUNTO!!
      • Definición: .rojo_negrita { color:red; font-weight:bold }
      • Utilización:
        • <p class="rojo_negrita">hola</p> <span class="rojo_negrita">hola</span>
   3. Identificadores (conjunto de propiedades que podemos utilizar en cualquier sitio PERO SÓLO UNA VEZ) . !Ojo con #!!
      • Definición: #id_enlace_hola{ color:red; font-weight:bold }
      • Utilización:
        • <a id="id_enlace_hola">hola</a>
      • Atención: al poder utilizarse sólo en un sitio, tambien nos servirán para localizar un elemento HTML de forma univoca y asi poder modificarlo desde JavaScript (por ejemplo, para que cuando pasemos el ratón por ese enlace, que se aumente de tamaño la fuente

EJEMPLOS especificando los estilos en una ZONA APARTE

• En un solo fichero

• En varios ficheros

HERENCIA DE ESTILOS

De forma general , las etiquetas que estan contenidas dentro de otras, heredan los atributos de las contenedoras. Pej, si definimos un color de texto, y tamaño de texto para BODY este color de texto será heredado, por las etiquetas que quedan dentro de ella, como los párrafos, celdas y demás textos de todo el documento, no obstante, no todas las etiquetas heredan todo, pueden no heredar nada o heredar en parte, como por ejemplo los enlaces, que no heredarán el color de texto del BODY, aunque si el tamaño.

¿Qué ocurre cuando un elemento se ve afectado por varias reglas CSS, y se contradicen?

De forma general prevalece aquel que ha sido definido más tarde. Imaginar que tenemos dos ficheros .css que definen el P (parrafo), pues el último a ser importado es el que manda, pero si despues esta definido un estilo para P en el propio HTML, este mandaria.

De forma general prevalece aquel más específico

• Por ejemplo, en el caso de definir un color de texto para el BODY, si despues definimos un estilo para un parrafo concreto (mediante aplicación directa en la etiqueta o utilizando clases o identificadores), prevalecerá el del párrafo.
• Ejemplos
  

  Ejemplo 1 BODY {color: blue} #mi_id {color:green} .miclase {color: black} P {color: red} <p class="miclase">hola</p> RESULTADO Hola se ve en negro Ejemplo 2 #mi_id {color:green} .miclase {color: black} P {color: red} <p class="miclase" id="mi_id">hola</p> RESULTADO Hola se ve en verde Siempre gana el más específico Ejemplo 3: #mi_id {color:green} .miclase {color: black} P {color: red} <p class="miclase" id="mi_id" style="color: blue" >hola</p> RESULTADO Hola se ve en azul Siempre gana el más específico

Cuando una etiqueta, clase o identificador es redefinido, lo que vale, es su última definición

Ejemplo:

@import url(estilos.css); P { color: blue} @import url(estilos2.css); P { color: yellow} P {color: red} P {color: black}

<p>hola</p>

RESULTADO Hola se ve en negro

¿Qué ocurre cuando un elemento se ve afectado por varias reglas CSS, y no se contradicen en todo?

El resultado es que se complementan

P {font-weight: bold} .miclase {background-color: black} #mi_id {color:green}

<p class="miclase" id="mi_id">hola</p>

RESULTADO Hola se ve en verde