►
Description
Debbie Pattis and Jeremy Brown show how we can make our reports, charts, tables and graphs look better through the use of HTML and CSS.
Producing reports is a regular task for most IT professionals. We're excellent at producing the data we need via automation, but we're terrible at making those reports look nice. Debbie Pattis is here to help solve that problem!
For many IT pros, CSS is a nasty word, But Debbie is here to show us some CSS basics and how those basics can quickly produce stylized code that makes an impact.
Debbie is a webmaster and spends her day knee-deep in HTML, CSS and WordPress. She is joined by by RTPSUG leader Jeremy Brown, who will take her CSS tips and turn it into some PowerShell magic.
A
B
A
C
Yeah,
so
I've
been
working
as
a
web
developer
for
about
five
years
now
I
got
my
degree
in
graphic
communications
and
all
my
professors,
you
know
thought
it
was
really
important
to
learn
how
to
do
some
front-end
stuff,
html
css
basic
things
like
that.
So
that's
how
I
got
my
start
and
I've
basically
been
working
on
like
wordpress
sites
and
building
out
the
front
end
for
those.
Since
then,.
C
D
E
Right
so
so
so
debbie,
I
I
wanted
to
ask
you
as
a
as
a
site
admin
for
wordpress.
You
know
where
a
lot
of
people
think
that
wordpress
is.
You
know
you
install
a
theme
and
you're
good
to
go,
but
I
would
assume
you
still
are
doing
a
lot
of
back
end
individual
hand
coding
of
stuff
to
make
things
appear
as
you
as
you
wish.
C
A
C
D
Okay,
yeah
so,
like
I
said
so,
I
have
a
storage
account
inside
the
resource
group
and
a
storage
account
is
responsible
for
providing
access
to
storage
backend
inside
the
cloud.
So
in
this
one
storage
account
we
would
have
table
storage.
Ship
file
shares
blob
storage.
All
these
different
things
and
one
of
the
options
that
exists
on
any
storage
account
inside
azure
is
the
static
website.
D
D
A
little
yeah,
absolutely
thanks!
So
what
we
did
is
we
tied
this
static
website
into
a
github
repo
so
that
we
have
this
repo
here?
That
has
the
index
and
the
404
and
then
some
other
stuff,
and
I
added
in
so
a
little
primer,
for
you
should
definitely
come
see
what
chrissy's
gonna
say,
but
we've
built
a
little
bit
of
ci
cd
into
this
here.
So
I
have
a
yaml
file.
That's
going
to
take
whatever's
in
the
root
of
this
repo
and
anytime
a
commit
is
made
to
this
repo.
D
It
will
push
that
automatically
into
the
blob
storage
for
that
static
website.
So
as
debbie's
doing
things
and
making
changes
you
can
see
here,
it
just
runs
that
yaml
each
time
and
then
publishes
that
to
the
static
website
and
that
static
website's
going
to
live.
If
we
head
to
storage
explorer,
whenever
you
make
a
static
website,
azure
automatically
creates
a
unique
blob
container
and
it's
dollar
web.
D
So
dollar
web
is
hard
coded
as
the
static
website's
web
root,
and
so
all
the
files
that
exist
in
that
repo,
I'm
loading
directly
into
this
dollar
web
blob
container.
We
can
see
all
of
those
showing
up
right
inside
of
here,
and
this
is
how
we're
going
to
load
and
present
the
web
webpage.
So
if
anybody
wants
to
play
along
on
your
own
computer,
if
you
take
this
web
address
right
here
and
I'll
toss,
that
into
chat.
D
Load
it
up
in
your
own
browser
you'll,
be
able
to
refresh
as
debbie's
making
changes
and
see
those
show
up
in
your
own
browser.
So
that's
kind
of
how
the
environment's
configured
for
what?
What
debbie's
about
to
show
us
so
debbie's,
going
to
start
editing
a
bunch
of
html
on
css
and
it's
all
going
to
load
off
of
this
index.html
and
provide
us
some
useful
information.
E
D
E
C
C
So
this
is
what
my
webpage
looks
like
right
now.
This
is
kind
of
like
the
default
everything's
going
to
default
to
text
align
left
and
this
sans
serif
type
font.
You
can
see
that
there's
some
spacing
here
already
so
and
I'll
kind
of
show
you
so
my
process
too.
You
can
do
this
in
every
browser
like
right,
click,
right
click
and
inspect
and
you'll
see
the
same
things
over
here.
This
is
really
useful,
especially
just
to
see
like
what's
going
on.
If
I
hover
over
this,
you
can
see
the
orange
in
the
screen.
C
C
C
Padding
actually
yeah.
So
when
I
do
that,
I'm
not
going
to
push
this.
Yet
I'm
just
going
to
show
you
on
my
like
this
is
running
from
my
computer,
so
it
moves
to
the
center
and
I
don't
want
to
have
to
do
that
for
like
every
single
element
on
the
page
like
I
don't
want
to
have
to
go
in
and
say
h1p
any
other
h
tags
I
have
so.
Instead
I
can
assign
a
class
which
I
have
to
this
div
and
the
h1
and
the
p
are
inside
of
the
div.
C
B
C
That's
pretty
much
the
basics
of
css
right
there.
It
gets
a
lot
more
complicated
after
that.
I
think
what
most
people
struggle
with
is
remembering
these
css
properties
and
I'll
give
you
guys
a
tip
a
lot
of
times.
If
you
start,
if
you
go
into
your
like
browser
and
you
start
typing
like
padding,
it'll
come
up
already
and
then
you
can
kind
of
add
things
in
there
and
you
can
see
how
that
changes
it.
So
you
can
see
that
the
padding
is
green
here.
A
C
Right
yeah,
so,
if
you
change
anything
in
here,
it'll
go
back
to
the
way
it
was
before,
which
is
a
really
nice
tool.
If
you're
just
kind
of
messing
around
with
things
and
there's
different
things,
you
can
find
like
code
pen.
That
will
do
things
like
that
too.
So
you
don't
have
to
keep
refreshing
and
going
back
and
forth
between
your
files
and
all
of
that.
B
This
is
why
you
don't
necessarily
want
to
do
client
side
security
or
do
that
kind
of
stuff
at
the
client,
because
someone
can
just
f12
into
the
dev
tools
and
strip
out
whatever
security
that
you
have
in
place
or
modify
it
and
then
the
browser
will
then
do
whatever
it.
You
told
it
to
do
seen
an
instance
where
someone
put
a
captcha
in
a
client-side
tag
and
the
bad
guys
took
the
captcha
out,
and
then
they
could
just
spam.
The.
B
E
E
Okay,
so
you
don't
have
to
we'd
be
happy
to
do
that,
but
I
just
wanted
to
let
you
know
so.
There
was
a
question
about
classes
threaded
and
I
think
that
was
meant
when
you're
doing
the
style
and
you
were
set
in
the
class
there.
Could
you
make
like
a
subclass?
I
guess
that's
what
you
were
asking
stephen.
A
C
C
A
C
C
Okay,
I'll
just
say,
the
reason
I
don't
use
id
is
because
I'll
use
it
for
different
things.
So
if
I'm
doing
a
href
to
a
different
section
on
the
page,
I'll
use
id
for
that
or
if
I'm
creating
yeah
and
generally,
there
will
be
a
little
javascript
associated
with
that.
So
I
don't
want
to
have
like
a
bunch
of
ids
on
a
page.
E
C
C
C
And
yeah
container
is
very
common
to
see
in
bootstrap
as
well.
I
saw
somebody
ask
my
question:
okay,
so
just
kind
of
going
over
some
basics
of
css
here
it
is
css-
does
stand
for
cascading
style
sheet.
So,
as
you
go
down
in
the
style
sheet,
the
things
that
come
later
are
going
to
be
more
important
and
specificity
is
really
important
in
css.
If
you
have
say
I
had
container
h,
wow
spelled
that
wrong
container
h1
and
I
put.
C
So
if
I
set
the
color
to
white
it'll
be
white,
you
won't
see
it,
but
if
this
class
exists
lower
on
the
page
and
it's
more
specific,
it's
going
to
overwrite
the
previous
class,
so
sometimes
there'll
be
issues
with
that
like
if
you're
having
issues
with
your
style
sheet.
Sometimes
it's
because
something
is
more
specific
or
it's
lower
in
the
southeast.
A
C
Those
are
just
some
basics
to
get
us
started
and
then
I
think
something
we
really
want
to
talk
about
was
kind
of
how
we
can
make
tables
prettier.
So
I've
got
a
table
here.
It's
currently
I've.
This
is
an
inline
style
and
it's
set
to
display
none.
So
it's
not
appearing,
but
if
I
delete
that
then
it'll
revert
to
the
default,
which
is
display,
block
and
you'll,
see
that
now
on
the
page.
C
B
C
B
C
C
Yeah
so
after
you
write
a
css
file,
you
can
basically
use
it
on
whichever
page
you
want.
Okay
and
if
you
just
add
it
in
the
head
here,
you're
gonna
have
to
like
copy
paste
that
and
put
that
on
every
page
you
have.
But
if
you
link
it
like
this,
you
can
just
add
this
link
here
and
then
you
only
have
to
edit
your
css
in
one
place.
C
A
C
A
B
C
B
C
A
C
C
C
E
So
I'm
getting
the
impression
that
you're
very
hands-on,
which
is
probably
the
same
way
that
most
of
us
work,
which
is
we
we
may
know
how
this
stuff
works,
but
you're
actually
doing
it
and
making
sure
it
works
exactly
as
you
want
and
then
when
it
works.
The
way
you
want,
you
commit
it
to
the
code
that
you
so
that
it
you
know
that
it's
going
to
do
it
it's
going
to
act
in
a
way
that
you
expect
that's
right
so,
and
I
was
just.
E
C
B
C
So
you
can
see
the
few
changes
I've
made
have
drastically
changed
how
this
looks
kind
of
now.
We
have
every
other
row
with
a
background
color.
So
it's
a
little
easier
to
read
and
more
spacing.
That
looks
like
it's
probably
a
little
bit
too
much
spacing
so
that's
something
you
can
kind
of
play
with
with
the
padding
you
can
do
padding.
C
A
E
C
E
C
D
So
right
here,
michael,
if
you
look
like
you,
can
see
td
p
tr
so
in
html,
it's
building
the
table
here
by
saying,
there's
a
table
and
then
there's
a
table
row
and
in
that
table
row
there's
table
data
and
in
that
table,
in
that
one
column,
there's
the
p
for
the
paragraph
and
then
it
closes.
The
data
closes
the
row
and
moves
on
to
the
like
so
she's,
using
these
tags
to
define
what
the
css
is
applied
to.
E
Okay,
so
so
that,
thank
you
I
understand
that.
So
this
is
a
non-debit
question,
because
she's
not
super
vs
code.
Aware
does
anybody
know
if,
like
any
of
this
html,
is
the
snippet
available
to
build
that
like
on
the
fly
rather
than
having
to
because
that
you
know
that's
a
lot
of
code
to
write
anybody
aware
of
a
snippet
in
vs
code
to
make
that
table,
and
then
you
fill
in
the
data
later.
E
D
C
C
C
B
C
Yeah
so-
and
I
have
a
css
file
set
up
that
will
that
has
these
table
signs
in
it,
so
another
student
element
we
can
use
in
non-emails
would
be
the
hover
element.
So
if
we
want
to
be
able
to
hover
over
part
of
the
table
and
have
the
row
highlighted,
you
can
do
the
pseudo-element
hover
and
then
add
a
different
background.
Color
to
that,
and
then,
when
you
go
and
hover
over
the
whole
row
will
change
color,
which
is
really
nice.
B
E
B
E
C
C
C
C
C
C
C
B
E
So
you
had
mentioned
earlier
when
we
were
talking
about
the
nth
child
and
we
talked
about
integers
and
you
give
the
reference
of
the
thirds,
and
you
had
gone
on
to
say
that
that's
not
really
supported
outside
of
like
web,
like
for
email
stuff,
like
that,
I
would
assume
some
of
this
stuff
probably
isn't
well
supported
inside
of
email
or
anything
like
that.
As.
C
C
E
D
E
D
C
B
Oh,
it
totally
makes
sense
just
like
when
ems
first
started
coming
out,
it
was
difficult
to
okay,
the
application
of
it
seems
easy
conceptually,
but
the
implementation
of
it
seems
quite
difficult
because
now
you're
basing
everything
relative
off
the
size
of
another
thing
right,
you
use
ems
more
or
do
you
find
you
stay
with?
You
know,
point
and
font
size
in
pixels.
C
C
C
B
C
Yeah,
it's
generally
better
just
to
keep
your
text
the
same
size.
Usually
that
would
be
used
for
if
you
have
a
hero
section
that
has
really
large
text.
So
when
you
go
down
to
a
mobile
screen,
you
need
to
make
the
text
smaller
and
sometimes
people
have.
They
call
them
break
points
when
you
change
the
css
for
different
screen
widths,
so
they'll
set
multiple
break
points
and
then
change
that,
like
base
size
at
each
break
point.
B
And
it's
not
just
it's
not
just
the
the
font
size,
you
can.
You
can
move
elements,
you
can
move
elements
around
and
hide
elem
and
hide
elements
or
show
elements
based
upon
your
available
real
estate
at
you
know,
screen
lap,
you
know
laptop
size
or
tablet
size
or
or
smartphone
size.
So
you
you've
got
a
lot
of
power
based
upon
your
available
real
estate.
C
You
really
do
I
use
the
the
media
query
all
the
time
when
I'm
doing
responsive
website
and
you
don't
have
to
rewrite
anything
whatever
you
write
here
because
of
the
nature
of
the
cascading
style
sheet,
it
will
overwrite
whatever
is
above
it.
So
you
should
always
put
your
media
tags
at
the
end
of
your
style
sheet
and
you
don't
have
to
repeat
anything
in
them.
You
will
just
overwrite
whatever
you
wrote
before.
C
B
A
B
C
Not
too
long,
I
think,
six
months
on
the
job.
Well,
it
was.
It
was
pretty
quick.
I
started
to
explore
css
animations
in
like
my
first
year
of
working,
so
I
think
not
too
long
have
hope.
It's.
Okay,
the
hardest
part
is
just
remembering
all
the
properties,
but
if
you
do
use
like
writing,
some
code
inside
the
like
developer
console
is
really
helpful
for
me.
C
B
C
B
B
C
C
So
flexbox
is
basically
the
best
thing
ever.
I
think
they
have
a
new
css
property
called
grid,
but
it
doesn't
have
the
same
compatibility
across
all
the
browsers
that
flexbox
does
there's
a
website.
You
can
look
at
called.
Can
I
use
for
css
properties
and
it
will
show
you
the
whole
range
of
compatibility,
so
grid
has
pretty
decent
compatibility
now.
C
C
C
C
A
So,
all
about
some
other
stuff
and
and
knowing
that
you
kind
of
talked
about
reflex
stuff
like
that,
but
the
idea
that
I
know
that
there's
some
some
magic
black
magic
with
mobile
devices-
and
you
know
so
so
that
kind
of
fun
stuff
like
hey
this
table,
looks
crappy
because
it's
on
a
mobile
device.
But
if
it's
not
on
the
phone,
it's
different
there,
any
like
tips
and
tricks.
There.
B
B
B
A
B
Know
if
there's
anything
these
days,
but
it
used
to
be
when
you
had
firefox
and
older,
like
chrome,
coming
out
and
then
different,
like
eight
different
browser
types,
you
had
to
kind
of
detect
what
was
going
to
work
on
what
browser
so
the
best
way
to
do.
That
was
just
to
query.
What
are
you
using
and
then
try
and
do.
B
C
D
D
E
E
I
totally
understand
that,
but
I
can
develop
a
style
that
I
like
for
my
tables
and
for
my
html
for
the
body
of
an
email
and
then
I
can
just
sort
of
save
that
as
a
template
and
just
throw
that
in
as
as
inline
style
and
then
I'm
kind
of
good
to
go.
So
I
never
really
thought
of
it.
That
way.
That's
that's
a
good
takeaway
for
me.
A
So
yeah,
in
that
same
thing
with
with
mike,
I
gotta,
go
back
and
look
at
some
of
the
code
that
I've
written
before,
but
this
whole
stuff
here
I
can
just
copy
that
and
put
it
inside
this
like
jeremy
right
that
I
can
just
do
that
with
the
you
know,
output
or
convert
to
html
and
put
that
in
the
style
is
that
is
that
how
we
do
it
yeah?
So.
D
B
A
D
B
D
B
D
D
D
A
D
So
the
cool
thing
about
convert
to
html
is
yeah.
You
can
pass
it
a
uri
to
a
style
sheet,
and
so
we
went
ahead
and
created
one
for
tables
and
so
convert
html
will
take
whatever
you
pass
into
it
and
just
build
a
table
right
off
of
it
right
off
the
bat
right
and
so
and
then
there's
some
other
things
that
we
can
do
like
pre-content,
we'll
put
stuff
at
the
front
of
it.
So
list
of
processes
and
post
content
will
drop
whatever
you
put
in
here
at
the
bottom
of
the
table.
D
Food.Html-
and
this
will
build
this-
will
build
a
this-
will
automatically
make
a
web
page
with
all
of
those
styles
that
she
had
in
that
sheet
right
off
the
bat,
and
so
you
can
see
the
top
top
five
processes
is
already
in
the
title.
Whatever
you
want
before
the
table
goes
here,
whatever
you
want
after
the
table
goes
here,
so
powershell
with
a
tiny,
little
style
sheet
and
everybody
is
coming.
You
know
it's
probably
pretty
comfy
with
just
getting
some
information.
D
So
whatever
you
get,
you
can
build
your
own
objects,
do
whatever
you
need
to,
and
what
what
you
would
always
do
to
make
a
report
right
and
then
now
we
just
want
to
be
able
to
put
that
report
in
a
in
an
html
file
to
send
away
to
somebody
else
so
that
they
can
go
read
that
data.
You
can
turn
that
into
something
very
consumable
to
any
other
end
user
after
you
do
your
normal
processing
by
just
sending
it
to
convert
html
and
then
using
a
publicly
available
uri.
D
So
again,
as
you're
super
cheap
go
make
you
a
storage
account
and
just
throw
your
style
sheet
in
there
and
then
leave
it.
Be
it'll
cost
you
less
than
a
penny
to
keep
that
there
all
month,
and
then
you
can
just
point
at
it
every
time
you
want
to
point
at
it
and
then
have
every
table.
You
make
look
the
exact
same,
which
is
pretty
slick
right,
so
to
go
to
your
point.
We
it
it
doesn't
necessarily
have
to
be
built
in
line.
D
A
A
B
B
But
not
everybody
has
that,
like
you
want
it
to
be
like
just
a
simple
file,
you
might
stick
on
a
share
and
then,
where
all
your
reports
get
dumped,
yeah
yeah
and
then
that
way,
when
you're
opening
it
up
or
if
you're
sending
it
out.
Because
I've
done
a
lot
of
reports
where
they're,
auto
generated
reports
and
the
email
gets
sent
out.
D
So
debbie,
where
are
some
places
where
we
can
like
do
you
know
any
places
to
learn
css
like
with
I
know
for
us,
like
writing,
powershell
and
stuff.
We
can
do
ironscripter
or
there's
some
stuff
in
code
wars
and
things
like
that.
Are
there
utilities
or
websites
that
are
out
there
that
have
some
good
examples
for
like
for
me,
I'm
pretty
kinesthetic
to
learn
by
doing
or
what
would
you
just
suggest
people
to
look
at
if
they're,
to
get
better
and
sharpen
their
css
skills.
C
Yeah,
so
I
use
codepen
a
lot.
That's
what
I
have
my
css
animation
example
in
and
if
you
go
there,
there's
a
lot
of
different
examples
of
people's
work.
You
can
like
fork,
you
can
take
it
and
then
you
can
change
it
and
edit
it.
How
you
want
to
by
like
copying
it.
So
I've
done
that
a
lot
there's
a
lot
of
different
use
of
resources.
C
C
B
E
So
I
really
like
the
idea
of
building
a
couple
of
templates
and
just
referencing
the
template,
because,
honestly
for
what
I
do,
it's
it's
repetitive
kind
of
action
right.
So
I
don't
think
I
need
to
be
customizing
this
each
time
I
kind
of
have
sort
of
like
well,
that's
kind
of
what
I
wanted
to
look
like.
A
Yeah,
I
think
that's
kind
of
the
golden
for
me
is
that
I
want
to
start
generating
these
emails
and
I've
just
been
copying
generic.
You
know
code
and
just
sticking
it
right
inside
the
script
as
raw,
but
if
I
can
simply
keep
that
as
a
reference
file
and
just
point
at
it
and
then
even
if
I
can
change
the
style
sheet
at
some
other
time,
I
can
just
change
that
one
file
and
all
my
reports
change.
C
B
B
E
All
right,
so
I
think
we're
going
to
be
wrapping
this
up
in
a
few
minutes.
So
there
was
quite
a
bunch
of
questions
about
individual
pieces
to
css
and
html
tricks.
Does
anybody
have
any
further
questions
they
wanted
to
talk
about,
ask
or
go
over
something
that
they
saw
earlier,
that
maybe
didn't
make
sense.
We
have
an
opportunity
here
to
possibly
review
one
of
two
things
so
last
chance.
Remember
if
you
want
to
ask
the
question
just
unmute
yourself,
if
you
want
to
throw
in
the
chat,
please
do
so
now.
C
B
E
C
Okay,
so
I
created
this
menu
and
these
are
div
elements.
The
drop
down
is
an
element,
so
it
might
actually
be
a
unordered
list
or
ul
element,
but
they
work
the
same
as
any
other
element
yeah.
So
this
is
actually
positioned.
Absolute
and
its
closest
relative
parent
is
going
to
be
the
ul
element
that
it
lives
inside
of
so
the
blue
area.
Is
that
item
that
element-
and
this
is
positioned
absolutely
to
that.
C
If
that
sense,
so
right
now,
this
has
a
zero
opacity.
I
said
this
sorry,
okay,
there.
It
is
so
if
I
removed
the
relative
position
from
that
element,
it
would
no
longer
be
relative
to
that.
It's
going
to
be
relative
to
something
higher
up
in
the
dom
tree.
That
has
position
relative,
which
is
probably
going
to
be
this
item
right
here.
C
C
E
C
Exactly
so,
if
this
section,
these
are
two
different
sections
with
the
different
backgrounds.
If
it's
positioned
absolute
in
this
section
and
the
section
gets
really
small,
the
height
will
change.
So
these
images
are
changing
the
height
of
this
to
be
taller,
it's
still
going
to
be
positioned
inside
of
this
div.
B
C
E
But
so
so
to
take
the
inverse
of
that,
it
sounds
like
w
saying
like.
I
have
my
standards,
and
I
know
that
if
it
looks
good
in
these
three
or
four
browsers
in
mobile
and
desktop,
I'm
fine
with
that.
And
if
someone
has
a
display
issue
and
it's
not
within
these
right,
it
may
not
be.
It
may
not
be
preferred,
but
we're
going
to
either
stick
them
to
preferred
browsers
or
say
I'm
kind
of
okay,
because
you're
sort
of
out
of
the
scope
of
what
we
designed
for.
C
E
C
I
will
say
it's
less
of
an
issue
nowadays
back
when
I
first
started
all
the
time
it
was
like
this
doesn't
work
on
internet
explorer,
you,
and
so
that's
part
of
the
reason
I
mentioned
that
can
I
use
chart
there's
a
thing
called
browser
prefixes,
which
you'll
have
to
use
with
certain
css
properties
and
I'll
share
my
screen
again.
That
just
looks
like
adding
like
a
prefix
before
the
styles
so
shoot.
B
B
C
E
C
E
No,
I
think
you
did
honestly.
I
think
you
did
a
fantastic
job
understand
that,
with
the
exception
of
probably
three
or
four
of
us,
most
of
us
are
not
html
css
junkies
and,
as
you
can
tell
from
some
of
my
questions
early
on,
I
mean
you
kind
of
brought
us
through
in
a
very
orderly
fashion
that
was
easy
to
figure
out
and
so
kudos
to.
You
did
a
great
job
with
that.
E
B
E
We're
going
to
wrap
this
up.
Does
anybody
have
any
final
thoughts
or
questions?
Otherwise,
I
think
we're
going
to
call
it
a
wrap
here,
phil,
any
closing
thoughts,
no,
I'm
good,
all
right!
So
all
the
stuff
that
debbie
was
working
on
and
then
jeremy
will
have
those
examples
in
our
github
repo,
we'll
make
it
all
available.
This
will
be
available
on
our
youtube
channel
for
anybody
who
wants
to
go
back
and
view
it
in
a
little
bit
more
detail
and
review
tips
a
little
bit
further.