Crear la hoja de estilo CSS
De la misma manera que creamos un archivo de texto separado para el HTML, usted creará un archivo de texto para el CSS. Si necesita imágenes para este proceso, consulte el primer tutorial. Aquí están los pasos para crear su hoja de estilo CSS en el Bloc de notas:
- Elija Archivo> Nuevo en el Bloc de notas para obtener una ventana vacía
- Guarde el archivo como CSS haciendo clic en Archivo <Guardar como …
- Vaya a la carpeta my_website en su disco duro
- Cambie "Guardar como tipo:" a "Todos los archivos"
- Nombre su archivo "styles.css" (deje las comillas) y haga clic en Guardar
Enlace la hoja de estilos CSS a su HTML
Una vez que tenga una hoja de estilo para su sitio web, deberá asociarla a la propia página web. Para ello utiliza la etiqueta de enlace. Coloque la siguiente etiqueta de enlace en cualquier lugar dentro de la
Etiquetas de su documento pets.htm:
03 de 10 Cuando estés escribiendo XHTML para diferentes navegadores, una cosa que aprenderás es que todos parecen tener diferentes márgenes y reglas sobre cómo mostrar las cosas. La mejor manera de asegurarse de que su sitio tenga el mismo aspecto en la mayoría de los navegadores es no permitir que elementos como los márgenes se prefieran a la opción del navegador. Prefiero comenzar mis páginas en la esquina superior izquierda, sin relleno adicional o margen alrededor del texto. Incluso si voy a rellenar el contenido, establezco los márgenes a cero para que comience con la misma pizarra en blanco. Para hacer esto, agregue lo siguiente a su documento styles.css: La fuente suele ser lo primero que querrá cambiar en una página web. La fuente predeterminada en una página web puede ser fea, y en realidad está en el navegador web, por lo que si no define la fuente, realmente no sabrá cómo se verá su página. Normalmente, cambiaría la fuente en los párrafos o, a veces, en todo el documento. Para este sitio definiremos la fuente en el nivel de encabezado y párrafo. Agregue lo siguiente a su documento styles.css: Comencé con 1em como mi tamaño base para párrafos y elementos de lista, y luego lo utilicé para establecer el tamaño de mis titulares. No espero usar un título más profundo que h4, pero si planea hacerlo, también querrá ponerle estilo. Los colores predeterminados para los enlaces son azul y púrpura para los enlaces no visitados y visitados respectivamente. Si bien esto es estándar, es posible que no se ajuste al esquema de color de sus páginas, así que vamos a cambiarlo. En su archivo styles.css, agregue lo siguiente: Configuré tres estilos de enlace, el enlace a: como predeterminado, a: visitado para cuando se ha visitado, cambio el color y a: flotar. Con un: hover tengo el enlace obtener un color de fondo e ir negrita para enfatizar que es un enlace para hacer clic. Ya que colocamos la sección de navegación (id = "nav") primero en el HTML, vamos a darle un estilo primero. Necesitamos indicar qué tan ancho debe ser y poner un margen más amplio en el lado derecho para que el texto principal no se golpee contra él. También pongo un borde a su alrededor. Agregue el siguiente CSS a su documento styles.css: La propiedad de estilo de lista configura la lista dentro de la sección de navegación para que no tenga viñetas o números, y el pie de página le da estilo a la sección de derechos de autor para que sea más pequeña y esté centrada dentro de la sección. Al colocar su sección principal con posicionamiento absoluto, puede estar seguro de que permanecerá exactamente donde desea que se quede en su página web. Hice el mío de 800 píxeles de ancho para acomodar monitores más grandes, pero si tiene un monitor más pequeño, es posible que desee hacerlo más estrecho. Coloque lo siguiente en su documento styles.css: Como ya he establecido la fuente del párrafo anterior, quería darle a cada párrafo una pequeña "patada" adicional para que se destaque mejor. Hice esto poniendo un borde en la parte superior que resaltaba el párrafo más que solo la imagen sola. Coloque lo siguiente en su documento styles.css: Decidí hacerlo como una clase llamada "línea superior" en lugar de simplemente definir todos los párrafos de esa manera. De esta manera, si decido que quiero tener un párrafo sin una línea amarilla superior, simplemente puedo dejar fuera de la clase = "topline" en la etiqueta de párrafo y no tendrá el borde superior. Las imágenes normalmente tienen un borde a su alrededor, esto no siempre es visible a menos que la imagen sea un enlace, pero me gusta tener una clase dentro de mi hoja de estilo CSS que desactiva el borde automáticamente.Para esta hoja de estilo, creé la clase "noborder", y la mayoría de las imágenes en el documento son parte de esta clase. La otra parte especial de estas imágenes es su ubicación en la página. Quería que fueran parte del párrafo en el que estaban sin utilizar tablas para alinearlos. La forma más sencilla de hacer esto es usar la propiedad CSS flotante. Coloque lo siguiente en su documento styles.css: Como puede ver, también hay propiedades de margen establecidas en las imágenes, para asegurarse de que no se rompan contra el texto flotado que está al lado de ellas en los párrafos. Una vez que haya guardado su CSS, puede volver a cargar la página pets.htm en su navegador web. Su página debe ser similar a la que se muestra en esta imagen, con las imágenes alineadas y la navegación colocada correctamente en el lado izquierdo de la página. Siga estos mismos pasos para todas sus páginas internas para este sitio. Desea tener una página para cada página en su navegación. Fijar los márgenes de página
Cambiando la fuente en la página
Haciendo sus enlaces más interesantes
Estilo de la sección de navegación
Posicionando la sección principal
Estilo de sus párrafos
Estilo de las imágenes
Ahora mira tu página completa
