07. Editar el archivo CSS

Para cambiar el aspecto de la aplicación web, debemos abrir el archivo de hoja de estilo en cascada 'mini.css' y añadir al final del mismo el siguiente código:

#RipVanWinkle {

  font-size: 20px;

  font-family: 'Open Sans', sans-serif;

  text-align: center;

  margin-top: 20px;

  background-color: SlateBlue;

  color: Yellow;  

}

Esto define un estilo para el elemento con el identificativo 'RipVanWinkle'.

Para utilizar esta hoja de estilo, se debe editar el fichero 'mini.html' y añadir la siguiente linea:

<link rel="stylesheet" href="mini.css">

El resultado es el siguiente:

Selector CSS

• Un selector CSS permite a los archivos CSS, HTMO y DART referirse a los mismo objetos.
• Un selector puede ser un ID, un ELEMENTO tipo de HTML, una CLASE o un ATRIBUTO. 
• Los selectores también se pueden anidar.
• En Dart se hacen llamadas a los selectores usando query() o queryAll().
• Muy a menudo Dart usa selectores ID con query() y selectores CLASE con queryAll ().

Estos son algunos ejemplos de selectores CSS:

Tipo de selector	Ejemplo	Descripción
Selector ID	#RipVanWinkle	Detecta un unico y sencillo elemento
Elemento HTML	p	Detecta todo un parrafo
Elemento HTML	h1	Detecta todo una cabecera
Class	.classname	Detecta todo los elementos con la clase classname
Asterisco	*	Uso del asterisco para todos los elementos
Atributo	input[type=”button”]	Detecta todos los elementos tidpo botón