Como usar CSS

¿Cómo usar CSS? ¿Qué son los Selectores?

Los selectores son la parte de un estilo CSS en donde indicamos la parte del documento HTML sobre la que se va a aplicar el estilo.

Hay varios tipos de selectores diferentes, nosotros veremos los más importantes, pero antes de ello debemos de aclarar algo para la gente que esta empezando con CSS desde el principio, y es que tenemos que tener claro que cuando ponemos un estilo CSS a un elemento, estos mismos estilos también afectarán a los elementos que estén dentro de el, o por decirlo de otra forma, elementos que le pertenezcan.

Por ejemplo si tenemos este código HTML:
<div><strong> Aprendiendo CSS con Original-Design </Strong></div>
Y tenemos una regla que afecta a ese elemento div, también afectara al elemento Strong, ya que esta dentro de él.

Una vez aclarado esto, vamos a ver los diferentes tipos de selectores que podemos utilizar:

Con los selectores podemos dirigirnos a una etiqueta, esta es la forma más básica de utilizar un selector. Por ejemplo si queremos crear un estilo que afecte a todos los enlaces deberíamos de escribir este código:
a { …reglas css}

También podemos usar selectores descendentes. Esto quiere decir que podemos establecer estilos para las etiquetas que estén dentro de otras determinadas estiquetas. Por ejemplo, podemos referirnos a todas las etiquetas <span> que estén dentro de una etiqueta <div>, este sería el código CSS:
Div span {... reglas css}

Usar un elemento único también es posible con los selectores CSS, y para hacer esto no nos hace falta más que utilizar su atributo id. Después del símbolo almohadilla #

Ejemplo
#boton {... reglas css}

Otra opción es definir una clase y hacer que los elementos que queramos la utilicen, para ello debemos escribir un punto "." Seguido del nombre con el que queramos llamar a la clase.
Por ejemplo
.texto_grande {… estilo css}

Una vez definida la clase tendremos que  hacer que el elemento, o párrafo que queramos lo utilice, por ejemplo así:

<h1 class="texto_grande"> Esto es un titulo </h1>

 

Dentro de:
Siguiente:
 
Atras:

Si tienes alguna duda sobre este tutorial o necesitas algun tipo de material dejalo en el foro de nuestra web.

Ir a la pagina principal

Copyright Tutoriales Original Design - Privacidad