Cómo crear un archivo CSS maestro: dummies

Muchos diseñadores crean su propia versión de un archivo CSS maestro de códigos HTML, que luego adaptan a las necesidades de cada sitio individual, para ayudar a acelerar el proceso de construcción de un sitio web desde cero.

A medida que construyes más y más sitios web, algunos estilos se convertirán en una parte regular de tu práctica de diseño estándar. Por ejemplo, siempre puede establecer los márgenes de página en 0, especificar un color de fondo de página, elegir una fuente predeterminada para todo el texto, crear estilos de redefinición para párrafos y encabezados, especificar atributos de estilo para al menos dos hipervínculos (enlace y visitado) estados, y crea un estilo de viñeta personalizado.

Utilice este archivo para probar los estilos para su CSS a medida que crea el archivo maestro css. El archivo HTML de muestra incluye texto de párrafo, un encabezado 1, un encabezado 2, una lista desordenada y un par de hipervínculos que funcionan.

Para crear su propio archivo CSS maestro, siga estos pasos:

Cree un nuevo documento en blanco, sin ninguna codificación HTML, y guárdelo con el nombre del archivo maestro. css.

Guarde este archivo CSS en la misma ubicación en su computadora que su muestra. archivo html
Dentro del área de tu muestra. archivo html, agregue un enlace al nuevo archivo css externo que incluye el tipo de medio establecido en todos:
Este enlace le dice a la muestra. archivo html para usar las definiciones de estilo en el CSS externo vinculado.
Dentro del maestro. archivo css, cree un estilo de redefinición de etiqueta para la etiqueta que establece los márgenes de página superior, izquierda, inferior y derecha en 0px; el relleno en los cuatro lados de la página a 10px; y el fondo a un color anaranjado claro amelocotonado con el valor hexadecimal de # fc3bb6.

Su código de estilo debería verse así:
```
cuerpo {margen: 0px; relleno: 10px; background-color: # fc3bb6;}
```
Cuando los cuatro lados de un objeto usan el mismo valor, como con el espaciado de margen y el relleno que se muestran aquí, el valor debe especificarse en el CSS solo una vez. Sin embargo, cuando el valor es diferente en uno o más lados, debe especificar valores para cada uno de los lados:
```
cuerpo {margen: 10px 10px 0px 0px; relleno: 20px 0px 0px 20px; background-color: # fc3bb6;}
```
Cree un estilo de redefinición de etiqueta en su archivo CSS para las etiquetas
,
y
especificando la fuente, el tamaño de fuente y el color de fuente para cada una.

Utilice cualquier fuente, tamaño, peso y color que desee porque puede personalizar los valores más tarde para que coincida con cualquier proyecto específico. Aquí hay un ejemplo del código que puede usar:
```
p {font-family: Georgia, "Times New Roman", Times, serif; tamaño de letra: 12px; color: # 000000;} h1 {font-family: Arial, Helvetica, sans-serif; tamaño de letra: 36px; font-weight: negrita; color: # 000066;} h2 font-family: Arial, Helvetica, sans-serif; tamaño de letra: 24px; font-weight: negrita; color: # 000066;}
```
Para cambiar el estilo de hipervínculo predeterminado, puede crear estilos de elemento de pseudoclase para cada uno de los cuatro estados de hipervínculo.

Puede especificar los atributos que desee para cada uno de los cuatro estados, desde cambiar la fuente o el peso de la fuente, hasta modificar el color del texto o el color de fondo, o alterar la decoración de texto predeterminada.

Aquí hay un ejemplo del código que puede usar para los cuatro estados de enlace:
```
a: enlace {font-weight: bold; texto-decoración: subrayado; color: # 0099cc;} a: visited {font-weight: bold; texto-decoración: subrayado; color: # 990000;} a: hover {font-weight: normal; texto-decoración: ninguno; color: #ffffff; background: # ff9933;} a: active {font-weight: normal; texto-decoración: ninguno; color: #ffffff; background: # cc0000;}
```
Para aplicar estilos a la lista desordenada, puede redefinir la etiqueta
o crear un estilo de clase que se pueda aplicar selectivamente a cualquier etiqueta
con el atributo de clase. Si lo desea, especifique una imagen para reemplazar las viñetas predeterminadas.

La definición de estilo tiene el mismo aspecto ya sea que redefina la etiqueta
o que cree su propio estilo de clase personalizado; solo el selector está escrito de manera diferente, ya sea como li o quizás como. bala.

Su código para el estilo de redefinición de la etiqueta bullet li podría verse más o menos así:
```
li {list-style-position: outside; list-style-image: url (images / bullet. gif); familia de fuentes: Arial, Helvetica, sans-serif; font-size: 12px;}
```
Guarde sus archivos HTML y CSS e inicie su archivo HTML en una ventana del navegador.

Para ver la página en un navegador, puede hacer doble clic en el archivo HTML o arrastrar y soltar el ícono del archivo en cualquier ventana abierta del navegador.

El archivo debe mostrarse con todos los atributos de estilo que acaba de crear en su archivo CSS maestro. Si no se ve bien o si ciertos elementos no se muestran correctamente, vuelva a abrir los archivos y verifique la precisión de todo su código, corrija los errores que encuentre y vuelva a realizar la prueba. Asegúrese de recordar el período (.) Antes de todos los nombres de clase personalizados y un símbolo de número (#) antes de todos sus valores de color hexadecimales.
Pruebe sus nuevos estilos de hipervínculo en la ventana del navegador con
1. Mover sobre un enlace para ver el estilo de desplazamiento.
2. Al hacer clic y mantener presionado el mouse sobre un enlace para ver el estilo activo.
3. Al hacer clic en un enlace y volver a su página de muestra, haga clic en el botón Atrás del navegador para ver cómo cambia el enlace del estado normal al enlace visitado.

Ahora que tiene su primer archivo CSS maestro, en lugar de reinventar la rueda cada vez que inicia un nuevo proyecto web, puede usar este archivo como punto de partida. Por supuesto, para algunos proyectos, construir CSS desde cero podría ser más fácil o más práctico, pero si tener un archivo CSS maestro le ahorra tiempo, utilícelo como técnica de diseño.