Cómo crear sitios web básicos basados ​​en CSS

Ya sea que lo sepa o no, está aprovechando CSS cada vez que abre un navegador web. Es el sistema de plantillas utilizado por casi todos los sitios web modernos para dar a las páginas su diseño y apariencia. Algunos de ustedes pueden estar pensando “ He creado sitios web antes y fue fácil, nunca necesité CSS. ”Y eso es cierto. No necesita CSS para crear un sitio funcional y de aspecto agradable, pero es muy probable que su sitio haya sido más pequeño, más limpio, más consistente y con mejor apariencia si hubiera elegido CSS desde el principio. Hoy le mostraremos los conceptos básicos de lo que puede hacer CSS. Esta guía no lo llevará de un principiante a un diseñador web galardonado, pero lo ayudará a comprender cómo funciona CSS y cómo puede brindarle MUCHO tiempo y esfuerzo.

vista rápida

CSS (Hoja de estilo en cascada) está destinado a hacer una cosa: administrar la presentación de su sitio. Esto puede parecer simple, pero téngalo en cuenta mientras continuamos. Algo importante que hay que sacar de ese hecho es que la presentación NO es tarea de HTML. HTML define la estructura de su página (qué es un encabezado, qué es un pie de página, etc.). CSS toma esa estructura y hace todo el trabajo con respecto a cómo se presenta esa estructura .

La forma incorrecta

Para darle una idea de lo que CSS debe arreglar, eche un vistazo a este código HTML:

Que aparece en su navegador como algo como esto:

Aquí hay varios problemas potenciales. Para empezar, se trata de colocar información sobre la fuente y el color cada vez que se dibuja un nuevo encabezado o párrafo. Cada elemento nuevo en el sitio necesitaría definiciones idénticas de fuente y color, aunque sean las mismas para cada título y párrafo. Esto equivale a una gran cantidad de ancho de banda desperdiciado si tiene muchas entradas.

El siguiente es el problema de la escalabilidad. Si tiene 100 entradas en esta página de noticias y decide que los titulares deben ser rojos, tiene mucho trabajo por delante para cambiar cada etiqueta de título para mostrar el nuevo color.

En tercer lugar, y esto es una cuestión de «procedimiento adecuado», esta página contiene varios elementos que son «de presentación», no «estructurales». Las etiquetas de fuente, color y salto de línea se relacionan con la forma en que se presenta la página y no tienen nada que ver con la estructura de la página. HTML no se adapta bien a la presentación, es mejor dejar ese trabajo en CSS, como mostraremos a continuación.

Diseñar con CSS

Entonces, ¿cómo podemos eliminar todas esas etiquetas adicionales? ¿Cómo podemos reducir el tamaño de la página manteniendo nuestros colores y diseño? Bueno, imagen que podría definir en un solo lugar cómo deberían verse TODOS sus titulares (por ejemplo, texto verde grande). Entonces no es necesario definir el color para cada título único. Lo mismo se aplica a los párrafos. Si desea que todo el texto del párrafo sea azul, simplemente configúrelo como una regla CSS para la etiqueta «p». Todos los párrafos posteriores tendrán texto azul, sin que tenga que especificarlo cada vez.

CSS se enseña mejor con el ejemplo. Comencemos por definir exactamente las reglas descritas anteriormente: todos los titulares deben ser verdes y todos los párrafos deben ser azules. Con el editor de texto de su elección, inicie un nuevo archivo llamado style.css y agregue el siguiente texto:

Esto define que todas las etiquetas h1 tienen texto verde y todas las etiquetas p tienen texto azul.

Todo lo que tenemos que hacer ahora es conectarlo al HTML con la etiqueta de enlace y luego eliminar todas las etiquetas de fuentes inútiles del HTML. Cuando termine, debería verse así:

Bastante más limpio, ¿eh? Ya redujimos el tamaño total de nuestro sitio, y eso fue con solo 2 entradas en nuestro «blog».

CSS para el diseño

Claro, puede hacer que sus fuentes sean consistentes, pero eso por sí solo ciertamente no es suficiente para hacer de CSS la herramienta completa para la presentación de sitios web. Para hacer eso, debe poder afectar el diseño de su sitio, dándole control no solo sobre cómo se ven las cosas sino hacia dónde van. El poder completo de CSS sobre el diseño del sitio está mucho más allá del alcance de esta guía, por lo que presentaremos el concepto a través de un escenario común único: una barra lateral de navegación.

Crear algo como esto es asombrosamente simple en CSS. Regrese a su archivo style.css y agregue la siguiente sección:

Tome nota del # al comienzo de la barra lateral del nombre . En resumen, esto le dice a CSS que estamos trabajando con un nuevo nombre de elemento único que inventamos, en lugar de una etiqueta incorporada como h1 o p . La explicación larga involucra la diferencia entre una identificación y una clase, y se explica en detalle aquí .

Debería poder ver varias partes importantes aquí. Primero creamos una nueva ID llamada barra lateral , le dimos una altura y un ancho específicos, un borde sólido y especificamos que debería tener un margen de 15px en el lado derecho. Le hemos dicho que flote en el lado izquierdo de la pantalla, con otros elementos de la página (como su texto) fluyendo a su alrededor. Puede activar este elemento agregando una etiqueta de barra lateral al cuerpo de su HTML, algo como esto.

Y ahora, cuando abres tu página, ¡ahí está tu nueva barra lateral!

Conclusión

Claramente, solo hemos comenzado a arañar la superficie de las capacidades de CSS, pero con suerte debería quedar claro que estos principios básicos se pueden aplicar a mucho más de lo que hemos hecho aquí. Las manipulaciones de texto se pueden utilizar para dar formato al texto de innumerables formas y, al modificar el concepto de la barra lateral, puede crear infinitas variaciones del diseño del sitio. Para un estudio más detallado , este autor recomienda encarecidamente la sección CSS de W3Schools.com .

Crédito de la imagen: geirarne

¡Si te ha gustado vota con 5 Estrellas!
(Votos: 0 Promedio: 0)

Escribe Aquí Tu Comentario