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
組織改革から開発効率向上まで! - 成功事例から見えたAI活用のポイント - / 20251016 Tetsuharu Kokaki
shift_evolve
PRO
2
220
ヘンリー会社紹介資料(エンジニア向け) / company deck for engineer
henryofficial
0
280
webpack依存からの脱却!快適フロントエンド開発をViteで実現する #vuefes
bengo4com
0
1.2k
Node.js 2025: What's new and what's next
ruyadorno
0
870
[2025年10月版] Databricks Data + AI Boot Camp
databricksjapan
1
230
HR Force における DWH の併用事例 ~ サービス基盤としての BigQuery / 分析基盤としての Snowflake ~@Cross Data Platforms Meetup #2「BigQueryと愉快な仲間たち」
ryo_suzuki
0
250
OpenTelemetry が拡げる Gemini CLI の可観測性
phaya72
2
1.2k
生成AIを安心して活用するために──「情報セキュリティガイドライン」策定とポイント
gree_tech
PRO
0
140
CNCFの視点で捉えるPlatform Engineering - 最新動向と展望 / Platform Engineering from the CNCF Perspective
hhiroshell
0
120
「最速」で Gemini CLI を使いこなそう! 〜Cloud Shell/Cloud Run の活用〜 / The Fastest Way to Master the Gemini CLI — with Cloud Shell and Cloud Run
aoto
PRO
0
140
ハノーファーメッセ2025で見た生成AI活用ユースケース.pdf
hamadakoji
0
300
物体検出モデルでシイタケの収穫時期を自動判定してみた。 #devio2025
lamaglama39
0
260
Featured
See All Featured
Writing Fast Ruby
sferik
629
62k
Designing Experiences People Love
moore
142
24k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Mobile First: as difficult as doing things right
swwweet
225
10k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Why Our Code Smells
bkeepers
PRO
340
57k
RailsConf 2023
tenderlove
30
1.3k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Speed Design
sergeychernyshev
32
1.2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
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?