Understanding ID and Class in CSS

Understanding ID and Class in CSS Web Design – Sec 4-9 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials

Objectives • The student will • Be able to identify how ID attributes are used in CSS to enable styling of individual elements. • Be able to identify how Class attributes are used in CSS to enable styling of groups of elements. • Have added ID and Class attributes to certain elements within a web page.

IDs and Classes • You have added style to various elements in your portfolio page, but the styles you've added have affected all elements of a particular type. • For example, when you added style to the div element that affected all div elements equally. • What if you want to stylize some div elements one way, and other div elements a different way? That's whereidandclasscome in. In this lesson you will learn how ID and Class attributes can be used to stylize individual elements (id) or groups of elements (class).

What is an ID? • Every element on your web page can be assigned a unique idattribute. • This can be any text you like, but it has to be unique (only one item can have this label). • It's a good practice to assign labels that describe the function of the element. • For example, a <ul> that's used to markup a navigation menu might have id="navigation" or id="menu"

When to use an ID • You assign an id attribute to an HTML element when: • You want to stylize that element differently than other elements of the same type. • You want to be able to link to a particular element within a web page. In fact, you already added id="main" to one of the div elements on your portfolio page when you created a "skip to main content" link. • You want to be able to directly access that element using Javascript. You'll learn more about that in the lesson on Javascripts. • Today we’re just looking at reason 1

ID Example • Let's say you have a paragraph that serves as an alert on a page. You don't want it to look like all the other paragraphs on the page. You want it to stand out so people are sure to notice it. You could add id="alert" to that paragraph, like this: <p id="alert">Important! All classes are cancelled today.</p> • To add style to an element with an id, you preface the id with a # symbol in your CSS: #alert { color: black; font-weight: bold; background: #FFFF66; /* yellow */ }

What is a Class? • A class allows you to stylize a group of elements the same way. • Unlike ID, you can use the same class name for multiple items.

Class Example • You're creating an entertainment web page that includes several movie reviews, in addition to other content. The entire content of each review (a heading with the movie title, plus several paragraphs) is wrapped in a <div> in order to keep it all together in one box. The first paragraph of each review is a short summary describing the movie, then all remaining paragraphs contain the content of your critique of the movie. You may want to stylize the <div> elements that contain each review differently than other <div> elements on the page, so reviews all have a distinct look, but consistent with one another. You could accomplish this by assigning class="review" to each of these reviews. Also, you might want the summary paragraph to have a distinctive look, different from all other paragraphs. You could accomplish this by assigning class="summary" to each summary paragraph.

Class Example • The HTML would look like this: <div class="review"> <h2>The Godfather</h2> <p class="summary">The Godfather (1972) is the greatest movie of all time, according to numerous surveys of movie critics and audiences alike.</p> <p>The Godfather is... (your review here)</p> </div> <div class="review"> <h2>Avatar</h2> <p class="summary">Avatar (2009) is the highest grossing film of all time, earning approximately $2.8 billion.</p> <p>Avatar is... (your review here)</p> </div> • The CSS code might look like this: div.review { background-color: #E6EBF5; border: 1px solid #003399; } p.summary{ font-style: italic; }

Class Example - Result

Descendant Selectors • In addition to assigning styles to a class of elements, you can also assign styles to descendants of those elements. • A descendant is an element that is nested inside another element.

Descendant Example • Let's say you wanted all <a> elements (links) on a page to be red and underlined. Here's how you could accomplish that in CSS: a { color: red; text-decoration: underline; } • However, let's also say you wanted a different style for links that are part of your navigation menu. You want them to be white text on a dark blue background, with no underline. Assuming these links are contained within a <ul> with id="navigation", you could stylize those using descendant selectors in CSS, like so: ul#navigation a { color: white; background-color: #003399; /* dark blue */ text-decoration: none; } • the selector ul#navigation a tells the browser to apply the style definition to every <a> element that's inside of the<ul> element that has id="navigation".

Rest of Today • Download the instructions for today. • When you are done, in your index.html, every <div> tag will have either an id or class attribute and the <p> tags for the reflections you haven’t written will also have a class attribute. • You also need to update two <div> tags in all your other html files.

Understanding ID and Class in CSS