Other Pages

HTML Attributes

Goals

  • Code some common HTML attributes

  • Use class and id attributes as hooks for CSS styles

Overview

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:

<input type='radio' name='rando-radio'>

looks like a radio button: , but

<input type='password' name='fake-password' value='ick'>

looks like a password text input: 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.

Steps

Step 1

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:

<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 PHPBridge needs volunteers, should I volunteer!?!</p>

Step 2

Add the class 'special' to your first paragraph. It'll look something like this:

<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 PHPBridge needs volunteers, should I volunteer!?!</p>

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 site will look the exact same until we use the class to add CSS styling.

Step 3

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.

Try giving the 'special' class a green border. Add this rule inside of your style tag:

.special {
  border: 1px solid green;
}

Refresh the page in the browser. You'll see something like this:

Step 4

Let's wrap your name in a span tag and give that an ID of 'user-name'. It'll look something like this:

<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 PHPBridge needs volunteers, should I volunteer!?!</p>

Save and refresh the page in the browser. Again, you shouldn't see any difference.

Step 5

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:

#user-name {
  font-weight: bold;
}

(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:

Explanation

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.

Next Step: