This document provides an introduction to CSS (Cascading Style Sheets) for beginners. It discusses what CSS is, its role in styling websites, and some basic CSS concepts. CSS is the language used to set general styling rules that apply HTML tags throughout a website to keep styles consistent. The document also lists some common tasks that can be accomplished with CSS, such as changing colors, text styles, spacing, and adding background images. It provides an overview of using the Firebug inspector and CSS editors to test and add CSS rules to a website developed with WordPress.

1. UNLEASH YOUR DESIGN
POTENTIAL WITH CSS FOR
BEGINNERS
By Michael Earley - ATL Squared Web Design

2. 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
implement

3. Languages of WordPress
There are 3 Primary coding languages
used with WordPress: HTML, PHP &
CSS.
¨ PHP – Functionality
¨ HTML – Structure for Content
¨ CSS – Style

4. Some CSS Basics

5. Some CSS Basics (continued)

6. 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

7. 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
best practice.
¨ *Make sure to always backup files before editing them.

8. 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

9. CSS Inspectors, Editors & FTP Clients
For Mac
¨ Firebug
¨ Chrome Inspector
For Windows
¨ Firebug
¨ Chrome Inspector
For Mac
¨ Text Edit
¨ Text Wrangler
For Windows
¨ Top Style 5
¨ Rapid CSS
CSS Inspectors CSS Editors
For Mac
¨ Filezilla
¨ Cyberduck
For Windows
¨ Filezilla
¨ Cyberduck
FTP Clients

10. Additional CSS Tips & Tricks
¨ !important declaration
(Do Not Overuse)
¨ /* Write Notes in Your CSS */

11. QUESTIONS?