Your SlideShare is downloading. ×
0
WordCamp Atlanta 2014 - CSS For Beginners - By Michael Earley of ATL Squared Website Design
WordCamp Atlanta 2014 - CSS For Beginners - By Michael Earley of ATL Squared Website Design
WordCamp Atlanta 2014 - CSS For Beginners - By Michael Earley of ATL Squared Website Design
WordCamp Atlanta 2014 - CSS For Beginners - By Michael Earley of ATL Squared Website Design
WordCamp Atlanta 2014 - CSS For Beginners - By Michael Earley of ATL Squared Website Design
WordCamp Atlanta 2014 - CSS For Beginners - By Michael Earley of ATL Squared Website Design
WordCamp Atlanta 2014 - CSS For Beginners - By Michael Earley of ATL Squared Website Design
WordCamp Atlanta 2014 - CSS For Beginners - By Michael Earley of ATL Squared Website Design
WordCamp Atlanta 2014 - CSS For Beginners - By Michael Earley of ATL Squared Website Design
WordCamp Atlanta 2014 - CSS For Beginners - By Michael Earley of ATL Squared Website Design
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.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

383

Published on

http://www.atlsquared.com

http://www.atlsquared.com

Published in: Design, Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
383
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
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?

×