Rodhmir Labadie, User Experience Lead at OvationTix, provided a general overview of how CSS integrates with web technologies and the use cases for modifying certain elements. He outlined key implementations that can help a product manager test out simple layout adjustments. He also shared a few tools that will be handy to any product manager when sandboxing with CSS. And key ways to use documentation and resources to help product managers continue to grow their CSS knowledge.

1. Intro to CSS with OvationTix’s User
Experience Lead
www.productschool.com

2. FREE INVITE
Join 12,000+ Product Managers on
productschool.com/slack-community

3. Product
Management
2-month part-time Courses

4. Coding
for Managers
2-month part-time Courses

5. Data Analytics
for Managers
2-month part-time Courses

6. Include @productschool and #prodmgmt at the
end of your tweet
Tweet to get a free ticket
for our next Event!

7. Rodhmir Labadie
Tonight’s Speaker

8. Introduction to
CSS for
Product Managers
Rodhmir Labadie
September 7, 2017

9. What is CSS?
CSS is used to style elements on a page that gives
them form.

10. Flavors of CSS
● Externally Linked
● Internal using <style>
● Inline
External
<link rel="stylesheet" type="text/css" href="theme.css">
Internal
<style>
h1 {color: blue;}
p {color: red;}
</style>
Inline
<p style="color: red;">Red text</p>

11. How much CSS do you need
to know in order to
communicate with
the team?

12. HTML Elements (Selectors)
A few basic elements to start
h1 p table, tr, td
div span button
img a ul, li

13. CSS Properties
Handy properties to keep in mind
margin padding border
background color position
height, width display visibility

14. Let’s dive into CSS...

15. Let’s Talk Simple Syntax and how to
write css.
selector {
property: value;
}
div {
height: 100px;
width: 100px;
}
.title {
font-size: 20px;
}
#flag {
margin: 0 0 20px 0; /* Commenting */
}

16. Applying styles to basic elements
.main_box {
border: 1px solid rgba(0,0,0,1);
padding: 20px;
}
h1 {
font-size: 20px;
}
main_box p {
color: blue; /* Words!? */
}
<div class="main_box">
<h1>The Box Title</h1>
<p>A few words about the box and the
title and few other things.</p>
</div>

17. Classes, pseudo classes, IDs...
a {
color: #ccc; /* 3 letters?! */
text-decoration: none;
}
a:hover {
color: #2277dd; /* 6 numbers?! */
text-decoration: underline;
cursor: default;
}
<div class="main_box">
<h1>The Box Title</h1>
<p>A few words about the box and the
title and few other things. </br><a
href="http://www.google.com">Google</a></p>
</div>

18. Classes, pseudo classes, IDs...
#social {
color: #ccc;
text-decoration: none;
}
#social:hover {
color: #33f75b;
text-decoration: underline;
cursor: pointer; /* Do we need this? */
}
<div class="main_box">
<h1>The Box Title</h1>
<p>A few words about the box and the
title and few other things. </br><a
href="http://www.google.com">Google</a>&nbsp;&n
bsp;<a href="http://www.facebook.com"
id="social">Facebook</a></p>
</div>

19. Into the wild...

20. Browser Developer Tools
(today we’re using Google Chrome)

21. Interacting with the DOM
(Document Object Model)

22. Next steps...

23. Reference & Learning
1
www.w3.org www.css-tricks.com www.alistapart.com
2 3

24. Exploring & Experimenting
1
www.stackoverflow.com www.quora.com
2
www.codepen.com
3
jsfiddle.net
4

25. Many ways to apply CSS...
It’s up to you to explore
(Experimenting is where the learning happens!)

26. Questions?

27. Part-time Product Management Courses in
San Francisco, Silicon Valley, Los Angeles
and New York
www.productschool.com