CODEWITHSUNDEEP
htmlcss
macsplean
macsplean

Reputation: 609

Learning CSS : Why does this code work?

I am taking a CSS course on codeschool.com and I am confused by a specific code. I was supposed to edit the code to test a specific function of CSS and I got the answer right, but I don't understand why the code actually works. Here is the html:

<!doctype html>
<html lang="en">
  <head>
    <title>Sven's Snowshoe Emporium</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <section id="home" class="content home group">
      <aside>
        <p>Did you know that Sven's Snowshoe Emporium produces the highest quality snowshoes                        in North America? <a href="#">Find out more</a>.</p>
      </aside>
      <article>
        <h3>New Fall Styles</h3>
        <p>Be the first at your resort to sport the hot new tennis-themed snow kicks, now available in the <a href="#">store</a>.</p>
        <a class="button" href="#">See all products</a>
      </article>
    </section>
  </body>
</html>

The CSS is

.home a {
  color: #c09e79;
}
article .button {
  color: #fff;
}

I am confused because in the html code, 'button' is a class, so I thought it would be identified in CSS as #button, not .button

Upvotes: 1

Views: 176

Answers (6)

Joren
Joren

Reputation: 3315

In CSS classes are identified by a . before the classname. ID's are identified bij a #. Tags are identified by only its name.

  • <a class="class_example"> is identified in CSS by .class_example { ... }
  • <a id="id_example"> is identified in CSS by #id_example { ... }
  • <a> is identified in CSS by a { ... }

You can also stack the selectors on top of each other for specific selections:

  • <a class="class_example" id="id_example"> can be identified by a.class_example#id_example { ... }

Keep in mind that in this case all of the first three identifiers will work.

Upvotes: 3

Peter Rasmussen
Peter Rasmussen

Reputation: 16942

.home selects a class

#home selects an id

Id's are used once in a document and classes can be used several times. Elements can also have several classes but only one id.

In your code you have an element with both the id home and the class home. So either .home or #home would work.

Upvotes: 4

Marcatectura
Marcatectura

Reputation: 1695

The code might work for you in some browsers because they're designed to function even when code is wrong. If a class and id are mismatched, the property might only apply to the classed item the first time. However, if an item has class "home" and it's styled with #home, it's almost certainly going to break in most cases.

Upvotes: 0

Serjik
Serjik

Reputation: 10971

/* all anchors (a tags) inside all elements that have class='home' will get this  */
.home a {
  color: #c09e79;
}

/* all elements with class='button' that are inside tag with name article will recieve this */
article .button {
  color: #fff;
}

Upvotes: 0

Grant Weiss
Grant Weiss

Reputation: 355

Here is the difference between Tag Name, Id, and Class

div
#id
.class

http://jsfiddle.net/weissman258/Hw6gu/

Upvotes: 1

Adam Brown
Adam Brown

Reputation: 2870

A fullstop in front of a word denotes it ass a class, a hash tag means it is an id.

Typically Id's are used only once in a document and Class repeatedly 

#james{
 color:#FFF;
}
.Tom{
 color:#000;
}
.Big{
 font-size:4em;
}

The first one can only be accesed with 'id="James"' whereas the second with 'class="Tom"

You can have multiple classes on an object but only one id, to add an extra class you just put a space in.

class="Tom Big"

Upvotes: 5

Related Questions