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

What We Talk About When We Talk About CSS

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for alicetragedy alicetragedy
July 20, 2013
Design
0
75

What We Talk About When We Talk About CSS

An Introduction to CSS for a PyLadies workshop in Vienna, Austria.

Avatar for alicetragedy

alicetragedy

July 20, 2013
Tweet

More Decks by alicetragedy

See All by alicetragedy
Building inclusive Open Source communities
Avatar for alicetragedy alicetragedy
0
100
Building Inclusive Open Source Communities
Avatar for alicetragedy alicetragedy
1
260
RGSoC 2018 Sponsor pitch
Avatar for alicetragedy alicetragedy
0
240
Building Inclusive Open Source Communities
Avatar for alicetragedy alicetragedy
0
200
Making your voice heard: Open Source needs You
Avatar for alicetragedy alicetragedy
0
91
Making your voice heard: Open Source needs You
Avatar for alicetragedy alicetragedy
0
110
Open Source Needs You
Avatar for alicetragedy alicetragedy
0
340
Hackathons
Avatar for alicetragedy alicetragedy
0
80
Contributing to & funding Open Source
Avatar for alicetragedy alicetragedy
1
260

Other Decks in Design

See All in Design
プロダクトデザイナーに学ぶ、『見る気が起きる』ダッシュボードの作り方 / Creating Engaging Dashboards: Lessons from Product Designers
Avatar for yamamoto-yuta yamamotoyuta
2
720
hicard_credential_202601
Avatar for hicard hicard
0
210
アンエシカルデザインの枠組みの提案 -HCD-Netダークパターン研究会活動報告-
Avatar for Yu Morita securecat
0
360
【優秀賞＋特別賞】くまモン食いしん坊弁当「くまモンの魔法の柑橘弁当」最終審査資料
Avatar for Shoko shoko_seven11
0
120
Emmy's Artwork
Avatar for McKenna mcksmith
0
220
Vibe Coding デザインシステム
Avatar for poteboy poteboy
3
1.8k
コムデマネージャーがプロダクトデザインに挑戦した。むずかしくて楽しかった。
Avatar for payatsun payatsusan213
0
260
AIエージェントが対話的なUIを返す！MCP−UIで変わるユーザ体験
Avatar for daitasu daitasu
1
180
デザイナーが主導権を握る、AI協業の本音と実践
Avatar for satosio satosio
7
3.1k
Mandalyn_DT5001_FinalAssignment.pdf
Avatar for Mandalyn Teo lynteo
0
190
「デザイン」の自分ごと化から始める、デザインピープルのふるまい
Avatar for mewmo mewmo
0
200
2026_01_07_３DプリントはじめましたLT.pdf
Avatar for HideakiTakechi hideakitakechi
0
140

Featured

See All Featured
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
5.1k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
96
14k
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
300
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
9
37k
Fireside Chat
Avatar for paigeccino paigeccino
42
3.9k
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
Avatar for Mfonobong Umondia mfonobong
2
340
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
New Earth Scene 8
Avatar for Sydney Stone popppiees
2
1.9k
Visualization
Avatar for Eitan Lees eitanlees
150
17k
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
200
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
35k
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
1
700

Transcript

  1. a not-so-thorough lightning talk by Laura Gaetano When we talk

    about CSS What we talk about

  2. and I'm a visual artist gone geek. Hello, my name

    is Laura

  3. (I also email developers when I find typos in their

    apps.) I like impressive, clear, exciting, functional and beautiful design.

  4. (what's that?) Some years ago, I fell in love with

    CSS

  5. and that's a good thing. Cascading Style Sheets help you

    style and strategically divide your page

  6. The Basics: Think of it like a recipe

  7. - you have a lot of ingredients available to choose

    from - and: some ingredients reaaaaaally don't like each other! - the order in which you use them matters! (most of the time)

  8. Onto the hard stuff: What does CSS look like? It

    has a lovely, easy to learn syntax: lots of curly braces and semi-colons!

  9. body { font-family: Helvetica; font-color: purple; } selector / property

    / value

  10. To insert CSS into your HTML code, you can either

    use <style> tags in your <head></head>... (but that's not so cool) or use an external stylesheet which means you can keep all your styling in one place!

  11. External Stylesheet = Awesome <link href="your_css_filename.css" rel="stylesheet" type="text/css" />

  12. If you want to play around with CSS you can

    check out the Twitter bootstrap http://twitter.github.io/bootstrap/

  13. If you want to stalk me, you can find me

    here: twitter: @alicetragedy web: www.alicetragedy.org github: github.com/alicetragedy instagram: okay, you get the point

  14. (sponsored by placekitten.com) And here's a kitten picture for you!