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
290
Sponsor a Mac
si
1
140
Tweets for Balls
si
0
110
Other Decks in Technology
See All in Technology
自動テストの世界に、この5年間で起きたこと
autifyhq
10
7.1k
TAMとre:Capセキュリティ編 〜拡張脅威検出デモを添えて〜
fujiihda
0
100
Moved to https://speakerdeck.com/toshihue/presales-engineer-career-bridging-tech-biz-ja
toshihue
2
550
君も受託系GISエンジニアにならないか
sudataka
1
370
これからSREになる人と、これからもSREをやっていく人へ
masayoshi
6
4.1k
滅・サービスクラス🔥 / Destruction Service Class
sinsoku
6
1.5k
Postmanを使いこなす!2025年ぜひとも押さえておきたいPostmanの10の機能
nagix
2
120
Datadog APM におけるトレース収集の流れ及び Retention Filters のはなし / datadog-apm-trace-retention-filters
k6s4i53rx
0
320
AndroidXR 開発ツールごとの できることできないこと
donabe3
0
110
個人開発から公式機能へ: PlaywrightとRailsをつなげた3年の軌跡
yusukeiwaki
10
2.7k
MC906491 を見据えた Microsoft Entra Connect アップグレード対応
tamaiyutaro
1
480
マルチモーダル理解と生成の統合 DeepSeek Janus, etc... / Multimodal Understanding and Generation Integration
hiroga
0
360
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
510
110k
What's in a price? How to price your products and services
michaelherold
244
12k
Designing for Performance
lara
604
68k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
29
2.2k
Raft: Consensus for Rubyists
vanstee
137
6.8k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
A better future with KSS
kneath
238
17k
Scaling GitHub
holman
459
140k
Thoughts on Productivity
jonyablonski
69
4.5k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
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?