CSS YES! (Even for beginners)            {CSS}
●   Wordpress sites consist of several                 parts●   The Content!       –   1. HTML – HyperText Markup Language...
Whats so great about it?●   CSS lets you style a lot of content with very little    work.●   You can make your website loo...
Right tools for the job●   A text editor (Sublime Text 2, Notepad ++)    ●   DO NOT USE MS WORD!●   A modern browser Chrom...
Wordpress Fresh Install (with     dummy content)
Wordpress Naked (without CSS)
HTML Mark up
How markup works●   <div class=”main”>●   <h1 class=”cssyes_header”>CSS YES!</h1>●   <h1 class=”tagline”>YESSSSS</h1>●   <...
Specificity●   The Golden rule of CSS: The higher the    specificity, the more likely the style will go    through.
CSS SyntaxH1 {color: red;}H1.tagline {color: blue;}
Specificity●   The element: p, div, ul, ol, span,    ●   (0, 0, 1)●   Class: p class=”something” // p.something {}    ●   ...
Lets do some CSS
Where else to learn●   Treehouse: http://referrals.trhou.se/stevesux●   Css-tricks.com●   W3schools.com●   nettuts
Upcoming SlideShare
Loading in …5
×

Steve Barman - CSS and WordPress

1,044 views
991 views

Published on

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

No Downloads
Views
Total views
1,044
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Steve Barman - CSS and WordPress

  1. 1. CSS YES! (Even for beginners) {CSS}
  2. 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. 3. Whats 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 cant make your page explode ● You wont lose content by CSS errors ● You can only make it look like geocities
  4. 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. 5. Wordpress Fresh Install (with dummy content)
  6. 6. Wordpress Naked (without CSS)
  7. 7. HTML Mark up
  8. 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. 9. Specificity● The Golden rule of CSS: The higher the specificity, the more likely the style will go through.
  10. 10. CSS SyntaxH1 {color: red;}H1.tagline {color: blue;}
  11. 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. 12. Lets do some CSS
  13. 13. Where else to learn● Treehouse: http://referrals.trhou.se/stevesux● Css-tricks.com● W3schools.com● nettuts

×