Weblab Lesson 18
Presentation
•
Computers
•
8th Grade
•
Practice Problem
•
Easy
Margaret Maloney
Used 1+ times
FREE Resource
3 Slides • 11 Questions
1
Anchor Tag States
An anchor (<a>) tag has four states:
link: when the link has not yet been clicked
visited: when the link has been clicked (clicking a link "visits" that linked page, hence the name "visited")
hover: when the mouse is hovered over, but not clicked, the link
active: the moment the mouse is actively clicking down on the link
We style these states using pseudo-classes. In the example below, we specify the anchor element selector, a colon, and the name of the anchor state:
2
Multiple Choice
An anchor tag has _____ states.
10
4
26
12
3
Multiple Choice
The link state of an anchor tag is when:
there is no link
the link has already been clicked
the link is invisible
the link has not yet been clicked
4
Multiple Choice
The visited state of an anchor tag is:
the link has NOT been clicked
aliens visited the link
when the link has been clicked
the link is invisible
5
Multiple Choice
The hover state of an anchor tag is:
when the link is clicked
when the mouse is hovered over, but not clicked, the link
when the link is invisible
when aliens use a hover board
6
Multiple Choice
The active state of an anchor tag is:
the moment the mouse is invisible
the moment the mouse eats the cheese
the moment the mouse is actively clicking down on the link
the moment
7
Section 2:
The CSS rule-set below shows that once the link has been clicked to visit the site:
The link color will turn to purple.
The font-size will change to 30 pixels.
___________________________
a:visited{
color:purple;
font-size: 30px;
}
8
Multiple Choice
Which answer describes what will happen in this CSS rule set?
a:visited{
color:purple;
font-size: 30px;
}
The link will turn purple and change to a font size of 30 pixels once the link has been clicked.
The link will remain the same no matter what.
The link will turn purple, but the font will remain the same.
The font size will change, but the link color will remain the same.
9
Multiple Choice
What does the CSS rule set below do?
a:hover{
color: chocolate;
background-color: aquamarine;
font-size: 32px;
When you hover over a link the color of the text turns chocolate and the background color is aquamarine. The font size will change to 32 pixels.
When you hover over a link nothing happens.
When you hover over the link the background color changes to chocolate.
Aliens invade the earth.
10
Anchor Pseudo-class Order
It is recommended that if you are going to use all four states for an anchor tag, you create your rule sets in CSS in the following order:
link
visited
hover
active
Setting these out of order on your CSS can create unforeseen actions as the cascading style of CSS can have one property overriding another. In short, if there are competing rule sets, styles declared later typically override those declared earlier.
One way to remember the right order is with the phrase "LOVE, HATE" - LV, HA (Link, Visited, Hover, Active).
11
Dropdown
12
Multiple Choice
Setting CSS rule sets out of order can have unforeseen effects. This is because:
if there are competing rule sets, styles declared later typically override those declared earlier.
if there are competing rule sets, styles declared earlier typically override those declared later.
Aliens invaded
13
Dropdown
14
Multiple Choice
Which is the correct order to code the CSS rule set for the different states of the anchor tags?
Active
Hover
Link
Visited
Visited
Hover
Link
Active
Link
Hover
Active
Visited
Link
Visited
Hover
Active
Anchor Tag States
An anchor (<a>) tag has four states:
link: when the link has not yet been clicked
visited: when the link has been clicked (clicking a link "visits" that linked page, hence the name "visited")
hover: when the mouse is hovered over, but not clicked, the link
active: the moment the mouse is actively clicking down on the link
We style these states using pseudo-classes. In the example below, we specify the anchor element selector, a colon, and the name of the anchor state:
Show answer
Auto Play
Slide 1 / 14
SLIDE
Similar Resources on Wayground
9 questions
DESAFIO_PROVAPR_8_EF_HIST_002
Presentation
•
8th Grade
9 questions
Math Check In
Presentation
•
8th Grade
9 questions
Praise, Criticism, or Feedback
Presentation
•
8th Grade
11 questions
Moon Phases
Presentation
•
8th Grade
11 questions
Volume of a Cylinder
Presentation
•
8th Grade
10 questions
Present Perfect - Simple Past
Presentation
•
8th Grade
10 questions
Coordinate Plane Reflections
Presentation
•
8th Grade
9 questions
XYZ Affair
Presentation
•
8th Grade
Popular Resources on Wayground
24 questions
PBIS-HGMS Day 10
Quiz
•
6th - 8th Grade
10 questions
HCS SCI 03 Summer School Review 3
Quiz
•
3rd Grade
11 questions
Home Scope
Quiz
•
7th - 8th Grade
15 questions
HCS SCI 05 Summer School Assessment 3 Review
Quiz
•
5th Grade
35 questions
Lufkin Road Middle School Student Handbook & Policies Assessment
Quiz
•
7th Grade
18 questions
Geo 11.3 Area of Circles and Sectors
Quiz
•
9th - 11th Grade