Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS for Community Managers

Avatar for Joshua Rudd Joshua Rudd
June 25, 2012
Programming
2
110

CSS for Community Managers

Part of a presentation at Coding for Community Managers on June 23, 2012. Sponsored by @UserVoice and @twilio.

Avatar for Joshua Rudd

Joshua Rudd

June 25, 2012
Tweet

Other Decks in Programming

See All in Programming
VisionFrameworkで実現する - プライバシーに配慮した「顔ぼかし」機能 / Face blurring with Vision Framework
Avatar for Tomohiro Imaizumi imaizume
0
180
生成AIを活用した初学者向けPython講座
Avatar for Soogie soogie
1
130
iOSDC.pdf
Avatar for ビスター chronos2500
2
640
GraphQL×Railsアプリのデータベース負荷分散 - 月間3,000万人利用サービスを無停止で
Avatar for Koya Masuda koxya
1
940
Back to the Future: Let me tell you about the ACP protocol
Avatar for Benedikt Terhechte terhechte
0
120
ポスターセッション: 「まっすぐ行って、右！」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
Avatar for komo_fr komofr
0
750
複雑化したリポジトリをなんとかした話　pipenvからuvによるモノレポ構成への移行
Avatar for Satoshi Kaneyasu satoshi256kbyte
0
550
階層構造を表現するデータ構造とリファクタリング 〜1年で10倍成長したプロダクトの変化と課題〜
Avatar for yuhi yuhisatoxxx
3
790
Django Ninja による API 開発効率化とリプレースの実践
Avatar for Kashun Yoshida kashewnuts
0
700
ABEMAモバイルアプリが
Kotlin Multiplatformと歩んだ5年 ─ 導入と運用、成功と課題 / iOSDC 2025
Avatar for Akio Yasui akkyie
0
300
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
Avatar for m_t_tion1 kaorumuta
2
390
気づいて！アプリからのSOS 〜App Store Connect APIで始めるパフォーマンス健康診断〜
Avatar for Wakabayashi Rikuma waka12
0
250

Featured

See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
33
2.4k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
600
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
657
61k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
71
11k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
697
190k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
15k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.2k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
237
140k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
30
2.9k
KATA
Avatar for Megan Lloyd mclloyd
32
14k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
4k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
1.6k

Transcript

  1. CSS for Community Managers selector { property: value; }

  2. Hi. I’m @joshuarudd.

  3. Today’s agenda… What is CSS? Including CSS in your HTML

    CSS Anatomy 101 Some demonstrations

  4. What is CSS?

  5. What is CSS? HTML allows you to describe (give semantic

    meaning to) content, CSS allows you to style the presentation of that content.

  6. What is CSS? HTML allows you to describe (give semantic

    meaning to) content, CSS allows you to style the presentation of that content.

  7. What is CSS? HTML allows you to describe (give semantic

    meaning to) content, CSS allows you to style the presentation of that content.

  8. What is CSS? Before CSS, we had to use markup

    for both content and presentation. Now HTML can focus on well-formed content, while CSS lets us present that content in any number of ways.

  9. What is CSS? Before CSS, we had to use markup

    for both content and presentation. Now HTML can focus on well-formed content, while CSS lets us present that content in any number of ways. If you see HTML presentational elements like <font> or <center> (or <table> used for layout), run for the hills!

  10. What is CSS? One promise of CSS is that you

    can keep the same HTML (content) and completely change the presentation of it with different styles. Example: CSS Zen Garden

  11. What is CSS? One promise of CSS is that you

    can keep the same HTML (content) and completely change the presentation of it with different styles. Example: CSS Zen Garden

  12. What is CSS? One promise of CSS is that you

    can keep the same HTML (content) and completely change the presentation of it with different styles. Example: CSS Zen Garden

  13. What is CSS? One promise of CSS is that you

    can keep the same HTML (content) and completely change the presentation of it with different styles. Example: CSS Zen Garden

  14. What is CSS? One promise of CSS is that you

    can keep the same HTML (content) and completely change the presentation of it with different styles. Example: CSS Zen Garden

  15. What is CSS? One promise of CSS is that you

    can keep the same HTML (content) and completely change the presentation of it with different styles. Example: CSS Zen Garden

  16. What is CSS? One promise of CSS is that you

    can keep the same HTML (content) and completely change the presentation of it with different styles. Example: CSS Zen Garden

  17. Including CSS in your HTML

  18. Including CSS in your HTML <p style=“color: red;”> Inline styles

  19. Including CSS in your HTML <p style=“color: red;”> <style> p

    { color: red; } </style> Inline styles Embedded style block

  20. Including CSS in your HTML <p style=“color: red;”> <style> p

    { color: red; } </style> <link rel="stylesheet" href="example.css" type="text/css"> Inline styles Embedded style block External style sheet

  21. Including CSS in your HTML <p style=“color: red;”> <style> p

    { color: red; } </style> <link rel="stylesheet" href="example.css" type="text/css"> HTML CSS Inline styles Embedded style block External style sheet HTML CSS HTML (the CSS is in this le) <body> </body> <head> </head> <head> </head>

  22. Including CSS in your HTML <style> p { color: red;

    } </style> <link rel="stylesheet" href="example.css" type="text/css"> Inline styles Embedded style block External style sheet It’s best to avoid inline styles, but it can be quick and easy for styling one-off things. However, if you’re writing the same inline style in more than one place, you're probably doing it wrong. <p style=“color: red;”>

  23. Including CSS in your HTML <p style=“color: red;”> <link rel="stylesheet"

    href="example.css" type="text/css"> Inline styles Embedded style block External style sheet Very useful for overriding external styles on a single page. <style> p { color: red; } </style>

  24. Including CSS in your HTML <p style=“color: red;”> <style> p

    { color: red; } </style> Inline styles Embedded style block External style sheet Best when applying the same styles across multiple web pages. External stylesheets are cached by the browser (faster loading) and you can change your styles in one le instead of all les that link to it. <link rel="stylesheet" href="example.css" type="text/css">

  25. CSS Anatomy 101 selector { property: value; }

  26. CSS Anatomy 101 CSS is made up of rules Each

    rule has two parts: Selector One or multiple declarations

  27. CSS Anatomy 101 CSS is made up of rules Each

    rule has two parts: Selector One or multiple declarations h1 { color: black; font-weight: bold; }

  28. CSS Anatomy 101 CSS is made up of rules Each

    rule has two parts: Selector One or multiple declarations h1 { color: black; font-weight: bold; }

  29. CSS Anatomy 101 CSS is made up of rules Each

    rule has two parts: Selector One or multiple declarations h1 { color: black; font-weight: bold; }

  30. CSS Anatomy 101 #ID attribute h1 { color: black; font-weight:

    bold; } .class attribute element <div id=“masthead”> <h1 class=“title”> <h1 class=“title”> Common selectors:

  31. CSS Anatomy 101 #ID attribute #masthead { color: black; font-weight:

    bold; } .class attribute element <div id=“masthead”> <h1 class=“title”> <h1 class=“title”> Common selectors:

  32. CSS Anatomy 101 #ID attribute h1 { color: black; font-weight:

    bold; } .class attribute element <div id=“masthead”> <h1 class=“title”> <h1 class=“title”> Common selectors:

  33. CSS Anatomy 101 #ID attribute .title { color: black; font-weight:

    bold; } .class attribute element <div id=“masthead”> <h1 class=“title”> <h1 class=“title”> Common selectors:

  34. CSS Anatomy 101 h1 { color: black; font-weight: bold; }

    Declarations:

  35. CSS Anatomy 101 h1 { color: black; font-weight: bold; }

    Property: Value Declarations:

  36. CSS Anatomy 101 h1 { color: black; font-weight: bold; }

    Declarations: Declarations always end in a semicolon

  37. CSS Anatomy 101 h1 { color: black; font-weight: bold; }

    Declarations: Declaration groups are wrapped by curly brackets

  38. CSS Anatomy 101 h1 { color: black; font-weight: bold; }

    h1 { color: black; font-weight: bold; } You can also put it all on one line

  39. CSS Anatomy 101 Add comments h1 { color: black; /*

    Hello world! */ font-weight: bold; }

  40. A few tools and resources Let me Google that for

    you http://www.w3schools.com http://www.csszengarden.com http://www.codecademy.com/tracks/web http://joshuarudd.github.com/typeset.css http://js ddle.net Your browser’s Web Inspector (or Firebug)