Introducción al CSS

Saludos y espero estén muy bien todos

El tema que abordaremos el día de hoy es CSS espero les sea de utilidad

Antes de continuar, es importante que ya tengan un poco de conocimientos sobre html y xhtml.

¿Qué es CSS?

CSS significa Cascade Style Sheet o Hojas de Estilo de Cascada.

Estás definen la apariencia gráfica de los elementos HTML

Los CSS aparecen con HTML 4.0 para así ayudar a resolver problemas en cuanto al diseño

Los CSS pueden estar incluidos dentro del mismo documento HTML o de forma externa, lo cuál ahorra muchísimo trabajo, aunque esto ya lo veremos más adelante.

¿Cómo es que se crea CSS?

HTML es un lenguaje que no pretende dar formato a un documento, solamente se limita a decir qué es un objeto, ejemplo:

<h1>ESTO ES UN ENCABEZADO</h1>

<p>ESTO ES UN PARRAFO</p>

ahora, con la aparición de las etiquetas <font> y sus atributos de color y tamaño en HTML 3.2, el diseño web se volvió muy complicado pues había sitios con una grandisima cantidad de información y que requerían tener distintos tamaños de letra, colores, etc.

Es por esta razón que el Consorcio de World Wide Web (W3C) Crea el CSS.

A partir de HTML 4.0 todo el formato de un documento se puede quitar del HTML y ser guardado aparte en un documento CSS.

En la actualidad TODOS los exploradores soportan CSS hasta su versión 2.

Muy bien, ahora hablaremos sobre su forma de uso y sintaxis

Como ya les mencionaba los CSS pueden ir dentro de su documento html mediante la etiqueta

<style> </style>

o puede ser guardado externamente y mandarlo a llamar mediante la etiqueta

<link rel=”stylesheet” type=”text/css” href=”tu_estilo.css”>

Justo entre las etiquetas <head> y </head>

Aqui les pondré un par de ejemplos para que se entienda mejor.

Style dentro del documento HTML

Stylesheet independiente y mandada a llamar desde la cabecera (<head>)

Ahora lo que sigue es explicarles la sintaxis del CSS

Para ello veamos el siguiente ejemplo:

Nuestro HTML

Nuestro CSS

Sintaxis

Resultado

Lo ideal aquí es que vayan jugando con los valores y atributos para que vean como van cambiando cada uno.

La etiqueta <div>

Pensemos en la etiqueta div como en un cuadro transparente en el cual  esta contenido nuestro documento, en CSS nos será de gran ayuda ya que gracias a esta etiqueta ya no tendremos que hacer el acomodo de información por medio de TABLAS, si no que ahora podremos hacerlo mediantes <div> y con las propiedades del CSS, que ya veremos mas adelante.

CSS Id y Class

Bueno ahora que ya vimos lo básico sigamos a ver que son las id y las class en CSS

El selector id (#)

El selector id en css nos va a ayudar a cambiar el estilo de un único elemento dentro de nuestro css, y se define por medio del símbolo “#”

ejemplo:

EL CSS

EL HTML

EL RESULTADO

El selector class (.)

Bien, ya vimos el uso del selector id ahora continuemos al selector class, éste se representa por medio de un “.” antes del selector de etiquetas.

Nos sirve para dar formato a múltiples número de elementos, lo que nos permite darle un mismo estilo a varios elementos HTML de nuestro documento

Vayamos al ejemplo:

EL CSS

EL HTML

EL RESULTADO

Bueno hasta aquí llega el capítulo de Introducción al CSS, en los siguientes tutoriales ya abordaremos más a fondo como poner imágenes, plugins, posicionar los divs y más para que puedan desarrollar su propio sitio basandose solamente en CSS.

Que tengan buen día y recuerden comentar

Anuncios