VirtualMV/CSS/class and id
Cascading Style Sheets | ||
---|---|---|
Overview | Inline, embedded, linked | Language | class and id selector | Example | Help Desk ( Interactive ) | |
Formatting | Span | Text | Devices | |
Layout | Block centering | | |
Techniques | Navigation | Gradient filled background | Other |
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 pageBy the end of this page you will be able to:
|
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.
AvoidIt 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
- element
- .class
- #id
References
- ↑ 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. (2024). In WikiEducator/VirtualMV wiki. Retrieved November 5, 2024, from http:https://wikieducator.org/VirtualMV/CSS/class_and_id (zotero)
|