making css and firebug your new friends

PLONE CONFERENCE 2011

Making CSS and Firebug Your New Friends

Chrissy Wainwright

PLONE CONFERENCE 2011

What is CSS?

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

PLONE CONFERENCE 2011

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

PLONE CONFERENCE 2011

How to insert CSS

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

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

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

Embedded:

Inline:

PLONE CONFERENCE 2011

Syntax

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

PLONE CONFERENCE 2011

Selectors

Tags:h1, p, span, div

#visual-portal-wrapper, #portal-logo

.section-news, .visualClear

IDs:

Classes:

PLONE CONFERENCE 2011

Selector Specificity

- an h1 with the class documentFirstHeading

h1.documentFirstHeading { ... }

.section-news #content { ... }

#region-content.documentContent { ... }

- styles for #content when inside .section-news

- an element with both the id region-content and class documentContent

PLONE CONFERENCE 2011

A Matter of !Importance

will override

even though the second is more specific.

Use !important sparingly!

h1 { color: #ff0000 !important; }

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

PLONE CONFERENCE 2011

Pseudo Selectors

Most popularly used on anchors for applying styles to their different states:

a:hovera:activea:visited

flickr/Plbmak

PLONE CONFERENCE 2011

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;

PLONE CONFERENCE 2011

Shorthand Properties

margin: 0 10px 20px 10px;

margin: 0 10px 20px;

padding: 5px 10px 5px 10px;

padding: 5px 10px;

border-width: 2px;

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

PLONE CONFERENCE 2011

Block vs Inline

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)

li { display: block; }

flickr/lobo235

PLONE CONFERENCE 2011

Display Options

block

inline

list-item

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

< for bullet display on li

onetwothreefour

one two three four

onetwothreefour

PLONE CONFERENCE 2011

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!

PLONE CONFERENCE 2011

Box Model

flickr/cmdshiftdesign

PLONE CONFERENCE 2011

Box Model

PLONE CONFERENCE 2011

Floats & Clears

img { float: right; }

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

PLONE CONFERENCE 2011

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

PLONE CONFERENCE 2011

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

PLONE CONFERENCE 2011

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;}

PLONE CONFERENCE 2011

Positioning

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

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

PLONE CONFERENCE 2011

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

PLONE CONFERENCE 2011

New CSS3 Properties

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

flickr/cdw9

PLONE CONFERENCE 2011

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);}

PLONE CONFERENCE 2011

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

PLONE CONFERENCE 2011

Rounded Corners

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

* clockwise from top left* can make circles

PLONE CONFERENCE 2011

Shadows

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

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

PLONE CONFERENCE 2011

Browser Stats

X CSS3

X CSS3~ CSS3

X CSS3

PLONE CONFERENCE 2011

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.

PLONE CONFERENCE 2011

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

PLONE CONFERENCE 2011

Firebug Inspector

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

PLONE CONFERENCE 2011

Firebug Styles

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

PLONE CONFERENCE 2011

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

PLONE CONFERENCE 2011

Firebug Styles

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

PLONE CONFERENCE 2011

Firebug Styles

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

PLONE CONFERENCE 2011

Add-ons For Your Add-on

Firebug Extensions: * Pixel Perfect * FireDiff

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

PLONE CONFERENCE 2011

Further Reading & Resources

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

PLONE CONFERENCE 2011

Check out

sixfeetup.com/demos