screen.css

CSS for desktops, tablets, and phones


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

Typography

This is <b> and .b.

This is <strong> and .strong.

This is <i> and .i.

This is <em> and .em.

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.

This is <h2> and .h2.

This is <h3> and .h3.

This is <h4> and .h4.

This is <p>.

Quotes

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>:
Hi!
This is .center:
Hi!

Lists

This is <ul>:

Code

This is <code>.

This is <pre><code.html>:

<!DOCTYPE html>
<html>
  <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>
    Body
  </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.

Sign HTML code HTML entity CSS code
&#182; &para; \00B6
& &#38; &amp; \0026
* &#42; &ast; \002A
&#8482; &trade; \2122
&#8592; &larr; \2190
&#8593; &uarr; \2191
$ &#36; &dollar; \0024
¢ &#162; &cent; \00A2
&#8364; &euro; \20AC
&#8220; &ldquo; \201C
&#8221; &rdquo; \201D
HTML:
<span>&#182;</span> <!-- HTML code or entity --> 
CSS:
span {
  content: "\00B6"; /* CSS code */
}
Made by Georges Duverger.
Deployed with Now.
Code on GitHub.