4 maneras de crear CSS

Una hoja de estilo en cascada (CSS) es un sistema para la codificación del sitio web que permite a los diseñadores manipular varias características a la vez asignando ciertos elementos a los grupos. Por ejemplo, al utilizar un código para el fondo del sitio web, los diseñadores pueden cambiar el color de fondo o la imagen en todas las páginas del sitio web con un cambio al archivo CSS. Aquí es cómo crear CSS para un sitio web básico.

Pasos

Parte 1 de 4:

Escribiendo CSS en línea

1. Asegúrese de tener una comprensión básica de las etiquetas HTML. Debes saber cómo funcionan las etiquetas y de la SRC y href atributos.

2. Aprender algunos de los Propiedades básicas de CSS. Encontrarás que hay muchas propiedades. Sin embargo, no es necesario aprenderlos a todos.

Algunas buenas propiedades básicas de CSS para saber son color y Familia tipográfica.

3. Aprenda sobre los valores para cada propiedad respectiva. Todas las propiedades necesitan un valor. Para el color propiedad, por ejemplo, podrías poner el rojo valor.

4. Aprender sobre el estilo Atributo html. Se utiliza dentro de un elemento como href o SRC. Para usarlo, dentro de las comillas después del signo igual, coloque el atributo CSS, un colon y luego el valor de la propiedad. Esto se conoce como regla de CSS.

5. Comprenda que los CSS en línea no se usan generalmente para sitios web por desarrolladores web profesionales. CSS en línea puede agregar un desorden innecesario a un documento HTML. Sin embargo, es una excelente manera de introducirse en cómo funciona CSS.

Parte 2 de 4:

Escribiendo CSS básicos

1. Lanzar el programa que desea usar. Debe permitirle crear archivos HTML y CSS.

Si no tiene instalado un programa especial, puede usar el Bloc de notas u otro editor de texto. Simplemente guarde su archivo como un archivo de texto y un archivo CSS.

2. Abra el archivo HTML para su sitio web. Debe abrir esto con un editor HTML también, si tiene una instalada.

Los editores HTML le permiten editar HTML y CSS al mismo tiempo.

3. Crea una etiqueta dentro de tu cabeza HTML. Esto le permitirá escribir CSS sin la necesidad de un archivo separado.

4. Elija un elemento que desea agregar el estilo y escriba el nombre del elemento seguido de un conjunto de tirantes rizados ({ }). Para que su código sea más legible, siempre ponga la segunda abrazadera rizada en su propia línea.

5. Entre los tirantes, escriba sus reglas CSS como usted usaría el estilo atributo. Cada línea deber 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 ser sangrada.

Es muy importante tener en cuenta que este estilo afectará todas 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

1. Cree un archivo CSS, no un archivo HTML y guárdelo usando el .CSS extensión. Abra su archivo HTML también.

2. Crear un Etiqueta en su cabeza HTML. Esto le permitirá vincular un archivo CSS separado en su documento HTML. Su etiqueta de enlace necesita tres atributos: religioso, tipo, y href.

religioso medio "relación" y le dice al navegador cuál es la relación con el documento HTML. Aquí debería tener un valor de "estilos".

tipo Decide qué tipo de medios se está vinculando a. 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 el nombre del archivo debe escribirse dentro de las comillas.

3. Seleccione elementos de diferentes tipos que desea agregar el mismo estilo para. 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.

4. Asignar qué estilo recibirá una clase. Escriba el nombre de la clase en su archivo CSS con un período (.) Lo precedió (i.mi. .clase).

5. Seleccione los elementos individuales que desea agregar un estilo especial para y agregar un identificación atributo. Las identificaciones se crean en CSS utilizando un símbolo de libra (#) en lugar de un período.

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 a la clase.

Parte 4 de 4:

Aprendiendo más

Visita las escuelas W3. Es un sitio web oficial dirigido a enseñar habilidades de desarrollo web. El W3 tiene muchas referencias enumeradas para HTML y CSS, así como otros idiomas web.

2. Encuentra otros sitios específicamente dirigidos a aprender y enseñar HTML y CSS. Sitios como Trucos de CSS.com específicamente están dirigidos a enseñar CSS y habilidades de diseño web. Encontrar fuentes de buena reputación te ayudará en su viaje de aprendizaje.

3. Ponte en contacto con diseñadores web y desarrolladores. Su experiencia y conocimientos técnicos pueden enseñarle conocimientos y habilidades valiosas.

4. Ver el código fuente de sitios web que se encuentra. Visualizar el CSS de sitios web bien desarrollados puede mostrarle formas de diseñar partes de sitios web. Copiándolo como práctica y jugar con el código puede ayudarlo a aprender a usar diferentes atributos de CSS.

Video.

Al utilizar este servicio, se puede compartir información con YouTube.

Consejos

Hay muchas propiedades diferentes que puedes manipular con CSS. Encuentre un sitio web con un estilo que le guste y vea el archivo de origen. Si hay un nombre de archivo CSS enlazado en la parte superior dentro de las etiquetas de la cabeza, puede hacer clic en él para ver las diferentes propiedades y valores asignados a los elementos.

Advertencias

Copiar directamente la codificación HTML y CSS puede ayudarlo a aprender, pero debe usar sus propias ideas de diseño. Tomar el diseño de otra persona es el robo y el plagio.