WordCamp Atlanta 2014 - CSS For Beginners - By Michael Earley of ATL Squared Website DesignPresentation Transcript
UNLEASH YOUR DESIGN
POTENTIAL WITH CSS FOR
By Michael Earley - ATL Squared Web Design
What is CSS?
¨ It’s the language in which you set your general
styling rules for a website.
¨ These rules apply to different HTML Tags throughout
the website so one rule can affect many areas of
the website. This keeps website styles consistent.
¨ Stands for Cascading Style Sheets. The rules at the
bottom take precedence over the rules above them.
¨ Don’t be afraid of CSS. It’s much easier than most
coding languages to understand and therefore
Languages of WordPress
There are 3 Primary coding languages
used with WordPress: HTML, PHP &
¨ PHP – Functionality
¨ HTML – Structure for Content
¨ CSS – Style
Things You Can Do With CSS
Here a sample of a few things that can be
accomplished using CSS:
¨ Change Colors of Backgrounds, Text, Widget Boxes,
Menu Bars Etc.
¨ Change Size, Font, Color of Text
¨ Change Spacing (Margin, Padding, Border)
¨ Add Background Images
¨ Add/Change Mobile Responsive Layouts
Basic CSS modifications in WordPress
¨ For most of you, you will be using CSS to edit your
theme or child themes existing CSS file.
¨ You can easily view/test edits in a Source Editor such as
Firebug (Firefox Add-on)
¨ You’ll want to make the edits in Firefox and copy and
paste them into a CSS file.
¨ You can paste directly into your CSS file through the
appearance>editor screen but if you’re making
extensive changes, using a text editor and FTP is the
¨ *Make sure to always backup files before editing them.
I will now demonstrate how to use Firebug to test
CSS edits and show the different options for
adding the CSS to your .CSS file.
• Finding the Right Selector, Property & Value
• Where to Add The CSS
• style.css through appearance>editor or FTP
• custom css (Jetpack)
• Child themes CSS
• Some other Basic CSS Rules
Using Firebug, Appearance Editor & FTP
CSS Inspectors, Editors & FTP Clients
¨ Chrome Inspector
¨ Chrome Inspector
¨ Text Edit
¨ Text Wrangler
¨ Top Style 5
¨ Rapid CSS
CSS Inspectors CSS Editors
Additional CSS Tips & Tricks
¨ !important declaration
(Do Not Overuse)
¨ /* Write Notes in Your CSS */