Making CSS and Firebug Your New Friends

PLONE CONFERENCE 2011

Making CSS and Firebug
Your New Friends
Chrissy Wainwright

What is CSS?

* Cascading Style Sheets
* Controls colors, fonts, sizes, positioning, etc

What is CSS?

The cascade determines the order in which the
CSS is prioritized.

Factors include:
* order of importation
(Plone CSS Registry)
* specificity of selectors
* !important

flickr/Cayusa

How to insert CSS

External:
<link rel=”stylesheet” type=”text/css”
href=”public.css”>

Embedded:
<style type=”text/css”>
body { background-color: #f1f1f1; }
</style>

Inline:
<p style=”color: #333333;”>

Syntax

h1,
.documentFirstHeading {
color: #333333;
font-size: 24px;
border-bottom: 1px solid #333333;
}

Selectors

Tags:
h1, p, span, div

IDs:
#visual-portal-wrapper, #portal-logo

Classes:
.section-news, .visualClear

Selector Specificity

h1.documentFirstHeading { ... }

- an h1 with the class documentFirstHeading

.section-news #content { ... }
- styles for #content when inside .section-news

#region-content.documentContent { ... }
- an element with both the id region-content
and class documentContent

A Matter of !Importance

h1 { color: #ff0000 !important; }

will override

.section-news #content h1 { color: #333333; }

even though the second is more specific.

Use !important sparingly!

Pseudo Selectors

Most popularly used on anchors for applying
styles to their different states:
a:hover
a:active
a:visited

flickr/Plbmak

Shorthand Properties

background: #fff url(bg.jpg) repeat-x top right;
background-color: #ffffff;
background-image: url(bg.jpg);
background-repeat: repeat-x;
background-position: top right;

border: 1px solid #333333;
border-width: 1px 1px 1px 1px;
border-style: solid;
border-color: #333333;

Shorthand Properties

border-width: 2px 2px 2px 2px;

border-width: 2px;

padding: 5px 10px 5px 10px;

padding: 5px 10px;

margin: 0 10px 20px 10px;

margin: 0 10px 20px;

Block vs Inline

li { display: block; }

Block level elements start on a
new line and fill the space of
their parent. (p, div)

Inline items appear in line with
the text. (span, em, img) flickr/lobo235

Display Options

one
block two
three
four

inline one two three four

one
two < for bullet display on li
list-item three
four

none < similar to visibility: hidden,
but doesn’t leave a space

Display Options

* Block items should not be put inside inline items

* Inline items can be made “block” for applying
width and height

* Also, there is inline-block!

Box Model

flickr/cmdshiftdesign

Box Model

Floats & Clears

img { float: right; }

Floats will push an element to one side and allow
content to wrap around it

Floats & Clears

1. Containers don’t expand
for the floating content

2. You may not want the
next element to wrap
around the float.

You can use Plone’s .visualClear on a div, or :after

Floats & Clears

With a clear: both; at the
end of the purple div.
overflow: auto; would also
do this

With a clear before the
next paragraph

Positioning

#container {
width: 350px;
position: relative;
}
#container div {
float: left;
width: 100px;
height: 100px;
border: 1px solid #000000;
margin: 0 10px 10px 0;
position: static;
}

Positioning

.box5 {
position: relative;
top: 30px;
left: 30px;
}

.box5 {
position: absolute;
top: 30px;
left: 30px;
}

Positioning

* space is removed
* positioned within parent that
has position: relative;
(body, if none)
* position: fixed is similar, but
will stay in place when scrolling
* z-index can be applied for determining
top to bottom order

New CSS3 Properties

* Opacity, RGB alpha
* Multiple backgrounds
* Rounded corners
* Shadows
* + more

flickr/cdw9

Colors, Opacity

.box1 {
background-color: #123456;
}
.box2 {
background-color: rgb(18,52,86);
opacity: 0.7;
}
.box3 {
background-color: rgba(18,52,86,0.7);
}

Multiple Backgrounds

.box {
background:
url(‘base.jpg’) repeat-x bottom left,
url(‘top.jpg’) repeat-x top left,
url(‘middle.jpg’) repeat-y top center;
}

* separate with comma
* order from front to back
* only last can have a background color

Rounded Corners

.box {
border: 1px solid #ffffff;
border-radius: 0 30px 30px 30px;
}

* clockwise from top left
* can make circles

Shadows

h1 {
text-shadow: 3px 3px #ff0000;
}
.box {
box-shadow: 5px 5px 10px 10px #333333;
}

inset/outset, x, y,
blur, spread, color

Browser Stats

X CSS3

~ CSS3
X CSS3

X CSS3

Firebug

* Firefox web development tool
* Live Source Code (with JS applied)
* Styles
* Code is editable on the fly for
display in the browser. Changes
are not saved, and will reset on
refresh.

Firebug Inspector

* Right click an element, select “Inspect Element”
* Or with Firebug open, click the Inspector, then
click an element

This will highlight the element in the HTML tab

Firebug Inspector

With an element highlighted in the HTML tab,
you can see the styles applied to it.

Firebug Styles

The style tab shows how the styles are cascading
in descending order

Firebug Styles

In the Style tab, styles can
be adjusted, and new
properties can be added.
The browser will display
the changes. Values can
be typed or adjusted with
arrow keys

Firebug Styles

The Layout tab shows box model styles. Values
can be adjusted here, and will only apply to the
selected element.

Firebug Styles

To disable a style, hover over it, then click the
icon that will appear to the left

Add-ons For Your Add-on

Firebug Extensions:
* Pixel Perfect
* FireDiff

Other Firefox Extensions:
* MeasureIt
* ColorZilla
* Web Developer Toolkit

Further Reading & Resources

http://procssor.com
http://css-tricks.com/6386-efficiently-rendering-css
http://css-tricks.com/795-all-about-floats/
http://css3.info
http://css3please.com
http://gs.statcounter.com
http://getfirebug.com
http://caniuse.com


eck out
Ch
.com/ demos
six feetup

Making CSS and Firebug Your New Friends

Recommended

Recommended

More Related Content

Similar to Making CSS and Firebug Your New Friends

Similar to Making CSS and Firebug Your New Friends (20)

More from cdw9

More from cdw9 (11)

Recently uploaded

Recently uploaded (20)

Making CSS and Firebug Your New Friends