Una hoja de estilo en cascada (CSS) es un sistema para la codificación de sitios web que permite a los diseñadores manipular varias características a la vez asignando ciertos elementos a grupos. Por ejemplo, al usar un código para el fondo del sitio web, los diseñadores pueden cambiar el color o la imagen de fondo en todas las páginas del sitio web con un cambio en el archivo CSS. A continuación, se explica cómo crear CSS para un sitio web básico.
Pasos
Parte 1 de 4: Escribir CSS en línea
Paso 1. Asegúrese de tener un conocimiento básico de las etiquetas HTML
Debería saber cómo funcionan las etiquetas y las
src
y
href
atributos.
Paso 2. Aprenda algunas de las propiedades básicas de CSS
Encontrarás que hay muchas propiedades. Sin embargo, no es necesario aprenderlos todos.
-
Algunas buenas propiedades básicas de CSS que debe conocer son
color
y
Familia tipográfica
- .
Paso 3. Conozca los valores de cada propiedad respectiva
Todas las propiedades necesitan un valor. Para el
color
propiedad, por ejemplo, puede poner la
rojo
valor.
Paso 4. Conozca la
estilo
Atributo HTML.
Se usa dentro de un elemento como
href
o
src
. Para usarlo, entre las comillas después del signo igual, coloque el atributo CSS, dos puntos y luego el valor de la propiedad. Esto se conoce como regla CSS.
Paso 5. Comprenda que los desarrolladores web profesionales no suelen utilizar CSS en línea para sitios web
CSS en línea puede agregar desorden innecesario a un documento HTML. Sin embargo, es una excelente manera de familiarizarse con el funcionamiento de CSS.
Parte 2 de 4: Escribir CSS básico
Paso 1. Inicie el programa que desea utilizar
Debería permitirle crear archivos HTML y CSS.
Si no tiene un programa especial instalado, puede usar el Bloc de notas u otro editor de texto. Simplemente guarde su archivo como archivo de texto y como archivo CSS
Paso 2. Abra el archivo HTML de su sitio web
También debe abrir esto con un editor HTML, si tiene uno instalado.
Los editores de HTML le permiten editar HTML y CSS al mismo tiempo
Paso 3. Cree una etiqueta dentro de su encabezado HTML
Esto le permitirá escribir CSS sin la necesidad de un archivo separado.
Paso 4. Elija un elemento al que desee agregarle estilo y escriba el nombre del elemento seguido de un conjunto de llaves ({})
Para que su código sea más legible, coloque siempre la segunda llave en su propia línea.
Paso 5. Entre llaves, escriba sus reglas CSS como lo haría con el
estilo
atributo.
Cada línea debe terminar con un punto y coma (;). Para que su código sea legible, cada regla debe comenzar en su propia línea y cada línea debe tener sangría.
Es muy importante tener en cuenta que este estilo afectará a todos los elementos del tipo seleccionado en la página. El estilo más específico se cubrirá en la siguiente sección
Parte 3 de 4: CSS más avanzado
Paso 1. Cree un archivo CSS, no un archivo HTML y guárdelo usando el
.css
extensión.
Abra también su archivo HTML.
Paso 2. Cree una etiqueta en su encabezado HTML
Esto le permitirá vincular un archivo CSS separado a su documento HTML. Su etiqueta de enlace necesita tres atributos:
rel
escribe
y
href
-
rel
significa "relación" y le dice al navegador cuál es la relación con el documento HTML. Aquí debería tener un valor de
"hoja de estilo"
- .
-
escribe
indica a qué tipo de medio se está vinculando. Aquí debería tener un valor de
"texto / css"
-
href
- aquí se usa de manera similar a cómo se usa en un elemento, pero aquí debe vincularse a un archivo CSS. Si el archivo CSS se encuentra en la misma carpeta que el archivo HTML, solo es necesario escribir el nombre del archivo entre comillas.
Paso 3. Seleccione elementos de diferentes tipos a los que desee agregar el mismo estilo
Agrega un
clase
atribuir a estos elementos y establecerlos igual a un nombre de clase de su elección. Esto le dará a tus elementos el mismo estilo.
Paso 4. Asigne qué estilo recibirá una clase
Escriba el nombre de la clase en su archivo CSS con un punto (.) Precediéndolo (es decir,
.clase
).
Paso 5. Seleccione los elementos individuales a los que desea agregar un estilo especial y agregue un
identificación
atributo.
Las identificaciones se crean en CSS usando un símbolo de almohadilla (#) en lugar de un punto.
Las identificaciones son más específicas que las clases, por lo que una identificación anulará cualquier estilo de clase si tiene un atributo con un valor diferente al de la clase
Parte 4 de 4: Aprender más
Paso 1. Visite las escuelas w3
Es un sitio web oficial destinado a enseñar habilidades de desarrollo web. El w3 tiene muchas referencias enumeradas para HTML y CSS, así como para otros lenguajes web.
Paso 2. Encuentre otros sitios específicamente destinados a aprender y enseñar HTML y CSS
Los sitios como CSS tricks.com están destinados específicamente a enseñar CSS y habilidades de diseño web. Encontrar fuentes confiables lo ayudará en su viaje de aprendizaje.
Paso 3. Póngase en contacto con diseñadores y desarrolladores web
Su experiencia y conocimientos pueden enseñarle valiosos conocimientos y habilidades.
Paso 4. Vea el código fuente de los sitios web que encuentre
Ver el CSS de sitios web bien desarrollados puede mostrarle formas de diseñar partes de sitios web. Copiarlo como práctica y jugar con el código puede ayudarlo a aprender a usar diferentes atributos de CSS.
