Cómo crear una simple hoja de estilo css usando bloc de notas
Thysteaches, cómo usar la aplicación Windows `Notepad para almacenar información para una página web escrita en HTML y CSS. HTML es el lenguaje de programación que se utiliza para crear su página web, mientras que CSS es el idioma que determina el color, la fuente, y así sucesivamente los elementos HTML en la página web.
Pasos
Parte 1 de 3:
Creando una página HTML1. Libreta abierta. Abierto Comienzo


2. Indique el tipo de documento. Tipo en Bloc de notas, luego presione ↵ Entrar para iniciar una nueva línea.

3. Añadir la etiqueta HTML. Escriba y presione ↵ Entrar.

4. Entrar en la etiqueta del cuerpo. Escriba y presione ↵ Entrar. Ahora puede comenzar a ingresar la información de su página web.

5. Agregar un encabezado. Escribir
TEXTO
, Asegurarse de reemplazar "TEXTO" con su encabezado de página preferido, y presione ↵ Entrar.Bienvenidos!
en el bloc de notas.
6. Añadir texto debajo del encabezado. Escribir TEXTO , Asegurarse de reemplazar "TEXTO" con su mensaje preferido, y presione ↵ Entrar.

7. Añadir más encabezados y párrafos. Cada encabezado y párrafo subsiguiente deben tener un número ascendente aplicado a ella, por ejemplo, su segundo encabezado tendrá etiquetas a su alrededor, y el segundo párrafo tendrá etiquetas.

8. Cierre el cuerpo y las etiquetas HTML. Una vez que haya ingresado su última línea de código, escriba en su propia línea y presione ↵ ingrese, luego escriba . Su documento ya está listo para estar diseñado con CSS.
Parte 2 de 3:
Añadiendo CSS1. Entiende cómo funciona CSS. Utiliza CSS para cambiar la apariencia de un elemento HTML (E.gramo., un párrafo). CSS se escribe típicamente en el siguiente formato de línea por línea:
etiqueta element {
(por ejemplo,pag {
)MODIFICADOR: Propiedad-
(por ejemplo,Tamaño de fuente: 20px-
)MODIFICADOR: Propiedad-
(por ejemplo,de color negro-
)}

2. Coloque un espacio entre el y etiquetas. Estos deben estar cerca de la parte superior de la página.

3. Entrar en una etiqueta de cabeza. Escriba y presione ↵ Entrar.

4. Añadir una etiqueta de estilo. Escriba y presione ↵ Entrar.

5. Cambia el color de fondo de tu página web. Para hacerlo:

6. Estilo tu primer encabezado. Escribir H1 { y presione ↵ ingrese, agregue un modificador y presione ↵ ENTER, y escriba} y presione ↵ Entrar. Puede agregar múltiples modificadores a un elemento siempre que cada modificador esté en su propia línea. Los modificadores comunes incluyen lo siguiente:

7. Estilo tu primer párrafo. Escribir P1 { y presione ↵ ingrese, agregue un modificador y presione ↵ ENTER, y escriba} y presione ↵ Entrar.

8. Estilo el resto de tu documento. Puede diseñar cualquier elemento haciendo referencia a su texto de etiqueta y colocar un soporte de rizado abierto ({), agregando modificadores y luego cerrando el soporte (}).

9. Cerrar el estilo y las etiquetas de la cabeza. En una nueva línea debajo de su último texto de estilo, escriba y presione ↵ ingrese, luego escriba y presione ↵ Entrar. Su hoja CSS está completa, lo que significa que ahora puede revisarlo y guardarlo.
Parte 3 de 3:
Guardando el documento1. Revisa tu CSS Stylesheet. Su documento CSS variará ligeramente, pero debería verse algo así:
cuerpo {
Color de fondo: blueBlue-
}
H1 {
Tamaño de fuente: 45px-
}
P1 {
de color negro-
}
Hola!
Soy una iguana

2. Hacer clic Archivo. Está en la esquina superior izquierda de la ventana del bloc de notas. Aparecerá un menú desplegable.

3. Hacer clic Guardar como…. Verás esto cerca de la parte inferior del menú desplegable. Haciendo clic en que solicita una ventana para abrir.

4. Seleccione una ubicación de guardar. Haga clic en una carpeta (E.gramo., Escritorio) en el lado izquierdo de la ventana.

5. Haga clic en el "Guardar como tipo" caja desplegable. Aparecerá un menú desplegable.

6. Hacer clic Todos los archivos. Está en el menú desplegable.

7. Nombra tu archivo con un ".html" extensión. En el "Nombre del archivo" Campo de texto, escriba su nombre de documento preferido (E.gramo., "Mi CSS") seguido por .html.

8. Hacer clic Ahorrar. Está en el lado inferior derecho de la "Guardar como" ventana. Esto guardará su hoja CSS en un formato ejecutable, lo que significa que puede abrirlo en su navegador preferido o el editor HTML en lugar de en el bloc de notas.
Consejos
Al codificar HTML o CSS, en realidad no importa la cantidad de espacios entre las líneas de código, puede presionar ↵ ingrese varias veces después de cada línea sin cambiar la función del programa.
Intente sangrando diferentes partes de su CSS Stylesheet para facilitar la búsqueda de elementos. Por ejemplo, puede sangrar el código de encabezado una vez y el código de párrafo dos veces.
Advertencias
Siempre pruebe su código antes de subirlo a un sitio web o compartirlo con otras personas.