Cómo crear un archivo css maestro

Muchos diseñadores crean su propia versión de un archivo CSS maestro de códigos HTML, que luego se 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 crea más y más sitios web, algunos estilos se convertirán en una parte regular de su práctica de diseño estándar. Por ejemplo, siempre que desee establecer sus márgenes de página a 0, especificar un color de fondo de la página, elegir un tipo de letra predeterminado para todo el texto, crear redefinir estilos de párrafos y encabezados, especifique los atributos de estilo por lo menos dos (enlace y visitado) hipervínculo estados, y hacen un estilo de viñeta personalizado.

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

Video: Tutorial #3 CSS y HTML - Crear archivos CSS y enlazarlos con HTML

Para crear su propio archivo CSS maestra, sigue estos pasos:

Crear un nuevo documento en blanco, sin ningún tipo de codificación HTML y guardarlo con el nombre de archivo master.css.
Guarde este archivo CSS en el mismo lugar en el equipo como su sample.html archivo.
Dentro de área de su sample.html archivo, añadir un enlace a la nueva externa css archivo que incluye el tipo de soporte establecido en todas:
Este enlace le dice al sample.html presentar a utilizar las definiciones de estilo en el CSS externo vinculado.
Dentro de master.css archivo, cree un estilo de redefinir la etiqueta para el etiqueta que fija la parte superior, izquierda, abajo, derecha y de página a los márgenes 0px- el relleno en los cuatro lados de la página para 10px- y el fondo a un color naranja color de rosa claro con el valor hexadecimal # fc3bb6.
Su código de estilo debe tener este aspecto:
```
body {margin: 0px; padding: 10px; background-color: # fc3bb6-}
```
Cuando los cuatro lados de un objeto utilizan el mismo valor, como con el espaciado de margen y el relleno que se muestra aquí, el valor necesita ser especificado en el CSS sólo una vez. Sin embargo, cuando el valor es diferente en uno o más lados, debe especificar los valores para cada uno de los lados:
```
body {margin: 10px 10px 0px 0px; padding: 20px 0px 0px 20px; background-color: # fc3bb6-}
```
Crear un estilo de redefinir la etiqueta en su archivo CSS para la
, , y las etiquetas especificando el tipo de letra, tamaño de fuente y color de fuente para cada uno.
Utilizar cualquier tipo de letra, tamaño, peso y color que te gusta porque se puede personalizar los valores más tarde para adaptarse a cualquier proyecto específico. Aquí está un ejemplo de código que puede utilizar:
```
p {font-family: Georgia, "Times New Roman", Times, serif-font-size: 12px; color: # 000000-} h1 {font-family: Arial, Helvetica, sans-serif-font-size: 36px; font-weight: bold-color: # 000066-} h2font-family: Arial, Helvetica, sans-serif-font-size: 24px; font-weight: bold-color: # 000066-}
```
Para cambiar el estilo de hipervínculo predeterminado, puede crear estilos de elementos pseudo-clase para cada uno de los cuatro estados de hipervínculo.
Puede especificar cualquiera de los atributos que le gustan para cada uno de los cuatro estados, desde cambiar el tipo de letra o fuente de peso, para modificar el color del texto o el color de fondo, a la alteración de la decoración de texto predeterminado.
Aquí está un ejemplo de código que puede utilizar para los cuatro estados de los enlaces:
```
a: link {font-weight: bold-text-decoration: underline-color: # 0099cc-} a: visited {font-weight: bold-text-decoration: underline-color: # 990000-} a: hover {Font- weight: normal-text-decoration: none; color: # ffffff-background: # ff9933-} a: active {font-weight: normal-text-decoration: none; color: # ffffff-background: # cc0000-}
```
Para el estilo de la lista desordenada, puede volver a definir ya sea el
etiquetar o crear un estilo de clase que se puede aplicar selectivamente a cualquier
etiqueta con el clase atributo. Si lo desea, especifique una imagen para sustituir las balas por defecto.
La definición de estilo se ve igual si se redefine el
etiqueta o crear su propio estilo-clase personalizada sólo el selector se escriben de manera diferente, ya sea como li o tal vez como .bala.
Su código de la bala li redefinir estilo etiqueta podría ser algo como esto:
```
li {list-style-position: fuera-list-style-image: url (images / bullet.jpg) -font-family: Arial, Helvetica, sans-serif-font-size: 12px;}
```
Guarde los archivos HTML y CSS y poner en marcha 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 icono del archivo en cualquier ventana del navegador abierta.
El archivo debe mostrar con todo el estilo atributos que acaba de crear en su archivo CSS maestro. Si no se ve del todo bien o si ciertos elementos no se muestran correctamente, vuelva a abrir los archivos y comprobar la exactitud de todo el código, corregir cualquier error que encuentre, y vuelva a probar. Asegúrese que ha recordado que añadir el período (.) Antes de que todos los nombres de las clases personalizadas y un símbolo de número (#) Antes de que todos los valores de color hexadecimales.
Ponga a prueba sus nuevos estilos de hipervínculo en la ventana del navegador

Al pasar el ratón sobre un enlace para ver el estilo de vuelo estacionario.
Al hacer clic y manteniendo pulsado el ratón sobre un enlace para ver el estilo activo.
Al hacer clic en un vínculo y volver a su página de muestra haciendo clic en el botón Atrás del navegador para ver cómo cambia el enlace de la normal al estado enlace visitado.

Ahora que tiene su primer archivo CSS principal, en lugar de reinventar la rueda cada vez que se inicia un nuevo proyecto web, puede utilizar este archivo como el punto de partida. Por supuesto, para algunos proyectos, la construcción de la 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, por todos los medios utilizar como una técnica de diseño.