The document provides an overview of how to use CSS3 in WordPress. It begins with introductions and then covers CSS/CSS3 basics, terminology, syntax, properties, comments, specificity, and inspecting CSS. It discusses using CSS in WordPress by adding it via themes, plugins, or inline styles. Finally, it highlights new CSS3 modules like colors, gradients, border radius, shadows, and transformations, and provides CSS resources.

1. How to Use CSS3 in
WordPress
WordCamp Sacramento 2015
by
Suzette Franck

2. Who I Am
HTML and CSS teacher for Girl Develop It,
Los Angeles Chapter
Freelancing Front End Developer
Born in Hollywood, Resides in S. California
Over 20 Years Coding & Web Development
Developed Over 300 WordPress Sites
Spoken at 27 WordCamps in US & Canada
Regular Contributor: WPwatercooler.com
Hobbies: Crocheting & Adult Coloring Books
Twitter:
suzette_franck

3. My Goal
Teach you at least one thing that
you didn’t know before that will
change how you work forever

4. What We Will Cover?
What is CSS/CSS3?
Using CSS in WordPress
CSS Resources

5. What is CSS/CSS3?

6. CSS/CSS3 Basics
Cascading Style Sheet language written in plain text
Used with HTML to give style/design to HTML elements
CSS3 is he latest evolution of CSS, which is meant to
extend CSS 2.1, the previous version
CSS3 is backwards compatible with all versions of CSS
In WordPress, CSS code is most often put in a style.css
plain text file in the starter, parent, or child theme
folder in wp-content
Most themes have an “Edit CSS” option, or you can
install a plugin to add your own CSS.

7. Example of CSS Code

8. Terminology &
Basic CSS Syntax

9. CSS Terminology
Syntax refers to the proper format with punctuation for a line of
code
Selectors select the HTML element to be styled and is placed on
the left side of curly braces, which surround the style
declarations
Each declaration includes one property: value(s); pair
Spaces and tabs are ignored in CSS, use often and generously
for easy reading!
p {
background-color: black;
color: red;
font-size: 1.5em;
}

10. CSS Syntax
h1 {
color: deeppink;
font-size: 18px;
font-weight: bold;
}
selector {
property: value;
}

11. Classes and IDs
CSS selectors can be an HTML element, a class, or an ID, or a
combination of these
Classes add a classification name and are indicated in CSS with a
dot before the class name, there can be repeated on same page
HTML looks like:
<h3 class=“special”>This is a heading</h3>
Reference in CSS like:
.special { color: red; }
IDs add an identifying name and each ID can only be used once
per page. IDs are indicated in CSS with a #.
HTML looks like:
<h3 id=“theonlyone”>This is a heading</h3>
Reference in CSS like:
#theonlyone { color: yellow; }

12. Classes and IDs
CSS selectors can be an HTML element, a class, or an ID, or a
combination of these
Classes add a classification name and are indicated in CSS with a
dot before the class name, there can be repeated on same page
HTML looks like:
<h3 class=“special”>This is a heading</h3>
Reference in CSS like:
.special { color: red; }
IDs add an identifying name and each ID can only be used once
per page. IDs are indicated in CSS with a #.
HTML looks like:
<h3 id=“theonlyone”>This is a heading</h3>
Reference in CSS like:
#theonlyone { color: yellow; }

13. CSS Properties
browse
http://www.w3schools.com/cssref/
or
google it

14. CSS Comments
p {
color: #FF0000; /* red */
/* This is a single-line comment */
text-align: center;
}
/* ——————-This is a
xxxxxxxx multi-line xxxxxxxx
comment ————- */

15. CSS Specificity
More specific overrides less specific
IDs override classes
Inline CSS overrides IDs
!important used at the end of a declaration overrides Inline
CSS
Closest rule or declaration beats out remote declarations
http://www.smashingmagazine.com/2007/07/css-
specificity-things-you-should-know/

16. CSS Specificity Quiz
a { color: aqua; }
ul { color: deeppink; }
.warning { color: red; }
#mainNav { color: yellow; }
<ul class=“warning” id=“mainNav”>
<li><a href=“/“>Home</a></li>
</ul>
What color is the “Home” text based on below styles?

17. CSS Specificity Quiz
a { color: aqua; }
ul { color: deeppink; }
.warning { color: red; }
#mainNav { color: yellow; }
<ul class=“warning” id=“mainNav”>
<li><a href=“/“>Home</a></li>
</ul>
What color is the “Home” text based on below styles?

18. CSS Specificity Quiz
a { color: aqua; }
ul { color: deeppink; }
.warning { color: red; }
#mainNav { color: yellow; }
<ul class=“warning” id=“mainNav”>
<li><a href=“/“>Home</a></li>
</ul>
Bonus: what color is the bullet?

19. CSS Specificity Quiz
a { color: aqua; }
ul { color: deeppink; }
.warning { color: red; }
#mainNav { color: yellow; }
<ul class=“warning” id=“mainNav”>
<li><a href=“/“>Home</a></li>
</ul>
Bonus: what color is the bullet?

20. Inspecting CSS

21. Inspecting CSS w/Chrome
View > Developer > Developer Tools
or right-mouse click on the page > Inspect Element

22. Inspecting CSS w/Chrome

23. New CSS3 Modules

24. New CSS3 Modules
Colors & Transparency
CSS Gradients
Border Radius (Rounded Corners)
Box Shadow & Text Shadow
Transformations and Animations
Web Fonts @font-face
Media Queries (Responsive Design)

25. CSS3 Colors
CSS2: 17 Color Names / CSS3: 140 Color Names
http://www.w3schools.com/cssref/css_colornames.asp
New Alpha on Reg-Green-Blue Values
rgba( 255, 0, 0, 0.5 );
Specify Hue, Saturation, Lightness, alone or with Alpha Values
hsla( 120, 100%, 50%, 0.5 );
Opacity Property (0 transparent 1 opaque)
http://www.w3schools.com/cssref/css_colors_legal.asp

26. CSS3 Gradients
.fancy {
background: -webkit-linear-gradient(red, green, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, green, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, green, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, green, blue); /* Standard syntax */
}
http://www.w3schools.com/css/
css3_gradients.asp

27. CSS3 Gradients
http://www.colorzilla.com/gradient-editor/

28. border-radius
Accepts px or %
Don’t forget to add vendor prefixes!
.rounded {
border-top-left-radius: 5px;
border-top-right-radius: 10px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 15px;
}
or use the shorthand:
.rounded {
border-radius: 5px 10px 20px 15px;
}

29. border-radius
http://border-radius.com/

30. Using CSS3 in WordPress

31. Where Do You Put CSS in WordPress?
Installed Theme’s Custom CSS Option
Jetpack’s “Edit CSS” Module (my favorite)
Simple Custom CSS Plugin (if not using Jetpack)
Page/Post editor via Inline Styles
Child Theme’s style.css file
Starter Theme’s style.css file

32. Jetpack’s Edit CSS Module
Once activated, go to Appearance > Edit CSS

33. Simple Custom CSS
Once activated, go to Appearance > Custom

34. Inline CSS in Editor
Add style attribute to opening tag in Text view
<p style=“property: value; property: value;”>
Considered hacky/janky/ bad practice, but works in a fix!

35. Child Theme’s style.css
Child Themes inherit Parent Theme’s functionality
Modifications not overwritten when Parent Theme updates
Best method for extensive modifications
More info on creating Child Themes on the Codex:
https://codex.wordpress.org/Child_Themes
Child Theme Plugins (Orbisius, One-click, Configurator)

36. Starter Theme’s style.css
Starter Themes include basic theme files
Make your own custom theme from them

37. Where Do You Not Put CSS?
Linked to a stylesheet in the header.php (use wp_enqueue)
Using the native WordPress Theme Editor to edit style.css
directly ( No undo or version history! )

38. CSS Resources

39. CSS Resources
http://www.csszengarden.com/
http://www.w3schools.com/css/css3_intro.asp
https://css-tricks.com/+ https://css-tricks.com/almanac
http://girldevelopit.com Take an HTML/CSS class

40. CSS3 Code Demo

41. Q & A
Any Questions?

42. Thank you for being here!
Suzette Franck
Twitter: @suzette_franck
linkedin & speakerdeck & slideshare