HTML_attributes.step

goals do
  goal "Code some common HTML attributes"
  goal "Use class and id attributes as hooks for CSS styles"
end

overview do

  message <<-MARKDOWN

## Why do we need attributes?

HTML tags first give your browser information about the content they wrap. They can also be extended to include other information about the content, like what type of form input the tag is, or like the `media` attribute, which we saw on the last page can be used to indicate whether the content will be displayed on a screen or printed out.

When creating a form, you'll use attributes to tell the browser what type of input they are,
and the results will be easy to tell apart. This input:

  MARKDOWN
  source_code :html, "<input type='radio' name='rando-radio'>"
  message <<-MARKDOWN

looks like a radio button: <input type='radio' name='rando-radio'>, but

  MARKDOWN
  source_code :html, "<input type='password' name='fake-password' value='ick'>"
  message <<-MARKDOWN

looks like a password text input: <input type='password' name='rando-radio' value='ick'> even though they use the same **tag**.

## How do CSS and HTML connect?

Tags and attributes, mostly!

So far we've only applied styles to HTML tags like `<p>` and `<h1>`. But what if we want to apply a style to only a few of the instances of a given tag? We don't want _every_ paragraph to look special, so we can't add our style directly to the `<p>` tag.

This is where `class=` and `id=` attributes come in. Adding a class or ID to an HTML attribute allows you to add CSS styles to just that attribute.


  MARKDOWN

end

steps do

  step do
    message "Let's add some classes and ids to our HTML. Start by adding one or two more paragraphs of text to the bottom of your HTML document. The last lines might look like this:"
    source_code :html, <<HTML
<h1>Hello <em>World</em>!</h1>
<p>My name is Rachel.</p>
<p>I like:</p>
<ul>
  <li>Polka Dots</li>
  <li>Soccer</li>
  <li>Programming</li>
</ul>
<p>I hear RailsBridge needs volunteers, should I volunteer!?!</p>
HTML
  end

  step do
    message "Add the class 'special' to your first paragraph. It'll look something like this:"
    source_code :html, <<HTML
<h1>Hello <em>World</em>!</h1>
<p class="special">My name is Rachel.</p>
<p>I like:</p>
<ul>
  <li>Polka Dots</li>
  <li>Soccer</li>
  <li>Programming</li>
</ul>
<p>I hear RailsBridge needs volunteers, should I volunteer!?!</p>
HTML
    message "Refresh the page in the browser. You should see any new paragraphs you added, but no styling changes."
    message "Many HTML attributes, like classes and ids, don't directly convey visual information. Your site will look the exact same until we use the class to add CSS styling."
  end

  step do
    message "To add a style rule that will apply to a class, use the syntax `.class-name` for your selector. It will be almost the same as the styles that you added to `<h1>` and `<p>`, but with a period at the beginning of your class name."
    message "Try giving the 'special' class a green border. Add this rule inside of your `style` tag:"
    source_code :css, <<CSS
.special {
  border: 1px solid green;
}
CSS
    message "Refresh the page in the browser. You'll see something like this:"
    img src: 'img/css_class.png'
  end

  step do
    message "Let's wrap your name in a `span` tag and give that an ID of 'user-name'. It'll look something like this:"
    source_code :html, <<HTML
<h1>Hello <em>World</em>!</h1>
<p class="special">My name is
  <span id="user-name">Rachel</span>
</p>
<p>I like:</p>
<ul>
  <li>Polka Dots</li>
  <li>Soccer</li>
  <li>Programming</li>
</ul>
<p>I hear RailsBridge needs volunteers, should I volunteer!?!</p>
HTML
    message "Save and refresh the page in the browser. Again, you shouldn't see any difference."
  end

  step do
    message "Now, add the corresponding style rule for your ID, using the syntax `#id-name` for your selector. Try making the 'user-name' id look bold. Add this rule inside of your `style` tag:"
    source_code :css, <<CSS
#user-name {
  font-weight: bold;
}
CSS
    message <<-MARKDOWN
(Note: The span is just an element that lets you apply a class, id, or other attribute to a string of text without adding any line breaks. Browsers won't give it any styling by default.)

Once you add your style rule and refresh the page in the browser, you'll see something rather ugly like this:
    MARKDOWN
    img src: 'img/css_id.png'
  end

end


explanation do
  message <<-MARKDOWN

## When should I use a class, and when should I use an ID?

### Classes
A **class** attribute should be used to group elements that _could_ exist
more than once on a given page. For example, you might give certain
paragraphs a class of `"special"` and use that class to highlight them.
Even if you only have one paragraph that's special now, you might
want to add more later.

A class attribute will look like `class="special"` in the HTML and `.special` in the CSS. Don't mix up where the dot goes!

### IDs
An **id** is a unique label. Use it to identify things you'd only have one
of. For example, if you ran a news website, you would only have one element
on a page that would serve as a masthead, and you could give it an id
like `id="handsome-header"`

An id attribute will look like `id="handsome-header"` in the HTML, and `#handsome-header` in the CSS.

Within these guidelines, when you use classes and IDs is a matter of style / taste.
MARKDOWN

end

next_step "dev_tools"
Other Pages

HTML_attributes.step
