How to Use CSS3 in WordPress

WordCamp Sacramento 2015

by

Suzette Franck

Who I AmHTML 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

My GoalTeach you at least one thing that you didn’t know before that will change how you work forever

What We Will Cover?

What is CSS/CSS3?

Using CSS in WordPress

CSS Resources

What is CSS/CSS3?

CSS/CSS3 BasicsCascading 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.

Example of CSS Code

Terminology & Basic CSS Syntax

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

CSS Syntax

h1 { color: deeppink; font-size: 18px; font-weight: bold; }

selector { property: value; }

Classes and IDsCSS 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; }

Classes and IDsCSS 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; }

CSS Properties

browse http://www.w3schools.com/cssref/

or google it

CSS Commentsp { color: #FF0000; /* red */ /* This is a single-line comment */ text-align: center; }

/* ——————-This is a xxxxxxxx multi-line xxxxxxxx comment ————- */

CSS SpecificityMore 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/

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?

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?

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?

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?

Inspecting CSS

Inspecting CSS w/Chrome

View > Developer > Developer Toolsor right-mouse click on the page > Inspect Element

Inspecting CSS w/Chrome

New CSS3 Modules

New CSS3 ModulesColors & Transparency

CSS Gradients

Border Radius (Rounded Corners)

Box Shadow & Text Shadow

Transformations and Animations

Web Fonts @font-face

Media Queries (Responsive Design)

CSS3 ColorsCSS2: 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

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

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

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

border-radiushttp://border-radius.com/

Using CSS3 in WordPress

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

Jetpack’s Edit CSS ModuleOnce activated, go to Appearance > Edit CSS

Simple Custom CSSOnce activated, go to Appearance > Custom

Inline CSS in EditorAdd style attribute to opening tag in Text view

<p style=“property: value; property: value;”>

Considered hacky/janky/ bad practice, but works in a fix!

Child Theme’s style.cssChild 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)

Starter Theme’s style.cssStarter Themes include basic theme files

Make your own custom theme from them

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! )

CSS Resources

CSS Resourceshttp://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

CSS3 Code Demo

Q & A

Any Questions?

Thank you for being here!

Suzette Franck Twitter: @suzette_franck

linkedin & speakerdeck & slideshare