Screen — CSS for desktops, tablets, & phones

Download or link to the style sheet.
Watch, star, and fork on GitHub.
Donate a coffee or two. 

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

Typography

This is a <p> and .p. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at imperdiet sem. Nam a orci in ligula egestas rutrum non at mauris. Suspendisse luctus enim augue, non ullamcorper leo porta et. Praesent sit amet semper tortor. Duis eleifend orci eu enim ultrices congue. Fusce non maximus lorem. Nunc magna metus, euismod a ipsum in, aliquet efficitur orci. Duis sodales blandit mi, a lobortis felis rutrum et. Mauris sollicitudin augue quis tincidunt pretium. Morbi ac lorem aliquam nisi ornare venenatis ut vel diam. Aenean vulputate vehicula dapibus. Proin congue venenatis neque, at viverra est imperdiet nec.

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. (Same as paragraph.)

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>:
This is <ol>:
  1. This is <li>.
  2. Etiam id ex ac elit volutpat interdum. Fusce sodales maximus tellus, nec egestas odio euismod pulvinar. Cras sed nunc vel massa interdum euismod nec a quam.

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

This is a caption

Boxes

Those are .box.

This is .action-box. You should do something.
This is .info-box. You should know something.
This is .error-box. You should fix something.

Breaks

Minimize the window to “break” (¶) the paragraph below.

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 displayed in responsive mode when:

@media screen and (max-width: 768px)

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 in Cambridge, MA ☘️
About · Analytics