Completo tutorial de CSS - Usos de las CSS I

Vamos ahora a describir los diferentes usos de las CSS introducidos en el anterior capítulo. Vamos por orden, describiendo los puntos según su dificultad e importancia.

---

Hemos partido este capítulo en dos partes por su extensión y por habervarias formas distintas de aplicar estilos, aquí veremos las más sencillas y en el capítulo siguiente otras más complicadas pero más potentes.

---

Pequeñas partes de la página

---

Para definir estilos en secciones reducidas de una página se utiliza la etiqueta <SPAN>. Con su atributo style indicamos en sintaxis CSS las características de estilos. Lo vemos con un ejemplo, pondremos un párrafo en el que determinadas palabras las vamos a visualizar en color verde.

---

||
||
||
|| <p>
Esto es un párrafo en varias palabras
<SPAN style="color:green">en color verde</SPAN>. resulta muy
fácil.
</p>
||
||
||
||

---

Que tiene como resultado:


Esto es un párrafo con varias palabras en color verde. resulta muy fácil.





Estilo definido para una etiqueta

---

De este modo podemos hacer que toda una etiqueta muestre un estilo determinado. Por ejemplo, podemos definir un párrafo entero en color rojo y otro en color azul. Para ello utilizamos el atributo style, que es admitido por todas las etiquetas del HTML (siempre y cuando dispongamos de un navegador compatible con CSS).

---

||
||
||
||
<p style="color:#990000">
Esto es un párrafo de color rojo.
</p>

---

<p style="color:#000099">
Esto es un párrafo de color azul.
</p>

||
|| ||
||

---

Que tiene como resultado:


Esto es un párrafo de color rojo.






Esto es un párrafo de color azul.





Estilo definido en una parte de la página

---

Con la etiqueta <DIV> podemos definir secciones de una página y aplicarle estilos con el atributo style, es decir, podemos definir estilos de una vez a todo un bloque de la página.

||
||
||
||
<div style="color:#000099;
font-weight:bold">
<h3>Estas etiquetas van en <i>azul y
negrita</i></h3>
<p>
Seguimos dentro del DIV,
luego permanecen los etilos

---

</p>

---

</div>

||
|| ||
||

---

Que tiene como resultado:

Estas etiquetas van en azul y negrita

Seguimos dentro del DIV, luego permanecen los etilos


Hasta aquí este capítulo, en el siguiente seguiremos viendo formas más avanzadas de usar las CSS.

---