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: 0
Quiz Accuracy Streak: 0
Question 1 of 2
What does Chrome Developer Tools allow you to do?
Question 2 of 2
Inspect the footer of this current module. Which of the following are rules defined for the class .hh-footer-container?
Wahoo - you did it! 🙌
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
Sign up for Hitchhikers to start earning points!
If you're already a Hitchhiker, log in to access this content.
Feedback
<% elem.innerText %>