WMI

Website Management Indonesia

0%

Simple CSS for Styling pre html tag

Posted on Edited on In Disqus:
Styling pre> tag using simple css code Description of 
 tag on HTML The HTML 
 tag is employed for indicating

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
Adblock detected

We have detected that you are using adblock in your browser

×

We have detected that you are using adblock in your browser on page Simple CSS for Styling pre html tag you've visited.

Our website is made possible by displaying online advertisements to our visitors.

    Our advertiser
  • Google Adsense

Please consider supporting us by disabling your ad blocker. Thank you.