Simple CSS for Styling pre html tag

Styling <pre> tag using simple css code

<pre>

Description of <pre> tag on HTML

The HTML <pre> tag is employed for indicating preformatted text. The code tag surrounds the code being marked up.

Browsers commonly render pre text during a fixed-pitched font, with whitespace in tactfulness, and while not word wrap.

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML pre Tag</title>
</head>
<body>
<pre>
      This text is
 in a fixed-pitch
        font, and it preserves
 both    spaces and line breaks
</pre>
</body>
</html>

This will produce following result:
      This text is
 in a fixed-pitch
        font, and it preserves
 both    spaces and line breaks
In this article i'll share the simple way / simple code CSS for styling of <pre> HTML tag.

The CSS:
pre{background: rgb(248, 248, 248); border-color: rgba(17, 17, 17, 0.0392157) rgba(17, 17, 17, 0.0392157) rgba(17, 17, 17, 0.0392157) rgb(32, 142, 214); border-radius: 4px; border-style: solid; border-width: 1px 1px 1px 5px; box-sizing: border-box; clear: both; color: #4d4e53; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 28px; margin-bottom: 30px; overflow: auto; padding: 15px; tab-size: 4; word-break: break-all; word-wrap: normal;}

 Here the test code from jsfiddle (CSS and HTML) section tabs.


I Hope That Code may help you

0 Response to "Simple CSS for Styling pre html tag"

Post a comment

Bila Ada posting yang kurang, atau error atau yang lainnya, silahkan tinggalkan komentar agar artikel/post di perbaiki.
Jangan Lupa Cek Box "Notify Me" agar tahu komentar kamu dibalas oleh saya.

If there are any posts that are missing, or error or anything else, please leave a comment for the article / post to be fixed.
Do not Forget Check Box "Notify Me" to know our comments replied by me.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

loading...