basic_CSS.step

goals do
  goal "Learn basic CSS syntax"
  goal "Write some basic CSS styles"
end

overview do
  message <<-MARKDOWN
## What is CSS?

CSS stands for __C__ascading __S__tyle__s__heets. It's a language for creating **rules** that
can **select** various elements on the page and change their **visual properties**.

* __C__ascading - The 'cascade' is one of the trickier elements of CSS to master, but it
  basically means you can define a bunch of styling rules of different strengths, and CSS
  will apply them all, resolving any conflicting rules by allowing stronger rules overwrite
  (or _cascade_ over) weaker rules.

* __S__tyle__s__heets - CSS files are called 'stylesheets' because they allow you to put your
  styling rules into a separate document (a 'sheet') of file type .css, and then choose to
  include one or more in a given HTML page. This is a _very_ important feature for sites with many pages,
  because it allows you to write your rules once and then include them everywhere on your site with
  a single link on each page.

## CSS Rules Are Made of a Selector and Attributes

*This section includes vocabulary you'll probably just want to memorize after class.*

The **selector** tells the browser what elements to add that style to. On this page we'll only use existing tags, like `<h1>` and `<p>`, as our selectors.

The **attributes** tell the browser how to style the elements you selected. The first part, `padding:` is a **property**, and the part after the colon `20px` is the **value**. The line is finished with a semicolon.

All together, the selector and properties together are called a **rule**.

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

(You will forget the semicolon at some point, and your CSS will break, but it's an easy fix.)

## Why are HTML and CSS separate?

HTML tells the browser what your content _means_, whereas CSS tells the browser how it should _look_. 

HTML is semantic: it's concerned with the meaning of the content, whereas CSS is presentational&mdash;CSS is all about style.

MARKDOWN
end

steps do

  step do
    message "Initially, we're going to add our CSS inside the `<head>` tag, below the line with the page title."
    message "A standard style tag might look like this:"
    source_code :html, <<HTML
<head>
<title>My Sample HTML page</title>
<style type="text/css" media="screen">

</style>
</head>
HTML
    message "Now save the file and refresh your browser. Everything should look the same."
  end

  step do
    message "Add some styles that will apply to your `h1` and `p` tags."
    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
When you save and refresh your browser, you should see the styles you added:

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

The `type` and `media` attributes inside of the `<style>` tag give the browser more context for how to deal with the included information. In this case, we're telling it that the type is HTML/CSS, and that that it's being displayed on a screen (as opposed to `media=\"print\"`, which is usually specially styled so it looks reasonable when printed.
    MARKDOWN
  end

end


explanation do

  message <<-MARKDOWN

## CSS is super powerful

Here are two screen shots of the same HTML page, but on the right side, we've turned off all the CSS. Almost all of the color and formatting disappear, and the code snippets and buttons that were obvious with CSS styles now just look like text.

### Bundler: With and Without CSS (the horror!)

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

For some great examples of the power of CSS, check out the [CSS Zen Garden](http://www.csszengarden.com/). It takes
the same HTML, but shows it with stylesheets from a bunch of different designers applied to
it. Here are two different designers' interpretations of the same HTML:

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

end

next_step "HTML_attributes"
Other Pages

basic_CSS.step
