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”>

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

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

Embedded:

Inline:


Syntax

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


Selectors

Tags:h1, p, span, div

#visual-portal-wrapper, #portal-logo

.section-news, .visualClear

IDs:

Classes:


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


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


Pseudo Selectors

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

a:hovera:activea: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

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;


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


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


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

X CSS3~ 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.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


Check out

sixfeetup.com/demos

making css and firebug your new friends

Economy & Finance

css plone conference

firebug plone conference

opacity plone conference

positioning plone conference

px solid

positioningplone conference

floats clearsplone conference

box modelplone conference