Introducción a CSS: Parte 1
Este primer artículo del curso de CSS y está diseñado para
que domines las técnicas básicas de esta plataforma. Debe saber al menos un
poco sobre HTML y diseño web antes de comenzar. Una vez que termines de leer
esta página, ¡estarás listo para saltar al tutorial!
CSS funciona de la mano con HTML
Junto con HTML se usa CSS para crear los hermosas páginas web
que vemos hoy. Mi curso para desarrolladores web front-end te enseña todo lo
que necesitas saber para crear sitios web increíbles.
Una introducción a las hojas de estilo en cascada
CSS es el acrónimo de "Hojas de estilo en cascada"
(por sus siglas en ingles). CSS es una extensión del HTML básico que le permite
diseñar sus páginas web. Un ejemplo de un cambio de estilo sería poner las
palabras en negrita. En HTML estándar, usarías la etiqueta <b> y la línea
quedaría algo así:
<b> ponme en negrita </b>
Esto funciona bien, y no hay nada malo en ello, excepto que
ahora, si quisiera decir que cambie todo el texto que inicialmente puso en
negrita para subrayar, tendría que ir a cada punto de la página y cambiar la
etiqueta <b>.
Otra desventaja se puede encontrar en este ejemplo:
supongamos que quiere que el texto de arriba aparezca en negrita, que el estilo
de fuente sea Verdana y cambie su color a rojo. necesitarías mucho código
envuelto alrededor del texto. Quedaría algo así:
<font color = "# FF0000" face = "Verdana,
Arial, Helvetica, sans-serif">
<strong> Este es el texto
</strong> </font>
Esto es detallado y contribuye a hacer un código HTML
desordenado. Con CSS, puede crear un estilo personalizado en otro lugar y establecer
todas sus propiedades, dale un nombre único y luego 'etiqueta' tu HTML para
aplicar estas propiedades de estilo:
<p class = "minuevoestilo"> Mi texto con
estilo CSS </p>
Y entre las etiquetas en la parte superior de su página web,
insertaría este código CSS que define el estilo que acabamos de aplicar:
<style type = "text / css">
.minuevoestilo {
Familia tipográfica: Verdana, Arial,
Helvetica, sans-serif;
font-weight: negrita;
color: # FF0000;
}
</style>
En el ejemplo anterior, incrustamos el código css
directamente en la propia página. Esto está bien para proyectos más pequeños o
en situaciones donde los estilos que estás definiendo solo se usarán en una
sola página.
Hay muchas ocasiones en las que aplicarás tus estilos a
muchas páginas y sería una molestia tener que copiar y pegar tu código CSS en
cada página. Asi que con CSS puedes mejorar tu diseño de páginas web.
Además del hecho de que estará saturando sus páginas con el
mismo código CSS, también tendrá que editar cada una de estas páginas si desea
realizar un cambio de estilo.
Al igual que con JavaScript, puede definir / crear sus
estilos CSS en un archivo separado y luego vincularlo a la página a la que
desea aplicar el código:
<link href = "miprimerarchivo.css" rel =
"stylesheet" type = "text / css">
La línea de código anterior enlaza su hoja de estilo externa
llamada 'miprimerarchivo.css' al documento HTML. Coloque este código entre las etiquetas <head>
</head> en su página web.
No hay comentarios:
Publicar un comentario
Nota: solo los miembros de este blog pueden publicar comentarios.