SlideShare a Scribd company logo
1 of 62
Download to read offline
Jiminy&Dave’s
ExcellentCSSAdventure
Jiminy Panoz
Dave Cramer
•
ebook
craft
2018
Genesis
html
body
div
h1
Loomings
p
span
C
all	
  me	
  Ishmael.
head
meta title
html
body
div
h1
Loomings
p
span
C
all	
  me	
  Ishmael.
page-­‐break-­‐before:	
  always;
font-­‐size:	
  1.5em margin:	
  	
  0	
  0	
  2em	
  0
font-­‐size:	
  1em line-­‐height:	
  1.4em
initial-­‐letter:	
  3
DOM CSS
head never,	
  ever,	
  display	
  this!!!
all me Ishmael. Some years
ago, never mind how long precise
Loomings
h1
p
div
Cspan
WhyCSS?
Magic&Boxes
Likemagic,

CSSiseverywhere
HowCSSWorks
text
Call me Ishmael. Some years ago—never mind how long
precisely—having little or no money in my purse, and
nothing particular to interest me on shore, I thought I
would sail about a little and see the watery part of the
world. It is a way I have of driving off the spleen and
regulating the circulation. Whenever I find myself growing
grim about the mouth; whenever it is a damp, drizzly
November in my soul; whenever I find myself involuntarily
pausing before coffin warehouses, and bringing up the
rear of every funeral I meet; and especially whenever my
hypos get such an upper hand of me, that it requires a
strong moral principle to prevent me from deliberately
stepping into the street, and methodically knocking
people’s hats off—then, I account it high time to get to
sea as soon as I can. This is my substitute for pistol and
ball. With a philosophical flourish Cato throws himself
upon his sword; I quietly take to the ship. There is
nothing surprising in this. If they but knew it, almost all
men in their degree, some time or other, cherish very
nearly the same feelings towards the ocean with me.
html
body
section
h1
Loomings
text
p
Whythe Cascade?
p { margin: 0 }
p + p { text-indent: 1em }
Iwrote1,000spells.
Whichone works?
user agent
important
user important
author important
author normal
user normal
user agent normal
inline style style=“font-size: 16pt”
ID selector #p137
Class, attribute,
pseudo-class
.no-indent
[lang=‘en’]
a:focus
Type, pseudo-element
h1
hr::before
SpaceBreaks
This is my substitute for pistol and
ball. With a philosophical flourish Cato
throws himself upon his sword; I quietly
take to the ship. There is nothing
surprising in this. If they but knew it,
almost all men in their degree, some
time or other, cherish very nearly the
same feelings towards the ocean with
me.</p>
<hr />
<p>There now is your insular city of the
Manhattoes, belted round by wharves as
Indian isles by coral reefs—commerce
surrounds it with her surf. Right and
left, the streets take you waterward.
hr { /* UA Stylesheet */
color: gray;
border-style: inset;
border-width: 1px;
margin: 0.5em auto;
}
hr {
text-align: center;
border: 0;
margin: .5em 0;
}
hr::before {
content: 'E331';
font-family: 'Poetica Std';
color: black;
font-size: larger;
}
h1 {
font-family: 'Zapfino Extra LT Pro';
font-feature-settings: "ss05";
text-align: center;
}
h1 {
border-width: 2px 0pt;
border-style: solid;
border-color: red;
padding: 4px 4px 0 4px;
margin-left: 40px;
display: inline-block;
font-family: 'Poetica Std';
font-weight: normal;
}
ul {
list-style-type: none;
padding-left: 0;
}
ul li::before {
color: black;
content: 'F0FE';
font-family: 'Wingdings';
padding-right: 5px;
}
li {
padding: 0;
margin-left: 20px;
text-indent: -20px;
}
/* UA Stylesheet
ol, ul {
padding-left: 40px;
} */
Centering
section[epub|type~='dedication'] p {
margin: 50vh 0 0 0;
text-align: center;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-style: italic;
}
section[epub|type~='dedication'] {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
section {
text-align: center;
height: 100vh;
}
section::before {
display: inline-block;
content: '';
height: 100vh;
vertical-align: middle;
background-color: pink;
}
p {
display: inline-block;
vertical-align: middle;
font-size: 16px;
}
–CSS 2.1
“If both 'margin-left' and 'margin-right' are
'auto', their used values are equal. This
horizontally centers the element with respect to
the edges of the containing block.”
Images
/* UA stylesheet */
figure {
display: block;
margin-left: 40px;
margin-right: 40px;
margin-top: 1em;
margin-bottom: 1em;
}
figure {
margin: 0;
}
img {
object-fit: contain;
width: 100vw;
height: 100vh;
}
figure {
height: 95%;
margin: 0 auto 0 auto;
padding: 0;
text-indent: 0;
text-align: center;
}
figure img {
height: 100%;
}
figure {
display: flex;
flex-flow: column;
height: 100vh;
margin: 0;
}
img {
flex: 1;
background: orange;
min-height: 50vh;
align-self: center;
object-fit: contain;
}
figcaption {
background: lightblue;
}
Selectorsfor

Fun&Profit
tr:nth-child(2n) {
background-color: pink;
}
a[href^="http"] {
color: red;
}
a[href^="http"]::after {
content: '1F4A9';
padding: 2px;
line-height: 0;
}
a:not([href^="http"]) {
color: blue;
}
a:not([href^="http"])::after {
content: '26BE';
padding: 2px;
line-height: 0;
}
img:not([alt]) {
border: 10px solid red;
}
img[alt=''] {
border: 10px solid orange;
}
Inline
sup { line-height: 0; }
Cascading
Style Sheets
L = line-height - (ascent + descent)
ascent
descent
line height
L/2
L/2
L/2
L/2
line height
line-height: 0
Thank You!
@dauwhe
@jiminypan

More Related Content

More from BookNet Canada

More from BookNet Canada (20)

Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
 
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...Transcript: Green paths: Learning from publishers’ sustainability journeys - ...
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...
 
Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024
Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024
Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024
 
Transcript: Book industry state of the nation 2024 - Tech Forum 2024
Transcript: Book industry state of the nation 2024 - Tech Forum 2024Transcript: Book industry state of the nation 2024 - Tech Forum 2024
Transcript: Book industry state of the nation 2024 - Tech Forum 2024
 
Book industry state of the nation 2024 - Tech Forum 2024
Book industry state of the nation 2024 - Tech Forum 2024Book industry state of the nation 2024 - Tech Forum 2024
Book industry state of the nation 2024 - Tech Forum 2024
 
Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024
Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024
Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024
 
Transcript: Trending now: Book subjects on the move in the Canadian market - ...
Transcript: Trending now: Book subjects on the move in the Canadian market - ...Transcript: Trending now: Book subjects on the move in the Canadian market - ...
Transcript: Trending now: Book subjects on the move in the Canadian market - ...
 
Transcript: New stores, new views: Booksellers adapting engaging and thriving...
Transcript: New stores, new views: Booksellers adapting engaging and thriving...Transcript: New stores, new views: Booksellers adapting engaging and thriving...
Transcript: New stores, new views: Booksellers adapting engaging and thriving...
 
Show and tell: What’s in your tech stack? - Tech Forum 2023
Show and tell: What’s in your tech stack? - Tech Forum 2023Show and tell: What’s in your tech stack? - Tech Forum 2023
Show and tell: What’s in your tech stack? - Tech Forum 2023
 
Transcript: Show and tell: What’s in your tech stack? - Tech Forum 2023
Transcript: Show and tell: What’s in your tech stack? - Tech Forum 2023Transcript: Show and tell: What’s in your tech stack? - Tech Forum 2023
Transcript: Show and tell: What’s in your tech stack? - Tech Forum 2023
 
Transcript: Redefining the book supply chain: A glimpse into the future - Tec...
Transcript: Redefining the book supply chain: A glimpse into the future - Tec...Transcript: Redefining the book supply chain: A glimpse into the future - Tec...
Transcript: Redefining the book supply chain: A glimpse into the future - Tec...
 
Redefining the book supply chain: A glimpse into the future - Tech Forum 2023
Redefining the book supply chain: A glimpse into the future - Tech Forum 2023Redefining the book supply chain: A glimpse into the future - Tech Forum 2023
Redefining the book supply chain: A glimpse into the future - Tech Forum 2023
 
Transcript: The Details of Description Techniques tips and tangents on altern...
Transcript: The Details of Description Techniques tips and tangents on altern...Transcript: The Details of Description Techniques tips and tangents on altern...
Transcript: The Details of Description Techniques tips and tangents on altern...
 
The details of description: Techniques, tips, and tangents on alternative tex...
The details of description: Techniques, tips, and tangents on alternative tex...The details of description: Techniques, tips, and tangents on alternative tex...
The details of description: Techniques, tips, and tangents on alternative tex...
 
Future Book(s): Sharing Ideas on Books and (Art) Publishing - Tech Forum 2023
Future Book(s): Sharing Ideas on Books and (Art) Publishing - Tech Forum 2023Future Book(s): Sharing Ideas on Books and (Art) Publishing - Tech Forum 2023
Future Book(s): Sharing Ideas on Books and (Art) Publishing - Tech Forum 2023
 
Transcript: Future Book(s): Sharing Ideas on Books and (Art) Publishing - Tec...
Transcript: Future Book(s): Sharing Ideas on Books and (Art) Publishing - Tec...Transcript: Future Book(s): Sharing Ideas on Books and (Art) Publishing - Tec...
Transcript: Future Book(s): Sharing Ideas on Books and (Art) Publishing - Tec...
 
Give them what they need: A case study of what retailers can accomplish with ...
Give them what they need: A case study of what retailers can accomplish with ...Give them what they need: A case study of what retailers can accomplish with ...
Give them what they need: A case study of what retailers can accomplish with ...
 
Transcript: Give them what they need: A case study of what retailers can acco...
Transcript: Give them what they need: A case study of what retailers can acco...Transcript: Give them what they need: A case study of what retailers can acco...
Transcript: Give them what they need: A case study of what retailers can acco...
 
#StandardsGoals for 2023 Standards & certification roundup - Tech Forum 2023
#StandardsGoals for 2023 Standards & certification roundup - Tech Forum 2023#StandardsGoals for 2023 Standards & certification roundup - Tech Forum 2023
#StandardsGoals for 2023 Standards & certification roundup - Tech Forum 2023
 
Transcript: #StandardsGoals for 2023 Standards & certification roundup - Tech...
Transcript: #StandardsGoals for 2023 Standards & certification roundup - Tech...Transcript: #StandardsGoals for 2023 Standards & certification roundup - Tech...
Transcript: #StandardsGoals for 2023 Standards & certification roundup - Tech...
 

Recently uploaded

Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
FIDO Alliance
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
panagenda
 
Microsoft BitLocker Bypass Attack Method.pdf
Microsoft BitLocker Bypass Attack Method.pdfMicrosoft BitLocker Bypass Attack Method.pdf
Microsoft BitLocker Bypass Attack Method.pdf
Overkill Security
 

Recently uploaded (20)

Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
How to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cfHow to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cf
 
Simplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptxSimplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptx
 
The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...
The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...
The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...
 
JavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuideJavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate Guide
 
ADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptxADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptx
 
Working together SRE & Platform Engineering
Working together SRE & Platform EngineeringWorking together SRE & Platform Engineering
Working together SRE & Platform Engineering
 
Design and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data ScienceDesign and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data Science
 
الأمن السيبراني - ما لا يسع للمستخدم جهله
الأمن السيبراني - ما لا يسع للمستخدم جهلهالأمن السيبراني - ما لا يسع للمستخدم جهله
الأمن السيبراني - ما لا يسع للمستخدم جهله
 
Introduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDMIntroduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDM
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
 
ChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps ProductivityChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps Productivity
 
Generative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdfGenerative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdf
 
Top 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development CompaniesTop 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development Companies
 
Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptx
 
JohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptxJohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptx
 
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
 
Microsoft BitLocker Bypass Attack Method.pdf
Microsoft BitLocker Bypass Attack Method.pdfMicrosoft BitLocker Bypass Attack Method.pdf
Microsoft BitLocker Bypass Attack Method.pdf
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and Insight
 

Jiminy and Dave's Excellent CSS Adventure - Jiminy Panoz & Dave Cramer - ebookcraft 2018