Presentation to the Triangle Drupal Users Group (TriDUG) July meeting. This is a brief overview of what CSS selectors are and how they can be used to target CSS at specific parts of Drupal pages. Note: This was done using the Fusion Starter theme in Drupal 7 but is applicable to D6 and other "major" themes. Sorry, the slide animations did not come thru... but only the before and after slide really got effected.

1. An Introduction to CSS
Selectors and Drupal
Understanding CSS selectors and
how Drupal allows you to use
them to style pages is a key
Drupal skill

2. Audience Knowledge Quiz
How many…
…know what CSS stands for
…have “cut & pasted” CSS into sites
…have written their own CSS rules from
scratch
…know what a CSS Selector is
…are experts, just here to heckle

3. Why Should You Know This
Turn this:
Into this…
with CSS

4. CSS Rule Syntax
Example: CSS Syntax:
CSS: <Selector> {
A.menu:hover {
color: #002b70; <property>: <value>;
text-decoration: underline; <property>: <value>;
}
…
HTML: }
<UL>
<LI>
<A class=“menu” href=“foobar.html”>FooBar</A>
</LI>
</UL>

5. What are Selectors
Patterns used to select the parts of a
document to apply the styles to.
The CSS3 spec define these patterns as:
A chain of one or more sequence of simple
selectors separated by combinators
Lets break this down…

6. Sequence of Simple Selectors
The most common simple selector types are:
.<class> select all elements with class=“<class>”
<element> match a specific HTML <element> (A, H2)
#<id> match element with id=<id> attribute
:<pseudo> “pseudo class” selectors like :hover, :visited
These can be combined into sequences to target
specific document element like:
A.menu:hover
H1
#header
Note: There are a lot of other simple selectors, especially with CSS3. See:
http://www.w3.org/TR/css3-selectors/#selectors

7. What are Combinators
Combinators let you combine sequences of
simple selectors (S3) and target very specific
areas of a document.
Combinators are the most important CSS item
to understand with Drupal!
They let you target almost anything on a Drupal
page

8. Combinators
escendant – S3 S3…
Elements that are contained inside another
element. For example, the selector:
IV.menu A:hover
ould define the hover style for any anchor tag
inside a div with class menu, even if there are
other tags between.

9. Combinators
hild – S3 > S3…
Describes elements that have a direct parent
and child relationship:
L.menu > LI.leaf
ould target ONLY <LI class=“leaf”> elements
that were directly under a <UL class=“menu”>
element.
ibling – S3 + S3… or S3 ~ S3

10. Specificity (The Great Gotcha)
Complex CSS selectors will overlap with more
than one rule applying to an element.
Specificity defines how browsers should
calculate the “weight” of rules. The heavier ones
win.
Drupal tends to have LOTS of rules so chances
are your carefully crafted selector may not work.
Here’s how specificity is calculated:
http://www.w3.org/TR/css3-selectors/#specificity

11. Something !Important
One trick to remember if your selector is not
specific enough is the !important property
declaration.
E.g., if these rules point to the same DIV, the text
color will be red (#id is highly specific).
Div#more_specific { color: red; }
Div.less_specific { color: green; }
If you add, !important to the properties, the color
will be green.
Div#more_specific { color: red; }
Div.less_specific { color: green !important; }

12. Drupal Areas
Drupal pages have a wide variety of CSS addressable
“areas” that are created by the system and themes.
•Page info
•Theme regions
•Nodes (Content type/Specific)
•Blocks (General / Specific )
•Menus (General / Specific )
•Views (General / Specific )
•Fields - Views & CCK (General / Specific )
•Form elements (General / Specific )

13. Page Info
The body tag on Drupal pages will have
several useful classes.
Front/Not-Front: Front page or not
Logged-in/not-logged in: User or Anonymous
Node-Type-<node-type>: Class based on Node Type

14. Theme Regions

15. Theme Regions
Page Top: <div id=“page-top” class=“region-page-top….
Header: <div id=“header-group” class=“header-group…
Sidebar First: <div id=“sidebar-first” class=“region-sidebar-first…
Footer: <div id=“footer” class=“region-footer…
Content: <div id=“content” class=“region-content…
Example CSS
#sidebar-first DIV.block {
padding-top: 15px;
}

16. Nodes, Blocks, & Menus

17. Nodes, Blocks, & Menus
Node: <div id=“node-2” class=“node node-page full-node…
Block: <div id=“block-block-2” class=“block…
Menu: <div id=“block-system-main-menu”
class=“block block-system block-menu…
Example CSS
#block-block2 .content {
background-image: url("../images/SkylarkingDef2.gif");
background-repeat: no-repeat;
width: 151px;
height: 308px;;
}

18. Views & View Fields

19. Views & View Fields
View: <div class=“view view-photo-galleries…
Field: <div class=“views-field views-field-title…
Example CSS
.view-photo-galleries .views-field-title {
padding-bottom: 6px;
}
.view-photo-galleries .views-field-title A {
font-size: 18px;
}

20. CCK Fields

21. CCK Fields
Field: <div class=“field field-name-field-quest…
Field Label: <div class=“field-label…
Field Items: <div class=“field-items…
Field Item: <div class=“field-item…
Example CSS
.node-field-example .field DIV.field-label {
padding: 1em 0;
}
.node-field-example .field DIV.items {
padding: 1em 0 2em 1em;
}

22. Form Fields
No examples prepared, but
forms are similar to CCK /
Node fields.

23. Helpful Tools
FireFox with FireBug
Chrome with built in Explore Element

24. Questions?
This has covered a lot of complex
concepts quickly….