Autor: Dídac Pérez

El CSS (Cascading Style Sheets) que en español significa “Hojas en estilo de cascada” es usado para aplicar estilos (márgenes, colores, formas específicas y más a nuestra página web). Un documento CSS suele ir vinculado a otro DOCTYPE de tipo HTML con el cual hemos realizado la estructura de nuestra WEB y posteriormente la haremos más amena a la vista con el código CSS.

Es denominado como estilo en cascada ya que los patrones se aplican de arriba a abajo (a diferencia del HTML que es un código pirámidal).

Seguramente, hemos visto muchas páginas WEB las cuales solo tienen un fondo blanco, letras negras y los links en azul. Estas son páginas informativas o boletines de información que se han codificado únicamente con HTML. Al ver una página con diferentes colores e interacciones con el consumidor, es el resultado de vincular nuestro documento HTML con el CSS o JavaScript.

Como vincular los elementos de HTML con CSS, dos tipos:

  1. El general, el que nos permite decirle a la computadora que queremos que todos los elementos que cumplan esas condiciones tengan una misma propiedad. Ejemplo:

<style>

p {

color: blue;

text-weight: bold;

}

<style>

Con estas 6 entradas de código hemos conseguido que todos los elementos <p> (párrafos) de nuestro código HTML aparezcan en azul y en negrita.

  1. La mayoría de las veces no quieres poner todos los párrafos con el mismo estilo, sino que quieres darle un toque diferente a cada uno. En este caso lo deberemos hacer mediante etiquetas, o como es conocido en el código de CSS los id. De esta manera cuando estemos configurando nuestra página WEB y sabemos que queremos sólo un párrafo de color azul y en negrita, debemos poner lo siguiente en el documento HTML:

<p> id=”elnombrequequieras”

Escribes el contenido de tu párrafo

</p>

Acto seguido, iríamos al nuestro documento de CSS e introduciremos lo siguiente:

<style> id=”elmismonombrequeenHTML”

p {

color: blue;

text-weight: bold;

}

<style>

Finalmente conseguiremos que solo los elementos que contengan la etiqueta id=”elnombrequetuquieras” tengan el estilo personalizado que hemos deseado.

* Es un paso un poco difícil de explicar redactándolo, pero creo que así se puede entender.

Estilos para la implementación del CSS en nuestra página.

Interno

Esto hace que nuestra hoja con todos los estilos CSS se carguen cada vez que refrescamos la página y esto puede provocar esperas más largas de carga. Además, no te permite copiar el mismo estilo de CSS en diferentes páginas, ya que todo el texto que escribas estará vinculado a la página de HTML donde lo has escrito (de allí el adjetivo de interno).

Externo

Siendo un principiante en el mundo de la programación es el que yo recomiendo y el que yo he usado para desarrollar las dos webs que he hecho. En este tipo de implementación escribimos todo el código de CSS en un documento aparte que debe acabar con un .css. De esta manera estas aplicando todos los estilos en un documento aparte y luego lo puedes vincular a las páginas que tu desees.

Inline

Este tipo de implementación, se puede introducir tanto externamente como interiormente. Se trata de introducir el código <style> para editar elemento específicos de un código HTML.

A continuación, voy a explicar los códigos de CSS que más he usado y que más relevantes me parecen a la hora de adornar un sitio WEB.

Para textos

  • font-family: Introducimos un fuente o estilo tipográfico
  • font-style: Poniendo los atributos normal, italic o oblique podemos hacer que la letra sea normal, cursiva u oblicua
  • font-variant: Usado para convertir las minúsculas en mayúsculas pero siempre en tamaño menor
  • font-weight: Convierte el grosor de nuestras letras de 100 a 900
  • font-size: Determinamos el cuerpo de la letra en píxeles (px)
  • text-intendent: Indicamos la cantidad de desplazamiento lateral que queremos de la primera línea de texto
  • text-align: Asignamos una alineación de texto (left, right, center, justify)
  • line-height: Indicamos el interlineado que deseamos entre los renglones del texto (px)
  • vertical-align: Indicamos la alineación vertical que deseamos (esta propiedad tiene muchos atributos que no creo que sea importante nombrarlos)

Para elementos gráficos de la WEB

  • width: Indicamos el ancho de un elemento o imagen (normalmente este se indica en píxeles)
  • height: Indicamos la altura de un elemento o imagen (también se suele indicar en píxeles)
  • background-color: Indicamos el color que deseemos de un elemento (siempre se debe indicar con un valor hexadecimal #FFFFFF)
  • background-image: Indicamos que en un sitio en concreto deseamos poner una imagen (url(<<https://www.ccjcojc.com/vivaLEINN.jpg);}
  • border: Indicamos el tipo de borde que queremos sobre un elemento
  • display: Indicamos el modo que queremos que se muestre un elemento o incluso que no se muestre → display: none;

Para añadir espacios o márgenes

  • margin: Determinamos el margen que queremos de un elemento hacia afuera (siempre expresado en px). Si nos pasamos de margen, este correra a los elementos que hayan en su alrededor
  • padding: Determinamos el relleno o espacio interior de un elemento desde su borde hacia adentro

A estos dos atributos, podemos añadirles los atributos -top, -right, -left, -bottom para solo modificar una parte de su margen o del padding.

El código CSS3 tiene muchos menos atributos que el HTML, pero eso no lo convierte en un código más fácil. Casi todos los atributos son combinables entre ellos y te darán resultados muy diferentes.

Leave a Reply

Wow look at this!

This is an optional, highly
customizable off canvas area.

About Salient

The Castle
Unit 345
2500 Castle Dr
Manhattan, NY

T: +216 (0)40 3629 4753
E: hello@themenectar.com