Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ASOS Prince's Trust Get Into Technology - CSS
Search
Si Jobling
February 23, 2016
Technology
0
64
ASOS Prince's Trust Get Into Technology - CSS
Si Jobling
February 23, 2016
Tweet
Share
More Decks by Si Jobling
See All by Si Jobling
ASOS Prince's Trust Get Into Technology - Basic Coding
si
0
77
ASOS Prince's Trust Get Into Technology - HTML
si
0
45
The Working and Managements Styles of Five Different Industries
si
0
320
Sponsor a Mac
si
1
140
Tweets for Balls
si
0
110
Other Decks in Technology
See All in Technology
『OCI で学ぶクラウドネイティブ 実践 × 理論ガイド』 書籍概要
oracle4engineer
PRO
3
220
セキュアな認可付きリモートMCPサーバーをAWSマネージドサービスでつくろう! / Let's build an OAuth protected remote MCP server based on AWS managed services
kaminashi
3
330
プロダクトのコードから見るGoによるデザインパターンの実践 #go_night_talk
bengo4com
1
2.5k
LLMアプリの地上戦開発計画と運用実践 / 2025.10.15 GPU UNITE 2025
smiyawaki0820
1
570
[Codex Meetup Japan #1] Codex-Powered Mobile Apps Development
korodroid
2
800
AIツールでどこまでデザインを忠実に実装できるのか
oikon48
6
3.4k
やる気のない自分との向き合い方/How to Deal with Your Unmotivated Self
sanogemaru
0
510
AWSでAgentic AIを開発するための前提知識の整理
nasuvitz
2
160
綺麗なデータマートをつくろう_データ整備を前向きに考える会 / Let's create clean data mart
brainpadpr
3
520
「使い方教えて」「事例教えて」じゃもう遅い! Microsoft 365 Copilot を触り倒そう!
taichinakamura
0
390
なぜAWSを活かしきれないのか?技術と組織への処方箋
nrinetcom
PRO
5
900
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
8.8k
Featured
See All Featured
For a Future-Friendly Web
brad_frost
180
9.9k
Typedesign – Prime Four
hannesfritz
42
2.8k
Site-Speed That Sticks
csswizardry
12
900
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
4 Signs Your Business is Dying
shpigford
185
22k
Code Review Best Practice
trishagee
72
19k
Being A Developer After 40
akosma
91
590k
Music & Morning Musume
bryan
46
6.8k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Transcript
Prince’s Trust Get Into Tech Basic Coding with Si Jobling
Tuesday 23 February 2016 CSS Adding some style
• What is CSS? • Curly braces and colons •
Elements, classes and IDs • Colo(u)rs • Fonts • Decorative stuff (borders, backgrounds) • Layout and sizes
Basic Coding with Si Jobling Cascading Style Sheets
Basic Coding with Si Jobling selector { property: value; }
Basic Coding with Si Jobling body { background: black; }
Basic Coding with Si Jobling .class-name { background: black; }
Basic Coding with Si Jobling #unique-identifier { background: black; }
Basic Coding with Si Jobling #one .product img { background:
black; }
Basic Coding with Si Jobling #one .product img { background:
black; color: white; }
Basic Coding with Si Jobling Colours
Basic Coding with Si Jobling a { color: white; }
US spellings! 216 reserved words
Basic Coding with Si Jobling a { color: #FFFFFF; }
RED GREEN BLUE
Basic Coding with Si Jobling a { color: #000000; }
Black
Basic Coding with Si Jobling Try it out
Basic Coding with Si Jobling Typography
Basic Coding with Si Jobling body { font-family: Arial, sans-serif;
} Fallback
Basic Coding with Si Jobling h1 { font-size: 25px; }
Pixels
Basic Coding with Si Jobling a { text-decoration: underline; }
or none
Basic Coding with Si Jobling .description { text-transform: uppercase; }
capitals
Basic Coding with Si Jobling Try it out
Basic Coding with Si Jobling Borders & Backgrounds
Basic Coding with Si Jobling img { border: 2px solid
#000000; } colour width Style
Basic Coding with Si Jobling .product img { border-color: grey;
} just colour
Basic Coding with Si Jobling .product img { border-top-width: 5px;
} position & SIZE
Basic Coding with Si Jobling button { background: black; }
reserved colours
Basic Coding with Si Jobling button { background: #000; }
Short-hand hex code
Basic Coding with Si Jobling button { background: url(my-image.gif) repeat
top center; } path to any image any repeating position (US!)
Basic Coding with Si Jobling Try it out
Basic Coding with Si Jobling Layouts
Basic Coding with Si Jobling p { text-align: center; }
left, right or center
Basic Coding with Si Jobling <div id=“my-box”>content</div> #my-box { width:
300px; height: 300px; } 300px wide 300px high
Basic Coding with Si Jobling .my-box { width: 300px; height:
300px; margin: 100px; } 100px outside
Basic Coding with Si Jobling .my-box { width: 300px; height:
300px; margin: 100px; padding: 50px; } 50px inside
Basic Coding with Si Jobling .my-box { width: 300px; height:
300px; margin: 100px; padding: 50px; padding-top: 100px; } one side only
Basic Coding with Si Jobling Try it out
Basic Coding with Si Jobling What else?
display: block / inline / inline-block; float: left / right
/ none; position: absolute / relative / fixed; top / left / bottom / right: 10px; list-style: none / bullet / square;
Basic Coding with Si Jobling Your task
• Set your page colours (fonts and background) • Apply
borders to image thumbnails • Set font sizes of product details and prices • Apply colours and borders to form elements • Place thumbnails next to each other • Position product price top right of thumbnail
Basic Coding with Si Jobling Questions?