In this exercise we will learn what the purpose of ids and
classes are. For now you can think of
both ids and classes as identifiers ( In
the Css world they are known as selectors).
So what you do is you apply an identifier (or selector ) to a tag. Then within the style tag (located within the
<head> tag) you would write a dot (.) if you identified the tag with a
class or a # if you identified the tag
with an id.
For example
IDs
<P id=”blue”> in the style tag you would write #blue to select that id and then apply the Css.
Classes
<P class=”blue”>
in the style tag you would write
.blue to select that class and then apply the Css.
So what is the difference between id and class? Well id are usually used for identifying and
apply the css for one tag, while class is used for identifying many tags.
<html>
<head>
<title>IDs and
Classes for Learning CSS </title>
<style
type="text/css">
.bigfont {
font-size:200%;
}
#blue {
color:blue;
}
.underline {
text-decoration:underline;
}
.bold {
font-weight:bold;
}
</style>
</head>
<body>
<p class="bigfont">you will notice that the
first paragraph get the big font <p>
<p id=”blue”>
Classes and ID’s are very similar…. They identify the paragraph that you
want to apply the css to.</p>
<p id="blue" class="bigfont">wow I
didn’t know we can combine a class and an id within the same tag.</p>
<p>The third <span class="underline bigfont bold">we can have many classes applied
to a tag… here we are using the span tag… the span tag doesn’t really do much as you can see but we
can use it to just apply css, which is good enough for me J</span>. This
text is after the span tag</p>
</body>
</html>
0 comments: