CSS_basico.step

goals do
  goal "Aprender sintaxis básica de CSS"
  goal "Escribir algunos estilos básicos de CSS"
end

overview do
  message <<-MARKDOWN
## ¿Qué es CSS?

CSS significa __C__ascading __S__tyle__s__heets (hojas de estilo en cascada). Es un lenguaje para crear **reglas** que puedan **selecionar** varios elementos en la página y cambiar sus **propiedades visuales**.

* __C__ascading - La 'cascada' es uno de los elementos de CSS mas difícil de dominar, pero básicamente significa que puedes definir varias reglas de estilos de diferentes valores, y el CSS los aplicará a todos, resolviendo cualquier conflicto permitiendo que reglas más estrictas sobreescriban (o sobre _cascada_) a las débiles.

* __S__tyle__s__heets - Los archivos CSS son llamados 'stylesheets' porque te permiten poner tus reglas de estilos en un documento por separado (una 'hoja') de tipo .css, y después puedas incluir una o más en una página HTML. Está es una _muy_ importante característica para sitios con muchas páginas, ya que permite escribir tus reglas una vez y luego incluirlas en todo tu sitio con un solo link en cada página.

## Las Reglas CSS están hechas por un Selector y Atributos

* Esta sección incluye vocabulario que probablemente quieras memorizar después del taller.*

El **selector** le dice al navegador qué elementos agregar el estilo. En esta página sólo usaremos etiquetas existentes, `<h1>` y `<p>` como nuestros selectores.

Los **atributos** le dicen al navegador cómo estilizar. La primera parte, `padding:` es una **propiedad**, y la parte después de los dos puntos `20px` es el **valor**. La línea se termina con un punto y coma.

Todo junto, el selector y las propiedades son llamados **reglas**.

<img src='img/css.png'>

(Olvidarás el punto y coma en algún momento, y tu CSS se romperá, pero se soluciona fácilmente.)

## ¿Por qué están HTML y CSS por separado?

HTML le dice al navegador lo que _significa_ tu contenido, mientras CSS es presentacional&mdash;CSS es todo sobre estilos.

MARKDOWN
end

steps do

  step do
    message "Inicialmente, vamos agregar nuestro CSS dentro de la etiqueta `<head>`, debajo de la línea con el título de la página."
    message "Una etiqueta de estilo estándar debe verse así:"
    source_code :html, <<HTML
<head>
<title>Mi página HTML de ejemplo</title>
<style type="text/css" media="screen">

</style>
</head>
HTML
    message "Ahora guarda el archivo y actualiza tu navegador. Todo debe verse igual."
  end

  step do
    message "Agrega algunos estilos que se aplicarán a tus etiquetas `h1` y `p`."
    source_code :html, <<HTML
<style type="text/css" media="screen">
h1 {
  font-size: 20px;
  border-bottom: 1px solid #cccccc;
}

p {
  padding: 10px;
  background-color: papayaWhip;
}
</style>
HTML
    message <<-MARKDOWN
Al guardar y actualizar tu navegador, deberás ver los estilos que agregaste:

<img src='img/hello_style.png'>

Los atributos `type` y `media` dentro de la etiqueta `<style>` le dan al navegador más contexto sobre cómo utilizar la información incluida. En este caso, le decimos que el tipo es HTML/CSS, y eso será mostrado en la pantalla (a diferencia de `media=\"print\"`, que es especialmente usada para estilizar.)
   MARKDOWN
  end

end


explanation do 

  message <<-MARKDOWN

## CSS es poderoso

Aquí hay dos capturas de pantalla de la misma página HTML, pero en la parte derecha, quitamos todo el CSS. Casi todo el color y el formato desaparece, y los fragmentos de código y botones que estaban con estilo CSS ahora se ven como texto.

### Bundler: Con y Sin CSS (¡el horror!)

<img src='img/css_bundler.png'>

Para más ejemplos del poder de CSS, revisa [CSS Zen Garden](http://www.csszengarden.com/). Toma el mismo HTML, pero lo muestra con hojas de estilos de varios diseñadores. Aquí hay diferentes interpretaciones del mismo HTML de dos diseñadores:

<img src='img/css_zen.png'>
  MARKDOWN

end

next_step "atributos_HTML"
Otras Páginas

CSS_basico.step
