<% user.full_name %>
<% util.level ? util.level.title : '' %>
Explorer Pioneer Apollo Viking Voyager Pathfinder Orion
Points
<% user.points ? user.points.toLocaleString() : 0 %>
Badges
<% util.badgeCount %>
Streaks
Congratulations You've <% util.newestBadge.isCurriculum ? 'completed' : 'earned' %> the
<% util.newestBadge.title %> <% util.newestBadge.isCurriculum ? 'curriculum' : 'badge' %>!
previous
next
Share to Social Media
Linked In Facebook
Status
<% util.level ? util.level.title : '' %>
<% util.level ? util.level.points : '' %>
<% util.nextLevel ? util.nextLevel.title : '' %>
<% util.nextLevel ? util.nextLevel.points : '' %>
Level up! <% util.levelPointsRemaining %> points to go
Level up! <% util.levelPointsRemaining %> points to go
Badges
Completed Hitchhikers Track Completed Content Track Completed Pages Track Completed Page Builder Track Completed Search Backend Track Completed Search Frontend Theme Track Completed Search UI React Track Completed Solution Templates and the Admin Console Track Completed Technical Skills Track Completed Platform Basics Track Completed Listings Track Completed Reviews Track Completed Industry Overview Track Completed Analytics Track Completed Industry Overview & Product Basics Track Completed Multi-Language Experiences Track Completed Chat Track
<% util.expandBadges ? 'Less' : 'More' %>
Playground Accounts
New +
No Playground Accounts
Create Playground +
View Profile
Log Out loading
Mission Complete! 🚀
Congratulations, you’ve completed your first module!

We hope you enjoy exploring the rest of the site. Please don’t forget to leave us feedback - we are constantly looking to improve. Happy Hitchhiking!
Home
Welcome to Hitchhikers! 👋
To learn more about the platform we encourage you to get started by completing the Hitchhikers Program Track and earning your first badge!
Start Here
Close notification
Introduction to CSS
Arrow Back
Unit 1
What is CSS?
completed
Unit 2
Inspecting Live CSS
completed
Unit 3
Variables, Common CSS Rules and Intro to SASS
completed
Unit 4
CSS Units of Measurement - Absolute vs. Relative
completed
assessment assessment
Module Assessment
completed completed
home

Inspecting Live CSS | Yext Hitchhikers Platform

What You’ll Learn

In this section, you will learn:

  • How to view the CSS of live webpages
  • How to understand the CSS in Page Builder modules

Inspecting CSS

You can see the HTML and CSS of any webpage by using Inspector Tools in your browser (we recommend Chrome).

In Chrome, you can do one of the following to open Developer Tools:

  • Right click any element on the page & select ‘Inspect’
  • In the Chrome menu, select View > Developer > Developer Tools
  • Command+Option+I (Mac) or Control+Shift+I (PC)

The CSS will show under the Styles section.

Looking at just the Text Block with Buttons Module on our Restaurant Page Builder page, here’s the CSS styling the button that we can derive from inspecting.

HTML

<a class=" btn primary-cta btn-primary btn-lg lp-param lp-param-cta1ButtonUrl lp-param-cta1ButtonText" href="#" role="button " onclick="Yext.analyticsEvent('calltoactionclick')">
    Order Now
</a>

CSS

.btn-lg, .btn-group-lg > .btn {
    padding: 0.5rem 1rem;
    font-size: 1.17188rem;
    line-height: 1.5;
    border-radius: 0;
}

.btn-primary {
    color: #fff;
    background-color: #c81500;
    border-color: #c81500;
}

.btn {
    display: inline-block;
    font-weight: 400;
    font-family: "Segoe UI", "Source Sans Pro", Calibri, Candara, Arial, sans-serif;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

a {
    text-decoration: none;
}
unit Quiz
+20 points
Daily Quiz Streak Daily Quiz Streak: 0
Quiz Accuracy Streak Quiz Accuracy Streak: 0
    Error Success Question 1 of 2

    What does Chrome Developer Tools allow you to do?

    Error Success Question 2 of 2

    Inspect the footer of this current module. Which of the following are rules defined for the class .hh-footer-container?

    A Hitchhiker in the making! 🔥

    You've already completed this quiz, so you can't earn more points.You completed this quiz in 1 attempt and earned 0 points! Feel free to review your answers and move on when you're ready.
1st attempt
0 incorrect
<% elem.innerText %>