Scribd
Upload
46 views

Lesson 3 CSS Class and ID

The document discusses CSS classes and ID selectors, explaining that classes are defined with a period and can be applied to any HTML element, while IDs can only be applied once per page and are defined with a hash; it also covers pseudo-classes for links, including link, visited, hover, and active, and provides examples of how to write CSS classes, IDs, and pseudo-classes.

Uploaded by

Helen Asuncion
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
46 views

Lesson 3 CSS Class and ID

The document discusses CSS classes and ID selectors, explaining that classes are defined with a period and can be applied to any HTML element, while IDs can only be applied once per page and are defined with a hash; it also covers pseudo-classes for links, including link, visited, hover, and active, and provides examples of how to write CSS classes, IDs, and pseudo-classes.

Uploaded by

Helen Asuncion
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 22

UNDERSTANDING CSS:

Classes and ID
Selector
What are Classes?
• A Class is a user-defined selector. You can
create a class to apply a style rule to specific
HTML tags. Using CSS class you can control
individual HTML element formatting.
• Classes are defined by dots ( . ) There are two
methods of writing class. The first one is by
indicating the HTML elements followed by a dot
then followed by the class name (any name you
want for it). The second one is by writing the
class name preceded by a dot.
Example
• The picture on the right is a
CSS file that shows classes.
The first style is written using
the first method while the
second style is written using
the second method.
• The first one (p.bluefont) is a
style that can only be used
on paragraphs while the
second one (.redfont) can be
used on any HTML element.
This shows the difference
between the two methods of
writing the classes.
What are Classes?
• A class must be called on the HTML file for it to
be used. How is this done? You can call classes
by putting the class attribute in the tag you want
to style and the class name as its value. The
bluefont is the class name of p.bluefont and
redfont is the class name of .redfont.
Class Selector
• Class Selector is a style pplied to a particular set
of elements.

Class Selector

Class Selector
applied in the body
Output
ID Selector
• ID selector is a style applied to one element in a
page. It is normally used once, usually in a page
title or the navigation part of the page. ID
selector is defined by “#” and used the id
attribute of the HTML element.
• It is not advisable to start an id selector with a
number because some browsers do not support
it.
Example

ID Selector

ID Selector
applied in the
body
Output
Pseudo-classes and Links
• Pseudo-classes are defined by a colon and are
not user-defined. Specific pseudo-classes can
be used on specific HTML elements only.
• The anchor element has four pseudo-classes,
link, visited, hover and active. Each one affects
the behavior of the anchor element.
• The link pseudo-class is for hyperlinks that have
not yet been visited. The visited pseudo-class is
for visited hyperlinks. The hover is for hyperlinks
when the mouse is hovered over them. Lastly,
active pseudo-class is for hyperlinks when they
are clicked.
Example:

External style
link

Link Style
Output
Quiz: Identification
1. These classes are defined by a colon and are
not user defined.
2 – 5 What are the four pseudo classes of anchor
element.
6. It is for hyperlinks that have not yet been visited.
7. It is for hyperlinks when they have the mouse
stay close over them.
8 – 10. The order of the anchor property should be,
Link, then __________, followed by _______ and
last is _________.
Write T if the statement is true and F if not then write the
incorrect word that made the statement wrong.
1. A code is a user-defined selector.
2. Classes are defined by dots ( . )
3. One way to write a class is by writing the class name as
preceded by a dot.
4. There are three ways to write a class.
5. Class selector is applied to a particular set of elements.
6. Multiple- selector is a style applied to one element per
page.
7. You can write a class by indicating the header element
followed by a dot.
8. You may always run the case where two or more
selectors might just have the same properties and values.
9. With the use of classes, you can control individual HTML
element formatting.
10. You can call a class by putting the selector attribute in the
tag you want to style.
Quiz:
1. A term used when talking about design and layout in
CSS.
2. This part clears an area outside the border of a box.
3. Where text and images appear.
4. Clears an area around the content. This is transparent.
5. Part of the box that goes around the padding and content.

Problem Solving: (5 pts)


If I am going to create a div for header which has a margin of
10px, a padding of 5px, a border of 5px and a content width
of 660px, what is the total width of the element div? Show
how the total width of an element should be calculated.
Assignment:
1. What are Classes and Class
Selector? Give some example
2. What are ID selector? Give an
example
3. What is Pseudo-Classes for
Links?
Answer:
Identification: True or False:
1. Pseudo-classes 1. F code
2. Link 2. T
3. Visited 3. T
4. Hover 4. F three
5. Active 5. T
6. Link 6. F one
7. Hover 7. F header
8. Visited 8. T
9. Hover 9. T
10. Active 10. F selector
Transitional Page
www.animationfactory.com

Backdrops:
- These are full sized
backdrops, just scale them up!
- Can be Copy-Pasted out of
Templates for use anywhere!

You might also like