Introducción al CSS

Comenzamos

Si estas en esta seccion asumo que ya sabes hacer tu pagina web en HTML puro, lo que pretendo con esta seccion es que sepas como a partir de tus conocimientos en HTML puedas mejor mucho el aspecto de tu pagina web con CSS.

Conceptos basicos

Css se basa en “selectores” a los cuales les dás atributos, que luego vas a usar en tu documento html. Para que de esa forma puedas a un elemento de HTML “describirlo visualmente” con un selector de CSS

Exiten 2 tipos de selectores:

1.- Selectores predefinidos

, éstos son los que llevan el nombre de una etiqueta de html.

por ejemplo: H1 {color:blue;} aca estarias definiendo que la etiqueta H1 de HTML sea tomado por CSS como un selector
y que cada vez que se lo utilice en el codigo HTML sea “mostrado” con esa descripcion viaual en este caso en color azul.

2.- Selectores que vos inventes

, son aquellos cuyo nombre le pongas vos, y
por lo tanto no esta ligado a un elemento del código html. Para usar este tipo de selectores generales debemos indicar en el elemento HTML en que los querramos usar utilizando el atributo Class
Dentro de éste tipo de selectores existen 2 tipos más: los de clase y los de tipo ID

2.1- Selectores de Clase:

1.- se los invoca en HTML con el atributo.
2.- Se los define en CSS con un punto delate del nombre del selector.
ejmplo: .Hola {color: green; }

2.2- Selectores ID:

1.- se los invoca en HTML con el atributo id=”nombre Selector Clase”.
2.- Se los define en CSS con el simbolo “numeral” # antes del nombre del selector.
ejemplo: #hola { color: green;}

Veamos un ejemplo de aplicación de todo esto:
Supongamos que tenes un trozo de HTML así:

<HTML>
<HEAD>
<title>hola mundo</title> </HEAD>
<BODY>
<div>seccion arriba</div> <div>seccion del medio </div> <div>seccion de abajo </div> </BODY>
</HTML>
En este caso podriamos querer hacer que nuestra seccion del medio resalte por encima del resto poniendola en un color azul, bueno para ello lo q tenemos que hacer es primero dicidir la forma en que incluimos nuestro codigo css en el html, segundo que tipo de selector vamos a usar, por ultimo invocarlo… 1.- decidiendo la forma de incluir nuestro codigo:

Formas de incluir codigo css en nuestro HTML

bueno para esto necesitamos conocer la distintas forma que tiene css de aparecer en el codigo html, y sin perder tiempo pasamos de inmediato a verlas: Existen basicamente 3 formas de incluir nuestro codigo CSS:

a.- Incluir nuestro codigo directamente en el html, ejemplo:

<div style=”color:blue; background-color:green”>seccion del medio </div> Aqui le damos color azul a las letras y verde al fondo de las letras

notar que a la etiqueta div agregamos un atributo llamado “style” ese atributo es que el que nos permite incluir nuestro codigo css para esa etiqueta, OJO el codigo que incluimos en el atributo style es solo valido para esa etiqueta, osea que si queres usar el mismo codigo para otra etiqueta vas a tener que repetir el codigo usando style para la otra etiqueta, obviamente eso puede llegar a ser muy tedioso, pero para eso llego la forma b de incluir codigo css en html…

b.- Incluir nuestro codigo css todo concentrado en un apartado de nuestra pagina peeero dentro de la misma pagina

, ejemplo:

<HTML>
<HEAD>
… <style>
body {
background-color:green;
url(“fondo.gif”);
}
h2 {
color:#332244; }
p{
margin:2px;
}
</style>
</HEAD>
… </HTML>

Como podras observar el problema de esto es que si alguien se pone a ver el codigo fuente de tu pagina tambien podra ver el estilo de la pagina (con estilo me refiero al css), para evitar eso tambien tenemos la forma c…

c.- Importar codigo css:

<head>
<link rel=”stylesheet” type=”text/css” media=”screen” href=”style/style1.css” />
</head>

Bueno ya visto esto pasamos a retomar lo que veniamos diciendo que es los selectores de clase y ID de css entre ellos la diferencia radica en que los de clase están pensados para que se usen idenfinida cantidad de veces, mientras que los ID solo una vez. Osea que un ID lo podrias usar en etiquetas que sabes que no se van a usar mas de una vez como la <BODY> de html

2.3- Pseudo – Selectores. Por ahora no sirven para nada.

Bien, ahora veamos como se pueden agrupar los selectores para que se les pueda aplicar la misma estructura (descripcion visual) a todos ellos:

Agrupando selectores:

Elemento1, elemento2, elemento3, … , elementoN { aquí va la estructura que quieras; }

con esto le decimos al css que los selectores Elemento1, elemento2, etcetera, son son todos selectores que tienen la misma estructura y cuando sean usandos en el html se verán todos de la misma forma.

Herencia o selectores contextuales:

si queres que una estructura dependa del anidamiento que tienen los selectores debemos escribir
los siguiente:

Elemento1 Elemento2 Elemento3 … ElementoN { aquí va la estructura que quieras; }

Con esto le decimos que la estructura evidenciada aquí, solo puede ser aplicada si existe un
anidamiento en el orden en el que se lean los selectores de izq a derecha, ejemplo:

Elemento1 Elemento2 Elemento3 {una estructura cualquiera;}

Aqui la “estructura cualquiera” solo será aplicada a un anidamiento cuyo padre supremo sea Elemento1 y solo
si elemento 2 es hijo(es aninado) de Elemento 1 y solo si Elemento3 es anidado de elemento2.

pequeños detalles:

Yo considero que un Selector es como si fuera una clase (en poo)

cuando pones Elemento1.Elemento2 { estructura cualquiera }
le estas diciendo que aplique el estilo de “estructura cualquiera” solo a Elemento1 (un elemento
html, cuya clase sea de clase sea de Elemento2)

la definicion de estructuras las podes hacer toda junta o por separada O EN CUOTAS:
esto:
.Elemento1 {Estructura 1}
.Elemento1 {Estructura 2}
equivale a:
.Elemento1 {Estructura 1 + Estructura 2}

Esto de definir en cuotas te sirve cuando queres definir estructuras comunes para varias clases
y una de esas clases tiene algo especial que no tienen las otras entonces pones asi:

.Elemento1, .Elemento2, .Elemento3 {
Estructura comun
}

.Elemento1{
Estructura Especial
}

Entonces Elemento1 va a tener “Estructura comun” + “Estructura Especial”
y Elemento2 y Elemento3 solo va a tener “Estructura comun”

de esta manera podes agrupar por funcionalidad y luego los detalles se los agregas..

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

19 − 9 =

Time limit is exhausted. Please reload CAPTCHA.