<New code>
HTML
id="exampleId"
— sets the id of an element to "exampleId"
CSS
#exampleId {color: red;}
— makes element with id="exampleId" red
HTML
class="exampleClass"
— sets the class of an element to "exampleClass"
CSS
.exampleClass {color: blue;}
— makes all elements with class="exampleClass" blue
What the difference between CSS tags, IDs, and classes?
There are many kind of CSS selectors. The ones that we use in this course are tags, IDs, and classes.
-
CSS tag selectors
—
p {color:red;}— are used to apply a style to every element in your document using that tag. -
CSS Id selectors
—
#exampleId {color:red;}— are used to apply a style to a single element in your document withid="exampleId". -
CSS class selectors
—
.exampleClass {color:blue;}— are used to apply a style to multiple elements in your document sharingclass="exampleClass".
CSS tag/ID/class example code
<!doctype html>
<html lang="en">
<head>
<style>
/* use tag names to apply to HTML tags */
p {
color: blue;
}
/* use a hashtag (#) to refer to single Ids */
#exampleId {
color: red;
}
/* use a period-dot (.) to refer to a class group*/
.exampleClass {
font-style: italic;
}
</style>
</head>
<body>
<h1>CSS tag/ID/class example</h1>
<p>There are three main CSS selectors that are used most frequently.</p>
<p class="exampleClass">
<strong>Tag selectors</strong>
are used to apply a style to HTML tags with the same name
</p>
<p class="exampleClass">
<strong>Id selectors</strong> are used to apply a style to a
<em id="exampleId">single</em> individual HTML element
</p>
<p class="exampleClass">
<strong>Class selectors</strong>
are used to apply a style to a group of similar HTML elements
</p>
<p>
Knowing when to use each one will be handy later on in
applying styles correctly and in programming Javascript
</p>
</body>
</html>