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>:

This is <li>.
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 content = 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.

Sign	HTML code	HTML entity	CSS code
¶	¶	¶	\00B6
&	&	&	\0026
*	*	&ast;	\002A
™	™	™	\2122
←	←	←	\2190
↑	↑	↑	\2191
$	$	&dollar;	\0024
¢	¢	¢	\00A2
€	€	€	\20AC
“	“	“	\201C
”	”	”	\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.