Permalink
Browse files

'important' class → 'special'

  • Loading branch information...
1 parent 2a69b7a commit 1a1c833af784a8fefd5cc2428b10b57bb5a941f7 @ymendel committed Apr 1, 2013
Showing with 7 additions and 7 deletions.
  1. +7 −7 sites/frontend/HTML_attributes.step
@@ -12,21 +12,21 @@ steps do
end
step do
- message "Add the class 'important' to your first paragraph. It'll look something like this:"
- source_code "HTML", "\s\s<h1>Hello <em>World</em>!</h1>\n\s\s<p class=\"important\">My name is Rachel.</p>\n\n\s\s<p>In my free time, I enjoy math, Railsbridge, soccer,\n\s\s and shopping for fancy hats.</p>\n</body>\n</html>"
+ message "Add the class 'special' to your first paragraph. It'll look something like this:"
+ source_code "HTML", "\s\s<h1>Hello <em>World</em>!</h1>\n\s\s<p class=\"special\">My name is Rachel.</p>\n\n\s\s<p>In my free time, I enjoy math, Railsbridge, soccer,\n\s\s and shopping for fancy hats.</p>\n</body>\n</html>"
message "Refresh the page in the browser. You should see any new paragraphs you added, but no styling changes. Many HTML attributes, like classes and ids, don't directly convey visual information. Your paragraph will look the 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. Try giving the 'important' class a green border. Add this rule inside of your `style` tag:"
- source_code "CSS", ".important { \n\s border: 1px solid green;\n}"
+ message "To add a style rule that will apply to a class, use the syntax `.class-name` for your selector. Try giving the 'special' class a green border. Add this rule inside of your `style` tag:"
+ source_code "CSS", ".special { \n\s border: 1px solid green;\n}"
message "Refresh the page in the browser. You'll see something like this:"
message "<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", "\s\s<h1>Hello <em>World</em>!</h1>\n\s\s<p class=\"important\">My name is\n\s\s <span id=\"user-name\">Rachel</span>.</p>\n\n\s\s<p>In my free time, I enjoy math, Railsbridge, soccer,\n\s\s and shopping for fancy hats.</p>\n</body>\n</html>"
+ source_code "HTML", "\s\s<h1>Hello <em>World</em>!</h1>\n\s\s<p class=\"special\">My name is\n\s\s <span id=\"user-name\">Rachel</span>.</p>\n\n\s\s<p>In my free time, I enjoy math, Railsbridge, soccer,\n\s\s and shopping for fancy hats.</p>\n</body>\n</html>"
message "Save and refresh the page in the browser. You shouldn't see any difference."
end
@@ -71,8 +71,8 @@ looks like a password text input: <input type='password' name='rando-radio' valu
* 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 "important" and use that class to highlight them.
- Even if you only have one paragraph that's important now, you might
+ 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.
* An **id** is a unique label. Use it to identify things you'd only have one

0 comments on commit 1a1c833

Please sign in to comment.