• Like
WordCamp Atlanta 2014 - CSS For Beginners - By Michael Earley of ATL Squared Website Design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

WordCamp Atlanta 2014 - CSS For Beginners - By Michael Earley of ATL Squared Website Design

  • 306 views
Published

http://www.atlsquared.com

http://www.atlsquared.com

Published in Design , Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
306
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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?