Show Mobile Navigation

Wednesday, July 06, 2016

, , , ,

How to Style Pre Tag in HTML Using CSS

Oyetoke Tobi - Wednesday, July 06, 2016

The <pre> tag can be defined as a preformatted text. By default, text in a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks. 

The <pre> HTML tag can also be used to style a code snippet, just like Syntax highlighting.

The <pre> tag are mostly used for Syntax Highlighting with the use of JavaScript and CSS. We are doing something similar to it, but we won't be using JavaScript.

So we are going to use the CSS class selector to style any <pre> tag that has a specific class name.

For Example 

We'll be using "code" as the class name.

<pre class="code"> 

<!DOCTYPE html>

<html>

<head>
<title>How to Style Pre Tag in HTML Using CSS ~ ScholarsGlobe</title>
</head>

<body>
<p>How to Style Pre Tag in HTML Using CSS ~ Test</p>
</body>

</html>

</pre>

Note: We are using the class selector in order not override any existing <pre> tag. Normally, we could just use the <pre> tag directly with out using the class selector. This will also be useful if you would like to style different programming language with different style methods all you have to do is to change the class name to the name you would like to use to identify a programming language. So below is an example of how you can style the <pre> tag class selector with CSS
 
.code {  
    text-align: left;
    border: 1px solid #2f6fab;
    color: #000;
    background-color: #f9f9f9;
    line-height: 1.1em;
    font-family: monospace;
    padding: 20px 10px 20px 10px;
    margin-bottom: 10px;  
} 
And in case you would like to use the pre tag directly, you can use the snippet below:
 
pre {  
    text-align: left;
    border: 1px solid #2f6fab;
    color: #000;
    background-color: #f9f9f9;
    line-height: 1.1em;
    font-family: monospace;
    padding: 20px 10px 20px 10px;
    margin-bottom: 10px;  
 } 


0 comments:

Post a Comment