Vamos a analizar esto para que todos lo tengamos un poco más claro y aprendamos un poco más, oki? Gracias por tu colaboración Gianbros.
<p style="border : 0px ; text-align : center ; color: blue ; height:50 ; font: bold 25px Comic Sans MS, sans-serif">probando cambio de letra </p>
Hay varias formas de darle propiedades a un elemento. Con propiedades me refiero a color, tamaño, borde, fondo, etc, etc. Una forma es la que el amigo Gian nos comenta y es añadir el estilo dentro de la linea de html del elemento. Así para un párrafo como este:
probando cambio de letra</p>
podemos ir cambiando sus propiedades dentro de la etiqueta de apertura, añadiendo por ejemplo...
- border:0px que dibuja un borde de ancho cero (es decir, ninguno) al rededor del párrafo.
- Text-align:center que centra ese elemento.
- Color:blue que le da un color azul al texto.
- height:50px para darle una altura al párrafo (que no al texto) de 50 pixeles.
- font: bold 25px Comic Sans MS, sans-serif para especificar que la fuente a de ser en negrita (bold) de un tamaño de 25 pixeles (25px) del tipo de fuente ComicSansMs, sans-serif, etc, etc.
Y quedaría como indica Gianbros.
Todo esto está muy bien, pero... imagina que a cada uno de los párrafos, titulos, enlaces, etc, de la web le indicamos el estilo que queremos que tenga de esa manera. Para empezar hay que modificar cada linea para darle esas propiedades. Si creamos 10 páginas y todas ellas tienen un título, querremos que todos sean iguales, no? Pues habría que memorizar el estilo que le dimos al titulo de la primera página para luego ir copiandolo en el resto de títulos y lo mismo para el resto de elementos...
Por otro lado, si un dia decidimos que el tamaño de los párrafos es demasiado grande, para hacerlo menor habría que modificar ese código en TOOODAS las páginas. Hoy quizás sean 10 páginas, pero te aseguro que en unos meses serán muchas maás. El trabajo puede ser horrible, no crees?
Pero cual es la alternativa? Usar la Hoja de Estilos, que para eso se inventó. Se trata de un fichero donde definimos estilos para los elementos de nuesta página web. Por ejemplo, si queremos crear un tipo de párrafo con esas propiedades que propuso Gianbross, yo introduciria esta linea dentro de la hoja de estilos:
p.tipouno { border:0px ; text-align:center ; color:blue ; height:50px ; font:bold 25px Comic Sans MS, san-serif}
Guardaría la hoja de estilos y luego, en cada párrafo de mis páginas en los que quiera que tengan esas propiedades añadiría esto que señalo en verde:
esto era un párrafo de mi web al que no quiero dar esas propiedades</p>
<p class="tipouno">esto es otro al que quiero dar estas propiedades de antes</p>
Qué he ganado? Pues para empezar, en la hoja html ya no tengo que escribir todás las propiedades de antes sino tan solo añadirle esto class="tipouno"
Además, si el mes que viene no me gusta el tamaño y lo quiero más pequeño, cambio en la hoja de estilos el tamaño y donde pone 25px pongo por ejemplo 15px. Guardo la hoja de estilos y automáticamente ha cambiado el tamaño en TODOS los párrafos de TODA la web con tan solo variar un archivo, la hoja de estilos.
Esto es un avance, verdad? Claro que hay que saber un poquito de css, pero si haceis el curso completo paso a paso de CCTW aprendereis eso y más.
Alguna duda? Pues ya sabes, a preguntarnos!! :wink:
