Como hacer una pagina web y ganar dinero
Creada para aprender lo que mas nesesitas porque la calidad es mejor que la cantidad.
Blog

Hoja de estilos CSS

Tags: estilo, css, manual, html
publicado el 2010-06-25   leido 4165 leídas

Muchas veces nos vemos un poco limitados al trabajar solo con HTML, aplicar colores, tamaño de fuentes y demás puede ser casi imposible si nuestra pagina web tiene mucho contenido.

Para eso usaremos los estilos CSS, con ellos podemos aplicar cambios de colores, fuentes, margenes, espacios, etc. a la web mucho mas fácil.

 

 

Cómo crear una hoja de estilos CSS


La hoja de estilos CSS no contiene código HTML, por lo tanto no deberemos escribir etiquetas HTML en el, para crear la hoja de estilos vamos a:

  1. Abrimos el Dreamweaver, luego Nuevo > Pagina Basica > CSS
  2. Clic en Archivo -> Guardar Como... se nos abrirá una ventana donde tendremos que decirle en que ubicación queremos guardar la hoja de estilos, nosotros los haremos en la carpeta ejemplo-pw2 donde estan los demas archivos de este curso.
  3. Guardamos el archivo con el nombre: "estilos.css".

Muy bien, una vez que tengamos el archivo estilos.css vacio tenemos que lograr, de alguna forma, que los estilos que escribamos en ese archivo sean tomados en cuenta por el archivo HTML.

    Nota: recuerda que NO hay que escribir código HTML en la hoja de estilos.

Relacionar la hoja de estilos CSS con nuestra pagina web


Para relacionar la hoja de estilos CSS utilizaremos la etiqueta <link>, en ella deberemos especificar la ubicación, tipo de archivo y la relación entre la hoja de estilos y la pagina web, debes acordarte SIEMPRE, que la etiqueta <link> va dentro de la etiqueta <head>, de esta forma:
<link href="estilos.css" rel="stylesheet" type="text/css" />
Ahí vemos que se especifican varios atributos, cada uno sirve para:
  • href: busca la hoja de estilos
  • rel: le dice la relación
  • type: le dice que tipo de archivo es, o mejor dicho, que contenido llevará dentro.
  • Guardamos esto como index.html o con la pagina que venias trabajando.
Para probar si lo hicimos bien, abriremos la hoja de estilos (estilos.css) y escribimos esto:
body{background-color:black;}
Guardamos la hoja de estilos (estilos.css), guardamos la pagina html y abrimos el archivo html con nuestro navegador (Internet Explorer, Firefox, Opera, etc), si todo fue bien tendriamos que ver el fondo de nuestra página de color negro.

Te gust?

Insertar una imagen con Html

Estructura básica del código CSS

 
Información
Christian Valencia publicado porPor: Ero-Fierce

Suscribete
Recibe los ultimos articulos en tu email:


Ultimos Artculos
Hacer SEO en el 2016 - 2017
Habilitar sonido al pulsar las teclas Bloq Mayús, Bloq Num y Bloq Des
10 trucos viejos, seo que nunca te dijeron
15 Efectos carrusel como pagina de libro animado con ejemplos
No se pudo generar una instancia de usuario de SQL Server debido a un error (.mdf
Solucion Error 26. No se encontró el servidor o éste no estaba accesible. Sql

Todos los tutoriales

Hacer una web paso a paso Php y MySQL Javascript
Posicionamiento Web SEO Cómo ganar dinero con tu web Herramientas y Programas Web
Maquetación con CSS Hosting y Dominios MySQL y Phpmyadmin
Ajax UML: Analisis y Diseño Programacion Orientada a Objetos
Java
 
Copyright © 2009 - pagina Web 2 - Todos los derechos Reservados