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
CSS Fundamentals
Search
Cheesecake Labs
May 14, 2018
Programming
0
38
CSS Fundamentals
Beatriz Silveira
Cheesecake Labs
May 14, 2018
Tweet
Share
More Decks by Cheesecake Labs
See All by Cheesecake Labs
Cats' wellness & care
cheesecakelabs
0
38
How do we create the first impressions?
cheesecakelabs
0
42
Menstrual cup: suit and freedom
cheesecakelabs
0
43
Life is a cycle, better with a bicycle
cheesecakelabs
0
37
Interview Process: how to get the best of people
cheesecakelabs
1
64
My capsule wardrobe experience
cheesecakelabs
3
48
Stonewall Rebellion and its impact on LGBTQIA+ history
cheesecakelabs
1
27
Pregnancy, childbirth and breastfeeding: What do I have to do with it?
cheesecakelabs
0
38
MBTI - Psychological types described by Jung
cheesecakelabs
0
88
Other Decks in Programming
See All in Programming
使ってみよう Azure AI Document Intelligence
kosmosebi
2
270
⼤規模⾔語モデルの拡張(RAG)が 終わったかも知れない件について
nearme_tech
23
15k
ONE WEDGE_company_guide
1wedge_one
0
440
ADRを一年運用してみた/adr_after_a_year
hanhan1978
7
2.3k
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
0
180
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
810
educure_カリキュラム生操作マニュアル.pdf
linew_official
0
640
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
4
920
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
hollycummins
0
230
try! Swift Tokyo 2024のLT枠に採択されたプロポーザルを出すときに考えていたこと
ski
0
350
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
180
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
0
340
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
1
3.4k
Embracing the Ebb and Flow
colly
79
4.1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
2k
The Illustrated Children's Guide to Kubernetes
chrisshort
30
46k
The MySQL Ecosystem @ GitHub 2015
samlambert
242
12k
Designing for Performance
lara
601
67k
GitHub's CSS Performance
jonrohan
1024
450k
Building Flexible Design Systems
yeseniaperezcruz
318
37k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
13
1.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
259
12k
Fireside Chat
paigeccino
20
2.6k
Transcript
CSS Fundamentals
Timeline • css1- released in 1996 • css2 - released
in 1998 • css3 - in Development (Split up into independent modules) • https://www.w3.org/TR/
Selectors • Element • Class • ID • Universal •
Attribute
Selection by Element
Selection by Class
Selection by ID
Selection by Attributes
Selection Universal
None
Cascading Style & Specificity Inline Styles #ID .class :pseudo-class [attribute]
<Tag> ::pseudo-element
Combinators • Adjacent Sibling • General Sibling • Child •
Descendant • Group of Selectors
Adjacent Sibling Combinator
General Sibling Combinator
Child Combinator
Descendant Combinator
Group of Selectors
But why Do I need selectors and Combinators ? Spoiler:
To Apply properties
Properties
But how this property interfere in my CSS ?
Every element in HTML is interpreted as a box by
CSS CSS Box Model
Margin Collapsing
Display Property display: block;
Display Property display: inline display: inline-block
Positioning Elements with CSS • Position: • static • Fixed
• Relative • Absolute
Positioning Elements with CSS Position: Static Default value
Positioning Elements with CSS
Positioning Elements with CSS <div> Top Bottom Left Right
Fixed Position
Z-index
Absolute & Relative
Absolute & Relative
Pixel, Percentages & More
How is the size calculated? Absolute Viewport Relative Font Relative
px rem vh em vw %
Rules to remember
REM x EM https://codepen.io/beatriz1304/pen/ELReaJ
vh & vw https://codepen.io/beatriz1304/pen/VxdGKa
Box-sizing box-sizing: content-box; box-sizing: border-box;
Box-sizing
Box-sizing
Some cases not covered • Font Family • pseudo class
and pseudo elements • @media query • Flexbox • Grid Layout • Images • Transition • Animation