Primeros pasos con CSS (hojas de estilo)

Actualizado el 21/10/2007 < > 11 Cometarios

Resumen: Ideas básicas sobre la utilidad de usar CSS y como vincular estos archivos a documentos HTML.

Meneame Bitacoras

¿Porqué Usar CSS?

CSS (Cascading Styles sheets) también conocido como hojas de estilo, es una nueva forma de organizar nuestros sitios web, pero ¿porqué?, CSS atrae a una nueva metodología por necesidad, la necesidad de separar el contenido de la apariencia.

Cómo desarrollador esto significa que la información de nuestro sitio web debe ir dentro de los archivos HTML, pero estos HTML no deben contener información acerca de cómo se muestra la información. La información de cómo se deberían mostrar los documentos HTML se ubica en archivos CSS.

Ventajas de CSS ¿Qué logramos usando CSS?

  • Separar el contenido de la apariencia (del diseño).
  • Modelos de diseños flexibles (pocos límites de personalización del html).
  • Alta velocidad de carga (usando CSS se aminora la cantidad de código fuente).
  • Fácil y sencillo para el mantenimiento.
  • Fácil de transportar.
  • Avanzadas posibilidades de diseño.
  • Innovar en el uso del cliente.
  • Fácil Acceso.

Bueno pasamos un poco a lo que és el código, auqí tenéis un simple ejemplo de uso de estilos en un párrafo para lograr un color azul:

<p style="color:blue">esto es una prueba</p>

Cómo escribimos para CSS

En CSS nosotros escribimos de la siguiente manera -> nombre: valor; Pero primero debemos tener en claro, como adjuntamos una hoja de estilos a nuestros archivos para poder empezar a escribir.

Maneras de adjuntar una hoja de estilos CSS a un archivo HTML

Existen 3 maneras de adjuntar estilos a nuestras hojas de contenidos, la primera es usar el tag <style>:

<style type=”text/css”>
p { color: blue; }
</style>

La segunda, la más recomendada, es la de enlazar a una hoja de estilos externa (un archivo externo, llámese por ejemplo style.css, que contiene los códigos del diseño de nuestros html) como se muestra a continuación:

<link type=”text/css” href=”style.css” />

Y la tercera, la más vieja de todas:

<style type=”text/css”>
@import “style.css”;
</style>

Ésta tercera forma se ha usado con frecuencia para ocultar la hoja de estilos a ciertos navegadores y forzar a que el diseño de la página se vea bien en la mayoría de ellos.

Nota: Las diferentes maneras de enlazar con una hoja de estilos (CSS) deben ir dentro del tag <head> en el cuerpo del html.

Meneame Bitacoras

Publicado el 21/10/2007, última actualización 21/10/2007.

Autor: Hernán Funes

URL: http://www.elguruprogramador.com.ar

Añadir Comentario (Subir al texto)

11 Cometarios

  1. CSS para principiantes :: LaWebera.es

    [...] avances en la creación de páginas y programas Web. Uno de los aspectos más importantes de CSS es que no sólo maneja los estilos y tipografía sino también la distribución espacial del [...]

    Jueves, 1 de octubre 2009

  2. Capas visibles e invisibles con CSS :: LaWebera.es

    [...] el caso que nos corresponde, como primera instancia hay que definir las propiedades de la capa CSS. En ella también podremos poner información, imágenes, links, [...]

    Miércoles, 7 de octubre 2009

  3. Novedades en CSS3

    [...] gran cosa es esto del css, y que buenas son las nuevas especificaciones. Ya vamos por la tercera de la saga, y las novedades [...]

    Lunes, 23 de noviembre 2009

  4. Como usar distintos colores en un select menu con CSS

    [...] Segundo: Dentro de las etiquetas HEAD definimos el CSS. [...]

    Lunes, 14 de diciembre 2009

  5. Diseño de formularios con CSS y HTML

    [...] Usando CSS, podemos cambiar muchas cosas sobre el aspecto de nuestros formularios y los elementos dentro de ellos; podemos redefinir la etiqueta de HTML que controla estos elementos, o podemos aplicar las llamadas clases css a estas etiquetas. [...]

    Lunes, 14 de diciembre 2009

  6. Normas elementales en HTML

    [...] tutorial está basado en las recomendaciones del W3C (y II), donde la idea es utilizar CSS siempre que sea posible, pero seguir incluyendo HTML semántico para maximizar la [...]

    Jueves, 24 de diciembre 2009

  7. Insertar, modificar, buscar y remplazar textos con Adobe Dreamweaver

    [...] este artículo. Para ello, bastará con abrir Adobe Dreamweaver, crear un nuevo documento con su archivo CSS (recordemos que es preferible emplear siempre las versiones de los lenguajes y los métodos más [...]

    Miércoles, 14 de abril 2010

  8. Manejo de CSS con el panel de Estilo CSS de Adobe Dreamweaver

    [...] del panel pero a la derecha, también aparecen tres íconos. El primero permite adjuntar un nuevo archivo de estilo CSS. Cuando se selecciona esta opción, se abre un cuadro donde aparece, en primer lugar, un campo [...]

    Lunes, 19 de abril 2010

  9. Maquetación de páginas web: posición de las capas (primera parte)

    [...] guardaremos el archivo llamándolo “ejemplo.html”. A continuación, deberemos crear el archivo CSS, empleando el mismo procedimiento, solo que este archivo, por ahora, lo dejaremos en blanco, lo [...]

    Miércoles, 21 de abril 2010

  10. Web Developer Toolbar de Mozilla Firefox: Casi un editor Wysiwyg (primera parte)

    [...] esta herramienta, se abre el siguiente cuadro, que permite la edición del código del o de los archivos CSS de la página que se encuentra [...]

    Miércoles, 28 de abril 2010

  11. Maquetación de páginas web: crear un menu horizontal con CSS

    [...] se puede ver, se ha colocado el link que vincula la página con un archivo CSS que está ubicado en un directorio “archivos”, el cual deberemos crear y colocar en su interior [...]

    Miércoles, 9 de junio 2010

(Subir al texto)

Añadir Comentario

* Campos obligatorios