Selector id

En CSS al atributo id de las etiquetas HTML se le denomina selector, para apuntar a una id en css se utiliza el signo almohadilla # seguido del nombre que le hayamos puesto, así si queremos apuntar a un <div> con id caja, deberíamos escribirlo así:

<div id="caja"></div>  

#caja 

Con esto lo que estamos haciendo es apuntar a una id cuyo nombre es caja, una vez hemos apuntado al id específico añadiremos los corchetes {} de apertura y cierre detrás del nombre mencionado, dentro de estos corchetes es donde va el código de CSS que aplicará estilo a la etiqueta que lleve dicha id, en este caso nuestro <div> de id caja, recuerda que solo puede haber una id con ese nombre en el documento.

#caja {
  ...Aquí va el código CSS
}

Una vez apuntado a nuestro objetivo, ya podemos aplicarle las propiedades que queramos, le daremos un ancho, un alto y un color de fondo, que son las tres propiedades que hemos aprendido en la lección anterior, para eso escribiremos el nombre del propiedad, seguido de dos puntos y su valor correspondiente, recuerda finalizar cada instrucción con el signo punto y coma, además de hacer un salto de línea para tener un código más legible y limpio. Mira como quedaría.

<style>
#caja	{
   width: 200px;
   height: 150px;
   background-color: blue;
}
</style>

Selector class

El selector class apunta a al atributo class de cualquier etiqueta HTML, ahora le añadiremos una clase al mismo <div> cuyo valor será derecha, vamos a apuntar a su clase, para apuntar a una clase hacemos exactamente lo mismo que a una id, solo hay que cambiar la almohadilla por un punto.

<div id="caja" class="derecha"></div>

.derecha

Lo siguiente es igual, abrimos y cerramos corchetes, y escribimos el código que creamos conveniente dentro de ellos. En este ejemplo vamos a utilizar una propiedad a modo de ejemplo para hacer que flote a la derecha, la propiedad es float y le asignaremos el valor de right, lo que significa que cualquier elemento con la clase derecha flotará a la derecha de la pantalla.

<style>
.derecha {
   float: right;
}
</style>

Como puedes ver para aplicar estilo en el mismo documento es bastante parecido que dentro de una etiqueta, la única diferencia es que tenemos que apuntar a cada elemento a traves de su id, clase, nombre de la etiqueta, etc... Hay muchas maneras de apuntar a un elemento que ya iremos viendo mas adelante.

Daniel Fernández Velázquez

Me encanta aprender y practicar la programación web, Autodidacta y apasionado de la tecnología.