Con la finalidad de diseñar con excelencia la presentación de una página web, estructuraremos un documento CSS en el proceso de creación. Algunos creadores de proyectos web tienen dificultad al momento de especificar diseños, debido al desconocimiento de elementos necesarios. Por lo tanto, según las recomendaciones oficiales de CSS, implementaremos con excelencia selectores y declaraciones en una hoja de estilo.

Un documento CSS contiene una serie de reglas para aplicar estilos de forma minuciosa a un documento HTML, por lo tanto, es indispensable el conocimiento de diferentes términos, los cuales afectan la visualización del proyecto. En la siguiente ilustración observamos un ejemplo de instrucción para aplicar el fondo, en inglés background, en color azul a una etiqueta de HTML llamada p.

061-01_0504_ilu01. Instrucción de CSS

Ahora bien, la regla general de CSS consiste en dos bloques:

• El selector, es el elemento de HTML utilizado para aplicar los estilos.
• La declaración, referido a las instrucciones específicas de estilo.

Por ejemplo, al aplicar un estilo a la etiqueta de párrafo, el navegador web le aplica el diseño detallado en el bloque de color azul, a todo el contenido englobado por esa etiqueta. En la siguiente imagen se encuentra conformada la instrucción.

061-01_0504_ilu02. División de una instrucción de CSS

El selector del ejemplo es el más básico de CSS, sin embargo, existen diversos tipos de ellos para diferentes propósitos, como:

• Aplicar más de una regla a una etiqueta.
• Otorgar un estilo diferente, a varias etiquetas, al mismo tiempo.
• Definir un diseño en un lugar específico del documento.

Esta regla es importante dominarla, pues de ello depende la variedad de combinaciones de estilos para aplicar a un documento.

061-01_0504_ilu03. Beneficios de selectores

Es posible crear declaraciones sencillas como en el ejemplo anterior, donde solo se aplica un color de fondo, sin embargo, normalmente se realiza más de una especificación. Por lo tanto, pasan a llamarse bloque de declaraciones, el cual debe englobarse entre corchetes como se muestra en la siguiente imagen.

061-01_0504_ilu04. Bloque de declaración

En la imagen anterior, cada conjunto de propiedad y valor esta separado de otro por punto y coma, es necesario hacerlo de esa forma de lo contrario se aplican incorrectamente. Aunque hay espacios en blanco y saltos de línea como separación, estos son ignorados por el navegador web y solo se agregan para tener un mejor orden visualmente.

En cuanto a las propiedades de CSS en su mayoría son simples, sin embargo, existe una variedad en la cual muchas están separadas por guiones, a fin de ser más específicas. Con ayuda de los valores sacamos provecho a la creatividad para realizar declaraciones de estilos profesionales, logrados mediante colores en letras o números, tamaños, estilos y hasta imágenes a través enlaces. Tal como se muestra en la imagen siguiente donde esta especificado más de un estilo a la etiqueta p.

061-01_0504_ilu05. Identificación de propiedad y valor

Keynotes

• Un documento CSS contiene una serie de reglas para aplicar estilos de forma minuciosa a un documento HTML, por lo tanto, es indispensable el conocimiento de diferentes términos, los cuales afectarán la visualización del proyecto.
• la regla general de CSS consiste en dos bloques: El selector, es el elemento de HTML utilizado para aplicar los estilos. La declaración, referido a las instrucciones específicas de estilo.
• Es posible crear declaraciones sencillas como en el ejemplo anterior, donde solo se aplica un color de fondo, sin embargo, normalmente se realiza más de una especificación. Por lo tanto, pasan a llamarse bloque de declaraciones, el cual debe englobarse entre corchetes.
• Las propiedades de CSS en su mayoría son simples, sin embargo, existe una variedad en la cual muchas están separadas por guiones, a fin de ser más específicas.
• Con ayuda de los valores sacamos provecho a la creatividad para realizar declaraciones de estilos profesionales, logrados mediante colores en letras o números, tamaños, estilos y hasta imágenes a través enlaces.

Crea la estructura de un documento CSS con dos instrucciones de diseño, según las recomendaciones oficiales de este lenguaje.

¡Comparte el resultado final de tu reto en VKTV e invita a tres compañeros a comentar una sugerencia de optimización!

Tiempo disponible: entre 15 y 30 minutos.

Con la estructura correcta de un documento CSS es fácil especificar estilos y obtener páginas web pulcras. También, diseñamos eficientemente la presentación de proyectos para la internet, con la finalidad de atraer más usuarios. La organización y minuciosidad permiten la creación de selectores y declaraciones con eficiencia.