Para seguir este tutorial es necesario tener un conocimiento basico de HTML.
En este tutorial veremos los puntos basicos de CSS (Cascading Style Sheets) el lenguaje de estilización por excelencia, su funcion es estilizar una pagina web mediante el uso de selectores y atributos.
La sintaxis de CSS es la siguiente:
Antes de CSS para estilizar una pagina se tenían que repetir etiquetas una y otra vez, ahora gracias a CSS y sus selectores esta pesadilla termino.
¿Cómo llamar a CSS dentro de HTML?
Existen 3 métodos para incrustar un cogido CSS en un documento HTML y hacer que funcionen juntos:
1. Estilización en linea
La estilizacion en linea se usa de la siguiente manera:
<h1 style="color:red;">Hola</h1>
Con ese código ya estilizados un elemento h1 para que su fuente sea de color rojo.
No es algo tan recomendado ya que no se hace uso de los selectores.
2. En el documento mismo
Podemos incluir codigo CSS mediante las etiquetas style que las podemos poner en cualquier parte de la pagina:
<style>
*{
font-family:Arial;
}
</style
3. Archivo externo
Es la mas usada y recomendada ya que mediante este método se consigue una mejor organizacion de archivos, para incluir un archivo CSS externo en HTML se usa la siguiente etiqueta HTML en el :
<link href="/ubicacion/del/archivo.css" rel="stylesheet">
Selectores
CSS funciona en conjunto con los elementos HTML, los identifica mediante los selectores y los estiliza con las propiedades CSS, existen infinidad de selectores, ahora veremos solo unos cuantos:
Selector universal
El selector universal esta representado por un asterisco * y se usa para seleccionar a todos los elementos HTML en el documento:
*{
font-family:Arial;
}
En este ejemplo usamos el atributo font-family que define el tipo de fuente a usar y con el valor de Arial.
Selector de tipo
El selector de tipo es definido por el nombre del elemento a seleccionar, por ejemplo si queremos seleccionar todos los elementos h1, el selector seria asi:
h1{
color:red;
}
Selector de clase
Este selector es representado por un punto . se usa para seleccionar elementos que contentan el atributo class:
.box{
font-weight:bold;
}
El atributo font-weight se usa para definir el estilo que la letra ha de llevar, en este caso le hemos puesto el valor de bold o negrita.
Selector de id
Este selector esta representado por un # y se usa para seleccionar elementos individuales que tengan el atributo id:
#box{
background-color:black;
}
Esto hara que el elemento que tenga el id de box tenga un fondo negro.
Hay que notar que el atributo id es único, dos elementos no pueden tener el mismo id.
Selector de descendiente
El selector de descendiente, selecciona a cualquier elemento que descienda de el elemento padre.
#box ul {
color:gray;
}
Lo que hara ese selector es seleccionar a todos los ul que esten dentro de #box.
Selector de atributo
El selector de atributo, selecciona a todos los elementos que tengan el atributo y el valor especificado:
input[type="text"] {
background-color:blue;
}
Este selector seleccionara a todos los elementos input que tengan atributo type=»text».
Pseudo-selector de estado
Los selectores de estado, seleccionan a los elementos dependiendo de ciertas acciones del usuario:
- :hover (cuando el cursor pasa por encima del elemento)
- :active (cuando el usuario clica el elemento con clic derecho o izquierdo)
- :focus (cuando un elemento esta en foco, mayormente en cajas de texto cuando se dan los eventos del teclado)
#box:hover{
background-color:green;
}
#box a:active{
color:blue;
}
#box input:focus{
background-color:black
color:white;
}
En el ejemplo de arriba usamos tanto los selectores de estado, como el de descendencia para decir que todo a que este en estado active dentro de #box tenga la propiedad color:blue.
Agrupando selectores
Podemos agrupar selectores para afectar a mas elementos usando menos lineas, para eso usamos comas:
#box, .box, ul li a, #box:hover, input[type="text"] {
color:red;
}
Ejemplo
Entendiendo ya los puntos anteriores procederemos a hacer un ejemplo practico:
<html>
<head>
</head>
<body>
<style>
*{
font-family:Arial, sans-serif;
}
body{
background-color:#111111;
}
h1{
color:gray;
}
p{
color:green;
}
.holamundo{
color:orange;
}
</style>
<h1 class="holamundo">Hola mundo</h1>
<p>Esto es un texto de ejemplo que usaremos para aprender CSS!</p>
<h1>Ciao</h1>
<p class="holamundo">Soy naranja!</p>
</body>
</html>
Incrustamos el CSS dentro del mismo documento, y definimos que:
- Linea 8: Todos elementos tengan como fuente Arial.
- Linea 11: El elemento body tenga como color de fondo #111111.
- Linea 14: Todos los elementos h1 sean de color gris.
- Linea 20: Todos los elementos que tengan la clase holamundo sean de color naranja.
Obtendríamos lo siguiente:
Con este ejemplo entendemos que: el primer h1 deberia ser gris (linea 11), pero tiene como clase holamundo entonces es naranja, el segundo párrafo deberla ser verde como el primero, pero tiene la clase holamundo entonces es naranja también.
En este tutorial hemos tratado solo de unas cuantas propiedades CSS (color, font-family, background-color) que son las mas sencillas para aprender, pero existen decenas de propiedades si quieres ver una lista completa de estas, puedes revisar este PDF.