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 HTML

1. Libreta abierta. Abierto Comienzo

, escribir bloc, y haz click en el azul Bloc aplicación en la parte superior de la ventana de inicio.

Crear una simple hoja de estilo CSS usando Bloc de notas Paso 2

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

Crear una simple hoja de estilo CSS usando Bloc de notas Paso 3

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

Crear una simple hoja de estilo CSS usando Bloc de notas Paso 4

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

Crear una simple hoja de estilo CSS usando Bloc de notas Paso 5

5. Agregar un encabezado. Escribir TEXTO, Asegurarse de reemplazar "TEXTO" con su encabezado de página preferido, y presione ↵ Entrar.

Por ejemplo, para crear un encabezado de página que dice "Bienvenidos!", Usted escribiria Bienvenidos! en el bloc de notas.

Crear una simple hoja de estilo CSS usando Bloc de notas Paso 6

6. Añadir texto debajo del encabezado. Escribir TEXTO, Asegurarse de reemplazar "TEXTO" con su mensaje preferido, y presione ↵ Entrar.

Por ejemplo, para agregar texto que diga "Soy una iguana", Entrarías Soy una iguana en el bloc de notas.

Crear una simple hoja de estilo CSS usando Bloc de notas Paso 7

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.

Asegúrese de que continúe presionando ↵ Ingrese después de cada línea de código.

Crear una simple hoja de estilo CSS usando Bloc de notas Paso 8

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 CSS

1. 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-)
}

Crear una simple hoja de estilo CSS usando Bloc de notas Paso 10

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

Crear una simple hoja de estilo CSS usando Bloc de notas Paso 11

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

Crear una simple hoja de estilo CSS usando el Bloc de notas 12

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

Crear una simple hoja de estilo CSS usando Bloc de notas Paso 13

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

Escribir cuerpo { y presione ↵ entra.

Escribir Color de fondo: blueBlue- y presione ↵ entra.

Puede usar cualquier color admitido aquí, así como "luz" o "oscuro" modificadores.

Escriba en} y presione ↵ Entrar.

Crear una simple hoja de estilo CSS usando el Bloc de notas Paso 14

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:

Tamano del texto - Escribir Tamaño de fuente: 30px- Para configurar su texto como fuente de 30 puntos. Sustituye cualquier número que quieras usar.

Color de texto - Escribir de color negro- hacer texto negro. Sustituye cualquier color que quieras usar.

Alineación del texto - Escribir Texto-alineado: Centro- Para centrar el texto. También puedes escribir izquierda o derecho Para alinear el texto apropiadamente.

Fuente utilizada - Escribir Fuente-familia: Times New Roman- Para configurar su fuente como Toces New Roman. También puedes usar fuentes como verdana o Georgia.

Crear una simple hoja de estilo CSS usando Bloc de notas Paso 15

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

Los modificadores que puede usar aquí son idénticos a los utilizados para el encabezado.

Crear una simple hoja de estilo CSS usando Bloc de notas Paso 16

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 (}).

Crear una simple hoja de estilo CSS usando Bloc de notas 17

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 documento

1. 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

Crear una simple hoja de estilo CSS usando Bloc de notas Paso 19

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

Crear una simple hoja de estilo CSS usando Bloc de notas Paso 20

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.

Crea una simple hoja de estilo CSS usando el Bloc de notas 21

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

Crear una simple hoja de estilo CSS usando Bloc de notas 22

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

Crear una simple hoja de estilo CSS usando el Bloc de notas 23

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

Crear una simple hoja de estilo CSS usando el Bloc de notas 24

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.

Por ejemplo, si nombró su archivo "Mi CSS", Tipo mi CSS.html en el campo.

Si usa un programa que puede ejecutarse ".CSS" archivos, puedes usar .CSS en vez de .html aquí.

Crear una simple hoja de estilo CSS usando Bloc de notas Paso 25

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.

Pasos

TEXTO

Bienvenidos!

Hola!

Consejos

Advertencias