Elementary Download: CSS Básico: ¿Qué es CSS y para que sirve?

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:

1
2
3

selector{
propiedad:valor;
}

Antes de CSS para estilizar una pagina se tenían que repetir etiquetas una y otra vez, ahora gracias a CSS y sus selectores la 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:

1	<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
que las podemos poner en cualquier parte de la pagina:

1
2
3
4
5

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 :

1	<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:

1
2
3

*{
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:

1
2
3

h1{
color:red;
}

Selector de clase

Este selector es representado por un punto . se usa para seleccionar elementos que contentan el atributo class:

1
2
3

.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:

1
2
3

#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.

1
2
3

#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:

1
2
3

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)

1
2
3
4
5
6
7
8
9
10

#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 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:

1
2
3

#box, .box, ul li a, #box:hover, input[type="text"] {
color:red;
}

Ejemplo

Entendiendo ya los puntos anteriores procederemos a hacer un ejemplo practico:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<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: