VirtualMV/CSS/class and id/Content

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.

Classes

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


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


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


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


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

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:

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

For example

Will match

But not

Or

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