VirtualMV/CSS/class and id

Introduction

How do we create a template that can be applied to many tags? For this we use the CSS class attribute. How do we target a single specific element with a unique id? For this we use the id selector.

Using styles in a web page By the end of this page you will be able to: Understand how and when to use the class and selector id

Classes

• With the class selector you can define different styles for the same type of HTML element.

 p.right {text-align: right}
 p.center {text-align: center}

• You have to use the class attribute in your HTML document:

 <p class="right">This paragraph will be right-aligned.</p>
 <p class="center">This paragraph will be center-aligned.</p>

• Note: Only one class attribute can be specified per HTML element! The example below is wrong:

 <p class="right" class="center">This is a paragraph.</p>

• You can also omit the tag name in the selector to define a style that will be used by all HTML elements that have a certain class.

• In the example below, all HTML elements with class="center" will be center-aligned:

 .center {text-align: center}

• In the code below both the h1 element and the p element have class="center". This means that both elements will follow the rules in the ".center" selector:

 <h1 class="center">This heading will be center-aligned</h1>
 <p class="center">This paragraph will also be center-aligned.</p>

FAQ Example

If you want to simplify the coding on an FAQ page and change the formatting depending on whether you are displaying a question or answer you could use a style definition as follows:

<style> 
  p.question {color: green; font-style: italic}
   .answer  {color: red}
</style> 
And your FAQ using the defined classes would be as follows:

<p class="question">What is HTML?</p>
<p class="answer">HTML is a markup language for Web pages.</p>
<p class="question">How do we build a Web Site?</p>
<p class="answer">Looks like we have some things to do!!</p>

ID selector #

The ID selector only applies to ONE element on a page.

Avoid It is recommended that the id selector is NOT used in CSS but is necessary in JavaScript to identify a particular object in a Web Document. Coyier, C. (2012) Welcome to CSS Wizardry—Web standards design and development Some design tips (do's and don'ts)

For example

div#green {color: red}

Will match

<div id="green">Some text</div>

But not

<h2 id="green">Some text</h2>

Or

*#green {color: red}

will match the first element with the id value of "green"

Class and ID selector differences

• # is an id selector, used to target a single specific element with a unique id, but
• . is a class selector used to target multiple elements with a particular class.

• #foo {} will style the single element declared with an attribute id="foo"
• .foo {} will style all elements with an attribute class="foo" (you can have multiple classes assigned to an element too, just separate them with spaces, e.g. class="foo bar")

In CSS what is the difference between “.” and “#” when declaring a set of styles? (2011)

Internal Priorities

1. element
2. .class
3. #id

References

virtualMV  |  Superquick wiki guide  |  Please give me some feedback

VirtualMV/CSS/class and id. (2024). In WikiEducator/VirtualMV wiki. Retrieved April 26, 2024, from http:https://wikieducator.org/VirtualMV/CSS/class_and_id    (zotero)