oletusWEBos.es - Lecciones paso a paso para crear tu web. Tutoriales de Dreamweaver, HTML y CSS
Curso HTML - Lección 13: Iniciación CSS
Para poder crear una web en condiciones hay que usar si o si CSS (Cascading Style Sheets) o lo que es lo mismo pero traducido, hojas de estilo en cascada. En esta lección veremos una breve introducción de CSS, pero te recomiendo para no quedarte a medias que ojees también nuestro Curso de CSS.
Para diferenciar HTML de CSS podriamos decir que HTML se encarga de la estructura en si de la página, mientras que CSS se encargará de la presentación.
Vamos a ver como podemos dar estilos CSS al texto, para ello recurriremos al atributo style. Mediante este atributo podemos establecer el tamaño y tipo de fuente que usaremos en un párrafo:
Ejemplo 1:
<p style="font-size:25px;">25 píxeles será el tamaño de este párrafo</p>
<p style="font-family:times;">El tipo de letra que usaremos para este párrafo será Times</p>
<p style="font-family:times; font-size:25px;">El tipo de letra que usaremos para este párrafo será Times y tendrá un tamaño de 25 píxeles</p>
¿Y como lo veremos en el navegador? Pues de la siguiente manera...
25 píxeles será el tamaño de este párrafo
El tipo de letra que usaremos para este párrafo será Times
El tipo de letra que usaremos para este párrafo será Times y tendrá un tamaño de 25 píxeles
En el ejemplo anterior hemos usado las propiedades font-size y font-family conjuntamente con el atributo style para especificar de que tamaño y que tipo de letra queremos usar. Fíjate como en el último párrafo hemos separado ambas propiedades con un punto y coma (;)
¿Y dirás? ¿y tengo que hacer esto en todos los parrafos? Pues no. Css nos da la oportunidad de automatizar todo este trabajo, para ello solo tenemos que indicarle al navegador de una sola vez como tiene que presentar el texto:
Ejemplo 2:
<html>
<head>
<title>Mi primera página usando CSS</title>
<style type="text/css">
h1 {font-size: 25px; font-family: times;}
h2 {font-size: 15px; font-family: arial;}
p {font-size: 8px; font-family: courier;}
</style>
</head>
<body>
<h1>Mi primera página usando CSS</h1>
<h2>Estoy probando los estilos CSS</h2>
<p>Es genial usar estilos CSS</p>
</body>
</html>
¿Cómo lo interpretaría el navegador? Pues de la siguiente manera:
Observa como en el ejemplo anterior hemos insertado el código CSS en el encabezado (head), por lo tanto se aplicará a toda la página. Fíjate también que hemos utilizado la etiqueta style añadiendole el atributo type y como valor de este text/css, con esto estamos indicando al navegador que estamos escribiendo código CSS.
De esta forma todos los encabezados h1 que insertemos en nuestra página lo harán con un tamaño de 25px y con letra tipo Times. Así mismo todos los encabezados h2 y párrafos apareceran con las propiedades que anteriormente les hemos asignado en toda nuestra página.
Como ves usar CSS solo son ventajas además de poder usar una hoja de estilos independiente al documento HTML para gestionar el estilo de muchas páginas a la vez, pero esto lo verás en nuestro Curso de CSS.
Quiero aprender más!!!
- Avanzar a Lección 14: ¡¡Sube tu Web!!
- Retroceder a Lección 12: Capas <div>
©oletusWEBos 2009 all right reserved | Contácta con oletusWEBos.es
Design By: JTole®