Cómo crear una hoja de estilos CCS simple usando el bloc de notas

Coescrito por Jack Lloyd

Este wikiHow te enseñará cómo usar la aplicación Bloc de notas de Windows para guardar información para una página web escrita en HTML y CSS. HTML es el lenguaje de programación usado para crear tu página web, mientras que CSS es el lenguaje que determina el estilo (color, fuente, etc.) de los elementos HTML de la página web.

Parte 1
Parte 1 de 3:
Crear una página HTML

  1. Imagen titulada Create a Simple CSS Stylesheet Using Notepad Step 1
    1
    Abre el Bloc de notas. Abre Inicio
    Imagen titulada Windowsstart.png
    , escribe bloc de notas y haz clic en la aplicación azul Bloc de notas de la parte superior de la ventana de "Inicio".
  2. Imagen titulada Create a Simple CSS Stylesheet Using Notepad Step 2
    2
    Indica el tipo de documento. Escribe <!DOCTYPE html> en el Bloc de notas y luego presiona ↵ Enter para comenzar una nueva línea.
  3. Imagen titulada Create a Simple CSS Stylesheet Using Notepad Step 3
    3
    Añade la etiqueta HTML. Escribe <html> y presiona ↵ Enter.
  4. Imagen titulada Create a Simple CSS Stylesheet Using Notepad Step 4
    4
    Ingresa la etiqueta BODY. Escribe <body> y presiona ↵ Enter. Ahora puedes empezar a ingresar la información de la página web.
  5. Imagen titulada Create a Simple CSS Stylesheet Using Notepad Step 5
    5
    Añade un encabezado. Escribe <h1>TEXTO</h1>, asegurándote de reemplazar "TEXTO" con el título de página que prefieras, y presiona ↵ Enter.
    • Por ejemplo, para crear un encabezado de página que diga "¡Bienvenido!", escribirías <h1>¡Bienvenido!</h1> en el Bloc de notas.
  6. Imagen titulada Create a Simple CSS Stylesheet Using Notepad Step 6
    6
    Añade texto debajo del encabezado. Escribe <p1>TEXTO</p1>, asegurándote de reemplazar "TEXTO" con el mensaje que prefieras, y presiona ↵ Enter.
    • Por ejemplo, para añadir un texto que diga "Soy una iguana", ingresarías <p1>Soy una iguana</p1> en el Bloc de notas.
  7. Imagen titulada Create a Simple CSS Stylesheet Using Notepad Step 7
    7
    Añade más encabezados y párrafos. Cada encabezado y párrafo subsiguiente debe tener un número ascendente aplicado a él. Por ejemplo, el segundo encabezado tendría las etiquetas <h2></h2> alrededor, y el segundo párrafo tendrá las etiquetas <p2></p2>.
    • Asegúrate de seguir presionando ↵ Enter después de cada línea de código.
  8. Imagen titulada Create a Simple CSS Stylesheet Using Notepad Step 8
    8
    Cierra las etiquetas BODY y HTML. Una vez que hayas ingresado la última línea de código, escribe </body> en su propia línea y presiona ↵ Enter, y luego escribe </html>. El documento ahora está listo para darle estilo con CSS.

Parte 2
Parte 2 de 3:
Añadir CSS

  1. Imagen titulada Create a Simple CSS Stylesheet Using Notepad Step 9
    1
    Entiende cómo funciona CSS. CSS se usa para cambiar la apariencia de un elemento HTML (por ejemplo, un párrafo). CSS normalmente se escribe en el siguiente formato de línea por línea:[1]
    • etiqueta del elemento { (por ejemplo, p {)
    • modificador: propiedad; (por ejemplo, font-size: 20px;)
    • modificador: propiedad; (por ejemplo, color: black;)
    • }
  2. Imagen titulada Create a Simple CSS Stylesheet Using Notepad Step 10
    2
    Coloca un espacio entre las etiquetas <html> y <body>. Estas deben estar cerca de la parte superior de la página.
  3. Imagen titulada Create a Simple CSS Stylesheet Using Notepad Step 11
    3
    Ingresa una etiqueta HEAD. Escribe <head> y presiona ↵ Enter.
  4. Imagen titulada Create a Simple CSS Stylesheet Using Notepad Step 12
    4
    Añade una etiqueta STYLE. Escribe <style> y presiona ↵ Enter.
  5. Imagen titulada Create a Simple CSS Stylesheet Using Notepad Step 13
    5
    Cambia el color de fondo de tu página web. Para hacerlo:
    • Escribe body { y presiona ↵ Enter.
    • Escribe background-color: lightblue; y presiona ↵ Enter.
      • Puedes usar cualquier color que sea soportado, además de los modificadores "light" (claro) o "dark" (oscuro).
    • Escribe } y presiona ↵ Enter.
  6. Imagen titulada Create a Simple CSS Stylesheet Using Notepad Step 14
    6
    Dale estilo al primer encabezado. Escribe h1 { y presiona ↵ Enter, añade un modificador y presiona ↵ Enter, y escribe } y presiona ↵ Enter. Puedes añadir varios modificadores a un elemento siempre y cuando cada modificador esté en su propia línea. Modificadores comunes incluyen los siguientes:
    • Tamaño de texto: escribe font-size: 30px; para establecer el texto como una fuente de 30 puntos. Sustituye el número con cualquiera que quieras usar.
    • Color de texto: escribe color: black; para hacer el texto negro. Sustituye el color por cualquiera que quieras usar.
    • Alineación del texto: escribe text-align: center; para centrar el texto. También puedes escribir left (izquierda) o right (derecha) para alinear el texto apropiadamente.
    • Fuente usada: escribe font-family: times new roman; para establecer la fuente como Times New Roman. También puedes usar fuentes como verdana o georgia.
  7. Imagen titulada Create a Simple CSS Stylesheet Using Notepad Step 15
    7
    Dale estilo al primer párrafo. Escribe p1 { y presiona ↵ Enter, añade un modificador y presiona ↵ Enter, y escribe } y presiona ↵ Enter.
    • Los modificadores que puedes usar son idénticos a los usados para el encabezado.
  8. Imagen titulada Create a Simple CSS Stylesheet Using Notepad Step 16
    8
    Dale estilo al resto del documento. Puedes darle estilo a cualquier elemento haciendo referencia al texto de su etiqueta y colocando una llave abierta ({), añadiendo modificadores y luego cerrando la llave (}).
  9. Imagen titulada Create a Simple CSS Stylesheet Using Notepad Step 17
    9
    Cierra las etiquetas STYLE y HEAD. En una nueva línea debajo del último texto de estilo, escribe </style> y presiona ↵ Enter, y luego escribe </head> y presiona ↵ Enter. La hoja CSS está completa, lo que significa que ahora puedes revisarla y guardarla.

Parte 3
Parte 3 de 3:
Guardar el documento

  1. Imagen titulada Create a Simple CSS Stylesheet Using Notepad Step 18
    1
    Revisa tu hoja de estilo CSS. El documento CSS variará un poco, pero debe verse algo así:
    • <!DOCTYPE html>
    • <html>
    • <head>
    • <style>
    • body {
    • background-color: lightblue;
    • }
    • h1 {
    • font-size: 45px;
    • }
    • p1 {
    • color: black;
    • }
    • </style>
    • </head>
    • <body>
    • <h1>Hi!</h1>
    • <p1>Soy una iguana</p1>
    • </body>
    • </html>
  2. Imagen titulada Create a Simple CSS Stylesheet Using Notepad Step 19
    2
    Haz clic en Archivo. Está en la esquina superior izquierda de la ventana del Bloc de notas. Aparecerá un menú desplegable.
  3. Imagen titulada Create a Simple CSS Stylesheet Using Notepad Step 20
    3
    Haz clic en Guardar como…. Esto lo verás cerca del final del menú desplegable. Al hacerle clic, se abrirá una ventana.
  4. Imagen titulada Create a Simple CSS Stylesheet Using Notepad Step 21
    4
    Selecciona una ubicación para guardar. Haz clic en una carpeta (por ejemplo, Escritorio) en el lado izquierdo de la ventana.
  5. Imagen titulada Create a Simple CSS Stylesheet Using Notepad Step 22
    5
    Haz clic en el cuadro desplegable de "Tipo". Aparecerá un menú desplegable.
  6. Imagen titulada Create a Simple CSS Stylesheet Using Notepad Step 23
    6
    Haz clic en Todos los archivos. Está en el menú desplegable.
  7. Imagen titulada Create a Simple CSS Stylesheet Using Notepad Step 24
    7
    Ponle nombre al archivo con una extensión ".html". En el campo de texto de "Nombre", escribe el nombre de documento que prefieras (por ejemplo, "Mi CSS") seguido de .html.
    • Por ejemplo, si nombraste al archivo "Mi CSS", escribirías mi css.html en el campo.
    • Si usas un programa que pueda ejecutar archivos ".css", puedes usar .css en vez de .html.
  8. Imagen titulada Create a Simple CSS Stylesheet Using Notepad Step 25
    8
    Haz clic en Guardar. Está en la parte inferior derecha de la ventana "Guardar como". Esto guardará la hoja CSS en un formato ejecutable, lo que significa que puedes abrirlo en tu navegador o editor HTML preferido en lugar de en el Bloc de notas.

Consejos

  • Al codificar en HTML o CSS, en realidad no importa cuántos espacios haya entre las líneas de código. Puedes presionar ↵ Enter varias veces después de cada línea sin cambiar la función del programa.
  • Trata de poner sangría en diferentes partes de la hoja de estilo CSS para hacer que sea más fácil encontrar los elementos. Por ejemplo, podrías poner sangría al código del encabezado una vez y al código del párrafo dos veces.

Advertencias

  • Siempre prueba el código antes de cargarlo a un sitio web o compartirlo con otras personas.

wikiHows relacionados

crear CSS
Cómo
crear CSS
agregar un archivo CSS al HTML
Cómo
agregar un archivo CSS al HTML

Referencias

  1. ↑ https://www.w3schools.com/css/

Acerca de este wikiHow

JL
Coescrito por:
Jack Lloyd
Especialista en tecnología
Este artículo fue coescrito por Jack Lloyd. Jack Lloyd es escritor y editor de tecnología para wikiHow. Tiene más de dos años de experiencia escribiendo y editando artículos relacionados con tecnología. Es entusiasta de la tecnología y profesor de inglés. Este artículo ha sido visto 30 943 veces.
Categorías: CSS