VirtualMV/CSS/class and id

From WikiEducator
< VirtualMV‎ | CSS
Jump to: navigation, search



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.


VmvIcon Objectives.png

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.


VmvIcon Note.png

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.

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)[1]

Internal Priorities

  1. element
  2. .class
  3. #id

VmvIcon References.png References

  1. In CSS what is the difference between “.” and “#” when declaring a set of styles? (2011) In stack overflow internet services wiki. Retrieved March 1, 2011 from http://stackoverflow.com/questions/602168/in-css-what-is-the-difference-between-and-when-declaring-a-set-of-styles

virtualMV  |  Superquick wiki guide  |  Please give me some feedback

VirtualMV/CSS/class and id. (2021). In WikiEducator/VirtualMV wiki. Retrieved January 17, 2021, from http:https://wikieducator.org/VirtualMV/CSS/class_and_id    (zotero)