�ݺ�ߣ

Introduction to
CSS for
Product Managers
Rodhmir Labadie
April 20, 2017

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

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>

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

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

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

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 */
}

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>

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

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

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

Interacting with the DOM
(Document Object Model)

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

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

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

�ݺ�ߣ

Introduction to css for product managers

Recommended

More Related Content

What's hot (18)

Similar to Introduction to css for product managers (20)

Recently uploaded (20)

Introduction to css for product managers