Cómo crear CSS

PDF download Descargar el PDF
PDF download Descargar el PDF

Una Hoja de estilo en cascada (CSS, por sus siglas en inglés) es un sistema para codificar sitios web que les permite a los diseñadores manipular varias funciones a la vez asignando ciertos elementos a grupos. Por ejemplo, usando un código para el fondo del sitio web, los diseñadores pueden cambiar el color o la imagen del fondo en todas las páginas del sitio web con un solo cambio al archivo CSS. Así es como se crea CSS para un sitio web básico.

Parte 1
Parte 1 de 4:

Escribir CSS en línea

PDF download Descargar el PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/bc\/Create-CSS-Step-1-Version-2.jpg\/v4-460px-Create-CSS-Step-1-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/bc\/Create-CSS-Step-1-Version-2.jpg\/v4-728px-Create-CSS-Step-1-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Debes saber cómo funcionan las etiquetas y acerca de los atributos src y href .
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/6c\/Create-CSS-Step-2-Version-2.jpg\/v4-460px-Create-CSS-Step-2-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/6c\/Create-CSS-Step-2-Version-2.jpg\/v4-728px-Create-CSS-Step-2-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Aprende algunas propiedades básicas de CSS . Descubrirás que hay muchas propiedades. Sin embargo, no es necesario aprenderlas todas.
    • Algunas propiedades básicas de CSS útiles que debes conocer son color y font-family .
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/06\/Create-CSS-Step-3-Version-2.jpg\/v4-460px-Create-CSS-Step-3-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/06\/Create-CSS-Step-3-Version-2.jpg\/v4-728px-Create-CSS-Step-3-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Todas las propiedades necesitan un valor. Por ejemplo, para la propiedad color , podrías poner el valor red (rojo).
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/64\/Create-CSS-Step-4-Version-2.jpg\/v4-460px-Create-CSS-Step-4-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/64\/Create-CSS-Step-4-Version-2.jpg\/v4-728px-Create-CSS-Step-4-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Se usa dentro de un elemento como href o src . Para usarlo, dentro de las comillas que están después del signo igual, pon el atributo CSS, dos puntos y luego el valor de la propiedad. Esto se conoce como una regla CSS.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/29\/Create-CSS-Step-5-Version-2.jpg\/v4-460px-Create-CSS-Step-5-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/29\/Create-CSS-Step-5-Version-2.jpg\/v4-728px-Create-CSS-Step-5-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    CSS en línea puede añadir un desorden innecesario a un documento HTML. Sin embargo, es una gran forma para conocer cómo funciona CSS.
    Anuncio
Parte 2
Parte 2 de 4:

Escribir CSS básico

PDF download Descargar el PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/ec\/Create-CSS-Step-6.jpg\/v4-460px-Create-CSS-Step-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/ec\/Create-CSS-Step-6.jpg\/v4-728px-Create-CSS-Step-6.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Este debe permitirte crear archivos HTML y CSS.
    • Si no tienes un programa especial instalado, puedes usar el Bloc de notas u otro editor de texto. Simplemente guarda el archivo como un archivo de texto y un archivo CSS.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/2f\/Create-CSS-Step-7.jpg\/v4-460px-Create-CSS-Step-7.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/2f\/Create-CSS-Step-7.jpg\/v4-728px-Create-CSS-Step-7.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    También debes abrirlo con un editor de HTML, si tienes uno instalado.
    • Los editores HTML te permiten editar HTML y CSS al mismo tiempo.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b8\/Create-CSS-Step-8.jpg\/v4-460px-Create-CSS-Step-8.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b8\/Create-CSS-Step-8.jpg\/v4-728px-Create-CSS-Step-8.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Esto te permitirá escribir CSS sin la necesidad de un archivo separado.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1a\/Create-CSS-Step-9.jpg\/v4-460px-Create-CSS-Step-9.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1a\/Create-CSS-Step-9.jpg\/v4-728px-Create-CSS-Step-9.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Para hacer el código más legible, siempre pon la segunda llave en su propia línea.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1d\/Create-CSS-Step-10.jpg\/v4-460px-Create-CSS-Step-10.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1d\/Create-CSS-Step-10.jpg\/v4-728px-Create-CSS-Step-10.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Cada línea debe terminar con un punto y coma (;). Para hacer el código legible, cada regla debe comenzar en su propia línea y cada línea debe estar con sangría.
    • Es muy importante notar que este estilo afectará a todos los elementos del tipo seleccionado en la página. Un estilo más específico se tratará en la siguiente sección.
    Anuncio
Parte 3
Parte 3 de 4:

CSS más avanzado

PDF download Descargar el PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d7\/Create-CSS-Step-11.jpg\/v4-460px-Create-CSS-Step-11.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d7\/Create-CSS-Step-11.jpg\/v4-728px-Create-CSS-Step-11.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Abre también el archivo HTML.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/77\/Create-CSS-Step-12.jpg\/v4-460px-Create-CSS-Step-12.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/77\/Create-CSS-Step-12.jpg\/v4-728px-Create-CSS-Step-12.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Esto te permitirá vincular un archivo CSS separado al documento HTML. La etiqueta de vínculo necesita tres atributos: rel , type y href .
    • rel significa "relación" (relationship) y le dice al navegador cuál es la relación con el documento HTML. Aquí debe tener un valor de "stylesheet" (hoja de estilo).
    • type dice qué tipo de medio se está vinculando. Aquí debe tener un valor de "text/css" (texto/css).
    • href se usa aquí de forma similar para decir cómo se usa en un elemento <a> , pero aquí debe vincularse a un archivo CSS. Si el archivo CSS está ubicado en la misma carpeta que el archivo HTML, solo necesita escribirse el nombre del archivo dentro de las comillas.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/2b\/Create-CSS-Step-13.jpg\/v4-460px-Create-CSS-Step-13.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/2b\/Create-CSS-Step-13.jpg\/v4-728px-Create-CSS-Step-13.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Añade un atributo class (clase) a estos elementos y ponlos en un mismo nombre de clase de tu elección. Esto le dará a los elementos el mismo estilo.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/cf\/Create-CSS-Step-14.jpg\/v4-460px-Create-CSS-Step-14.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/cf\/Create-CSS-Step-14.jpg\/v4-728px-Create-CSS-Step-14.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Escribe el nombre de clase en el archivo CSS con un punto ( . ) antecediéndolo (es decir, .class ).
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/cf\/Create-CSS-Step-15.jpg\/v4-460px-Create-CSS-Step-15.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/cf\/Create-CSS-Step-15.jpg\/v4-728px-Create-CSS-Step-15.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Los id se crean en CSS usando un símbolo de numeral ( # ) en lugar de un punto.
    • Los id son más específicos que las clases, así que un id anulará cualquier estilo de clase si tiene un atributo con un valor diferente que la clase.
    Anuncio
Parte 4
Parte 4 de 4:

Aprender más

PDF download Descargar el PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/e8\/Create-CSS-Step-16.jpg\/v4-460px-Create-CSS-Step-16.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/e8\/Create-CSS-Step-16.jpg\/v4-728px-Create-CSS-Step-16.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Visita los institutos w3. Es un sitio web oficial dirigido a enseñar habilidades de desarrollo web. El w3 tiene bastantes referencias listadas para HTML y CSS, así como otros lenguajes web.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/45\/Create-CSS-Step-17.jpg\/v4-460px-Create-CSS-Step-17.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/45\/Create-CSS-Step-17.jpg\/v4-728px-Create-CSS-Step-17.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Sitios como CSS tricks.com están dirigidos específicamente a enseñar CSS y habilidades de diseño web. Buscar fuentes de confianza te ayudará en tu proceso de aprendizaje.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/9d\/Create-CSS-Step-18.jpg\/v4-460px-Create-CSS-Step-18.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/9d\/Create-CSS-Step-18.jpg\/v4-728px-Create-CSS-Step-18.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Su experiencia y conocimiento puede enseñarte conocimientos y habilidades valiosos.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/c1\/Create-CSS-Step-19.jpg\/v4-460px-Create-CSS-Step-19.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c1\/Create-CSS-Step-19.jpg\/v4-728px-Create-CSS-Step-19.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Mirar el CSS de sitios web bien desarrollados puede mostrarte formas de diseñar partes de sitios web. Copiarlo como práctica y jugar con el código puede ayudarte a aprender cómo usar diferentes atributos CSS.
    Anuncio

Consejos

  • Hay muchas propiedades diferentes que puedes manipular con CSS. Busca un sitio web que tenga un estilo que te guste y mira el archivo fuente. Si hay un nombre de archivo CSS vinculado en la parte superior dentro de las etiquetas "head", puedes hacerle clic para ver diferentes propiedades y valores asignados a los elementos.
Anuncio

Advertencias

  • Copiar directamente la codificación HTML y CSS puede ayudarte a aprender, pero debes usar tus propias ideas de diseño. Tomar el diseño de otra persona es robo y plagio.
Anuncio

wikiHows relacionados

Cómo
crear una hoja de estilos CCS simple usando el bloc de notas
Cómo
agregar un archivo CSS al HTML
Anuncio

Acerca de este wikiHow

En otros idiomas
Esta página ha recibido 17 387 visitas.

¿Te ayudó este artículo?

Anuncio