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

What We Talk About When We Talk About CSS

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
190
Making your voice heard: Open Source needs You
Avatar for alicetragedy alicetragedy
0
90
Making your voice heard: Open Source needs You
Avatar for alicetragedy alicetragedy
0
110
Open Source Needs You
Avatar for alicetragedy alicetragedy
0
330
Hackathons
Avatar for alicetragedy alicetragedy
0
79
Contributing to & funding Open Source
Avatar for alicetragedy alicetragedy
1
250

Other Decks in Design

See All in Design
Spacemarket Brand Guide
Avatar for Spacemarket spacemarket
2
260
情報を翻訳する-伝わる可視化３原則とオープンデータ活用-
Avatar for Hajime Kato hjmkth
1
170
新卒2年目デザイナーが、UX検定基礎にチャレンジした話
Avatar for ぽん designer_no_pon
1
1.3k
kintone Style Book
Avatar for kintone kintone
6
12k
デザインコンテキストのバトンをつなぐ—AI時代のプロダクトマネジメント
Avatar for kumano ayumi kumanoayumi
6
970
20260215独立行政法人科学技術振興機構(JST) 社会技術研究開発センター(RISTEX)ケアが根づく社会システム _公開シンポジウム
Avatar for Kimura Atsunobu a2k
0
130
はじめての演奏会フライヤーデザイン
Avatar for Kaito Kikuchi chorkaichan
1
240
AI時代に求められるUXデザインのアプローチ
Avatar for xtone xtone
0
510
公開スライド）熊本市様-電子申請中級編
Avatar for @Garyuten garyuten
0
1k
「見せる」登壇資料デザインの極意
Avatar for takanorip takanorip
2
620
アンエシカルデザインの枠組みの提案 -HCD-Netダークパターン研究会活動報告-
Avatar for Yu Morita securecat
0
220
生成AIの不確実性を価値に変える、「ビズリーチ」の体験設計 / KNOTS2026
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
6
830

Featured

See All Featured
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9.2k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
269
14k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.2k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
96
14k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
199
73k
New Earth Scene 8
Avatar for Sydney Stone popppiees
1
1.7k
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
0
200
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
69
Leo the Paperboy
Avatar for Maya Tellez mayatellez
4
1.5k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
49
9.9k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
52k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
5
940

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!