CSS for desktops, tablets, and phones

Download version 0.2 or link to an external style sheet.

<link 
  rel="stylesheet" 
  media="screen" 
href="https://screencss.com/screen.css">

  1. Typography
  2. Headings
  3. Quotes
  4. Rulers
  5. Layout
  6. Lists
  7. Code
  8. Images
  9. Breaks
  10. Symbols
  11. Emojis

Typography

This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut blandit sagittis tempus.

During this weekend, together with a few evenings earlier this week, I created a rather simple virtual machine dubbed “Sol”, after the Swedish word for “sun”. I’ve read a lot about VM design and I’m into stuff like OS design, programming languages and other seeminlgy obscure and nerdy stuff surrounding the concept of a computer as a generic tool.

This is another paragraph. Ut sagittis purus a odio dictum, id pellentesque nisl iaculis. Donec posuere ac elit tincidunt porttitor. Nunc eu mauris rutrum, feugiat mi nec, blandit justo. Praesent porttitor sollicitudin est, et fermentum quam auctor nec. Phasellus et ipsum cursus, porttitor erat quis, ornare mi. In semper nulla nec orci rhoncus tincidunt. Morbi sollicitudin facilisis arcu vel iaculis. Quisque vitae dapibus ante. Cras mattis est erat, eget feugiat massa lacinia at. Ut porta, dolor vel varius feugiat, nulla nulla rutrum urna, tempus pellentesque urna ex sit amet turpis. Donec diam arcu, vulputate id imperdiet eget, tincidunt at sem. Sed ullamcorper mattis velit, quis vulputate felis elementum sed. Curabitur quis velit facilisis, gravida purus iaculis, sagittis magna. Aenean vel blandit odio. Duis ultrices, augue a semper tempor, mi turpis lacinia purus, et cursus urna tortor sit amet odio. Aliquam in fermentum dolor, ultrices malesuada dolor.

This is <b> and .b.

This is <strong> and .strong.

This is <i> and .i.

This is <em> and .em.

This is <mark> and .mark.

This is <s> and .s.

This is <del> and .del.

This is <a>.

This is <a.inherit>.

This is .quiet.

This is <a.quiet>.

This is a .quiet paragraph with <a>.

This is <sub> and .sub.

This is <sup> and .sup.

This is <small> and .small.

This is a .small paragraph.

Headings

This is <h1> and .h1. Lorem ipsum dolor sit amet.

This is <h2> and .h2. Lorem ipsum dolor sit amet.

This is <h3> and .h3. Lorem ipsum dolor sit amet.

This is <h4> and .h4. Lorem ipsum dolor sit amet.

This is <p>. Lorem ipsum dolor sit amet.

Quotes

This is <q>, .q, and .quote.

This is <blockquote>:
It's better to have CSS-ed and lost than to never have CSS-ed at all.
This is .blockquote:
It's better to have CSS-ed and lost than to never have CSS-ed at all.

Rulers

This is <hr>:
This is .hr:

Layout

This is <center>:
Lorem ipsum dolor sit amet.
This is .center:
Lorem ipsum dolor sit amet.

Lists

This is <ul>:

Code

This is <code>.

This is <pre><code.html>:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Title</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> -->
    <link rel="shortcut icon" type="image/png" href="…">
    <link rel="stylesheet" media="screen" href="…">
  </head>
  <body>
    Content
    <script type="text/javascript">
      // const element = document.getElementById('…')
    </script>
  </body>
</html>

The syntax highlighting is powered by highlight.js.

Images

A caption

Breaks

This is .break (try it in a small window):
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum mollis semper porttitor.
Vestibulum tincidunt, dui ut cursus commodo, felis tellus aliquet neque, quis vulputate augue lacus ut ligula.
Proin eget aliquam neque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Aliquam dignissim feugiat erat, in congue tellus scelerisque et.
Sed vitae varius massa.

.break are only displayed in responsive mode when: 
@media screen and (max-width: 762px)

Symbols

You can find a more complete list of HTML symbols, entities, and ASCII character codes here.

Symbol HTML code HTML entity CSS code
&#182; &para; \00B6
& &#38; &amp; \0026
* &#42; &ast; \002A
™ &#8482; &trade; \2122
← &#8592; &larr; \2190
↑ &#8593; &uarr; \2191
→ &#8594; &rarr; \2192
↓ &#8595; &darr; \2193
$ &#36; &dollar; \0024
¢ &#162; &cent; \00A2
€ &#8364; &euro; \20AC
℃ &#8451; - \2103
℉ &#8457; - \2109
“ &#8220; &ldquo; \201C
” &#8221; &rdquo; \201D
HTML: 
<span>&#182;</span> <!-- HTML code or entity -->
CSS: 
span {
  content: "\00B6"; /* CSS code */
}

Emojis

💪👌👋👍👎🤝🙏🤯💯➕

Made by Georges Duverger.
Deployed with Now.
Code on GitHub.