2. What is CSS?
PLONE CONFERENCE 2011
* Cascading Style Sheets
* Controls colors, fonts, sizes, positioning, etc
3. What is CSS?
PLONE CONFERENCE 2011
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
4. How to insert CSS
PLONE CONFERENCE 2011
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;”>
7. Selector Specificity
PLONE CONFERENCE 2011
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
8. A Matter of !Importance
PLONE CONFERENCE 2011
h1 { color: #ff0000 !important; }
will override
.section-news #content h1 { color: #333333; }
even though the second is more specific.
Use !important sparingly!
9. Pseudo Selectors
PLONE CONFERENCE 2011
Most popularly used on anchors for applying
styles to their different states:
a:hover
a:active
a:visited
flickr/Plbmak
12. Block vs Inline
PLONE CONFERENCE 2011
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
13. Display Options
PLONE CONFERENCE 2011
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
14. Display Options
PLONE CONFERENCE 2011
* 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!
15. Box Model
PLONE CONFERENCE 2011
flickr/cmdshiftdesign
17. Floats & Clears
PLONE CONFERENCE 2011
img { float: right; }
Floats will push an element to one side and allow
content to wrap around it
18. Floats & Clears
PLONE CONFERENCE 2011
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
19. Floats & Clears
PLONE CONFERENCE 2011
With a clear: both; at the
end of the purple div.
overflow: auto; would also
do this
With a clear before the
next paragraph
22. Positioning
PLONE CONFERENCE 2011
* 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
25. Multiple Backgrounds
PLONE CONFERENCE 2011
.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
26. Rounded Corners
PLONE CONFERENCE 2011
.box {
border: 1px solid #ffffff;
border-radius: 0 30px 30px 30px;
}
* clockwise from top left
* can make circles
28. Browser Stats
PLONE CONFERENCE 2011
X CSS3
~ CSS3
X CSS3
X CSS3
29. Firebug
PLONE CONFERENCE 2011
* 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.
30. Firebug Inspector
PLONE CONFERENCE 2011
* 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
31. Firebug Inspector
PLONE CONFERENCE 2011
With an element highlighted in the HTML tab,
you can see the styles applied to it.
32. Firebug Styles
PLONE CONFERENCE 2011
The style tab shows how the styles are cascading
in descending order
33. Firebug Styles
PLONE CONFERENCE 2011
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
34. Firebug Styles
PLONE CONFERENCE 2011
The Layout tab shows box model styles. Values
can be adjusted here, and will only apply to the
selected element.
35. Firebug Styles
PLONE CONFERENCE 2011
To disable a style, hover over it, then click the
icon that will appear to the left
36. Add-ons For Your Add-on
PLONE CONFERENCE 2011
Firebug Extensions:
* Pixel Perfect
* FireDiff
Other Firefox Extensions:
* MeasureIt
* ColorZilla
* Web Developer Toolkit
