Steve Barman - CSS and WordPress
2 likes740 views
The document discusses the basics of CSS for beginners, explaining that CSS allows styling of website content with minimal code and enables full customization of a site's appearance without risk of breaking pages. It provides an overview of the key components of a WordPress site, recommends tools for working with CSS like text editors and browsers, and gives examples of CSS syntax and how specificity determines which styles take precedence.
Steve Barman - CSS and WordPress
- 1. CSS YES! (Even for beginners) {CSS}
- 2. ● Wordpress sites consist of several parts ● The Content! – 1. HTML – HyperText Markup Language – 2. PHP – PHP Hypertext Processor (AKA: Personal Home Page) ● The Presentation! – 3. CSS – Cascading Style Sheets (and some behavior) – 4. JavaScript, jQuery, Ajax etc
- 3. What's so great about it? ● CSS lets you style a lot of content with very little work. ● You can make your website look exactly how you want it. ● You cannot “break” anything! ● Unlike PHP, you can't make your page explode ● You won't lose content by CSS errors ● You can only make it look like geocities
- 4. Right tools for the job ● A text editor (Sublime Text 2, Notepad ++) ● DO NOT USE MS WORD! ● A modern browser Chrome or Firefox (with Firebug) ● DO NOT USE INTERNET EXPLORER (ever!). ● Highly recommended: A local install of your website (outside the scope of this course) ● Also “Custom CSS CC” plugin
- 5. Wordpress Fresh Install (with dummy content)
- 6. Wordpress Naked (without CSS)
- 7. HTML Mark up
- 8. How markup works ● <div class=”main”> ● <h1 class=”cssyes_header”>CSS YES!</h1> ● <h1 class=”tagline”>YESSSSS</h1> ● <span class=”author”>by Steve</span> ● </div>
- 9. Specificity ● The Golden rule of CSS: The higher the specificity, the more likely the style will go through.
- 10. CSS Syntax H1 { color: red; } H1.tagline { color: blue; }
- 11. Specificity ● The element: p, div, ul, ol, span, ● (0, 0, 1) ● Class: p class=”something” // p.something {} ● (0,1,0) ● ID: div id=”yolo” // div#yolo {}
- 12. Let's do some CSS
- 13. Where else to learn ● Treehouse: http://referrals.trhou.se/stevesux ● Css-tricks.com ● W3schools.com ● nettuts