HOJAS DE ESTILO - CSS
By Lino Bertuzzi

CSS (Cascading Style Sheets), en informática, es un lenguaje utilizado para definir el formato o disposición de los documentos HTML, XHTML y XML en los sitios web y las páginas web relacionadas. Las reglas para componer el CSS están contenidas en un conjunto de directrices (Recomendaciones) emitidas desde 1996 por el World Wide Web Consortium (W3C). La introducción del CSS fue necesaria para separar el contenido del formato y permitir una programación más clara y fácil de usar, tanto para los autores de páginas HTML como para los usuarios, asegurando al mismo tiempo la reutilización del código y su facilidad de mantenimiento. Utilizando el editor DREAMWEAVER, si uno sabe el idioma Inglés, la hoja de estilo es bastante fácil. Vamos a escribir y salvar y enlazar en la pàgina estas instrucciones entre <head> ....</head>:


<style type="text/css">

body {
background-image: url(images/roma-di-notte.jpg";
background-repeat: no repeat;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}

</style>

Este archivo contiene una serie de instricciones para el navegador::

  1. <style type="text/css"> dice que el css es un archivo de tipo textual.
  2. body {.... pongan aquí instrucciones..... } Indica que el formato se refiere al 'cuerpo' de la página. La paréntesis { indica el comienzo de las instrucciones. Al final, para indicar que la serie de instrucciones está terminada, cierre con la paréntesis }
  3. background-image: url(images/roma-di-notte.jpg"; mi imagen de fondo página
  4. background-repeat: no repeat; Nuestra imagen a pesar de tener una resolución de 1920 x 780 px tiene un bajo peso [50 KB] y no necesita ser repetida (no repeat). Para ocupar automaticamente todo el fondo de pantalla se pone background-repeat: space;
    Después se ponen instrucciones para el margen de la página que se desea dejar, medido en píxeles [px] o % - aquí ponemos los márgenes = cero. Pero podríamos poner márgenes diferentes, como sigue, dando un valor a cada uno..
    • margin-left: 0px;
    • margin-top: 0px
    • margin-right: 0px;
    • margin-bottom: 0px;

Suponiendo que los márgenes son todos iguales, puede escribir el margin una sola línea, y el archivo superior se convierte en

<style type="text/css">


body {
background-image: url(images/roma-di-notte.jpg);
background-repeat: no repeat;
margin: 0px;
}

</style>

Ahora, antes de decir lo que hacemos con la imagen, sacamosla vamos a cambiar sólo el color de la página. Añadamos el color de la fuente también:

<style type="text/css">

body {
background-color: #CC0000;
margin: 0px;
color:#FFFFFF
}

</style>

Una de las utilidades DREAMWEAVER es que incluso se le permite elegir el color del elemento. Vamos a abrir la página anterior con un editor de texto y vamos a agregar estilos, o en lugar a copiar y pegar todo lo que sigue. Guarde con otro nombre y la misma extensión .htm, guarde como page_2.htm que luego abriremos en el navegador:

<!doctype html>
<html>
<head>
<meta charset="utf-8">

<!---Estos elementos anteriores son comunes a todas las páginas a que se da este estándar . --->

<!--- Cabeza = la cabecera. Aquí - entre <head> y </head> vamos a escribir muchos elementos diferentes. Ahora sólo el título de la página y la metaetiquetas para describir el contenido-->

<title>Título que aparece en el navegador al abrir la página </title>
<meta name="description" content="Tomemos un ejemplo de estructuración de una página web paso a paso, introduciendo los metatags principales">
<meta name="keywords" content="pagina web, pagina, base, meta, tag">

<!---Debajo, entre el body vamos a escribir el contenido del cuerpo de la página --->

<style type="text/css">

body {
background-color: #CC0000;
margin: 0px;
color:#FFFFFF
}

</style>

</head>

<body>

This is the line of sample text that appears in the body of page. Check what has changed from the previous page. that is the background color and the text color

</body>
</html>

NOTA: es mejor guardar la hoja de estilo para que sea reutilizable. Para hacer esto usted quiere hacer un archivo de texto, incluyendo en lugar del encabezado<style type="text/css">.....</style> lo que sigue.

@charset "utf-8";
/* CSS Document */

Entonces se guardará el texto el la carpeta css como .css con un nombre (ejemplo: pagprinc.css) en este caso, en lugar de todas las instrucciones anteriores con respecto al estilo, entre el <head>... < / head> se va a escribir:

<link href="css/pagprinc.css"rel="stylesheet" type="text/css" />

Con la que nos referimos al fichero que contiene la hoja de estilo que hemos guardado en la carpeta css / como pagprinc.css: El color de la fuente es blanco, la parte inferior de la página es roja.