Why CSS was invented

Håkon Wium Lie

howcome@opera.com

HTML

           <h1>Headline</h1>

CSS

           h1 {
             font-size: 14px;
             color: red;
           }

HTML & CSS


          <h1>Headline</h1>

          h1 {
            font-size: 14px;
            color: red;
          }

"An anarchistic group of 20 volunteers tries to replace Lovdata. The group is publishing the laws of Norway from a computer in Switzerland. From there, the laws are freely available via the world's largest computer network, the Internet"

CSS properties

Some text
font-size: 40px font-size
font-style: italic font-style
font-family: serif font-family
background: #fe7 background
border: 0.1em solid black border
border: 0.1em solid #486 border-color
border: 0.1em dotted #486 border-style
border: 0.3em inset #46F border-width
border: 0.5em outset #F46 border-width
text-shadow: 10px 10px black text-shadow
text-shadow: 5px 5px 5px #F79 text-shadow
text-shadow: 0px 0px 20px orange; color: white text-shadow

CSS3

border-radius: 40px border-radius
border-radius: 40px border-radius
border-radius: 150px / 50px border-radius
border-radius: 60px 0 / 60px 0; border-radius

Webfonts

Microsoft's Core fonts

Andale Mono Arial Comic Sans MS Courier New Georgia Impact Times New Roman Trebuchet MS Verdana

@import url(http://www.princexml.com/fonts/ steffmann/index.css); font-family: Angel Angel
font-family: Becker Inline Becker Inline
font-family: Broadcast Titling Broadcast Titling
font-family: Cardiff Cardiff
font-family: Direction Direction 



From: "Siebrand Mazeland (WMF)" <smazeland@wikimedia.org>
Date: Wed, 14 Dec 2011 18:49:19 +0100
Sender: wikitech-l-bounces@lists.wikimedia.org
To: wikitech-l@lists.wikimedia.org, mediawiki-i18n@lists.wikimedia.org
Subject: [Wikitech-l] Report on WebFonts deployment

On Monday December 12 at 18:00 UTC we deployed the extension
WebFonts[1] to 40 wikis in 11 Indic languages and Wikimedia Incubator
-- all wikis in Assamese, Bengali, Gujarati, Hindi, Kannada, Marathi,
Nepali, Oriya, (Eastern) Punjabi, Sankrit and Telugu have WebFonts
now. WebFonts was not deployed on Malayalam and Tamil projects. The
reason for this was that community members had requested us not to. We
are confident that in time, the communities will request that WebFonts
is enabled on their projects.

Testing

CSS3 transitions

Norwegian coat of arms 
<img src=coat-of-arm.svg>
img { transition: 1s }
img:hover { transform: rotate(-360deg) }

Minsk

li { transition: 0.5s }
li:hover {
  letter-spacing: 10px;
  transform: rotate(10deg);
  color: red
}

Apps

Multicolumn layout

Printing

How long will the web last?

500 years!