W3.CSS Code

Welcome to The Coding College, your go-to resource for mastering web design and development! In this tutorial, we’ll explore how to use W3.CSS Code Classes to style and display code snippets effectively on your website. Highlighting code snippets is essential for tutorials, documentation, or any developer-oriented content.

Why Use W3.CSS for Code Styling?

  1. Minimal Setup: No need for additional libraries or plugins.
  2. Clean Design: A simple and elegant style for your code snippets.
  3. Responsive: Code blocks look great on all screen sizes.
  4. Ease of Use: Apply styling with straightforward classes.

1. Displaying Inline Code

To display a small piece of code inline with text, use the w3-code class:

<p>Use the <span class="w3-code">print()</span> function in Python to display output.</p>

Output

Use the print() function in Python to display output.

2. Block of Code

For larger code snippets, wrap your content inside a <pre> tag with the w3-code class:

<pre class="w3-code">
# Python Code Example
def greet(name):
    print(f"Hello, {name}!")

greet("World")
</pre>

Output

# Python Code Example
def greet(name):
    print(f"Hello, {name}!")

greet("World")

3. Customizing Code Backgrounds

Change the background of your code snippet using W3.CSS colors:

<pre class="w3-code w3-light-grey">
# JavaScript Example
function add(a, b) {
    return a + b;
}
console.log(add(5, 3));
</pre>

Explanation

  • w3-light-grey: Adds a light grey background to the code block.
  • You can replace it with other colors like w3-blue, w3-green, etc.

4. Scrollable Code Blocks

For long code snippets, ensure the block is scrollable using w3-responsive:

<div class="w3-responsive">
  <pre class="w3-code">
# HTML Example
<!DOCTYPE html>
<html>
<head>
  <title>Example</title>
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>
  </pre>
</div>

5. Styling Code with Borders

Add borders around your code for better visibility:

<pre class="w3-code w3-border w3-round-large">
# CSS Example
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}
</pre>

Explanation

  • w3-border: Adds a border around the code block.
  • w3-round-large: Makes the border corners rounded.

6. Code with Syntax Highlighting (Manual)

While W3.CSS doesn’t have built-in syntax highlighting, you can achieve it by combining styles and classes.

<pre class="w3-code">
<span style="color:blue;">def</span> <span style="color:green;">hello</span>(name):
    <span style="color:brown;">print</span>(f"Hello, {name}")
</pre>

7. Combining Code with Descriptions

Use a combination of W3.CSS containers and code classes to create tutorial-style blocks:

<div class="w3-container w3-light-grey w3-padding">
  <h3>Example:</h3>
  <pre class="w3-code">
# Python Program
name = "Alice"
print(f"Welcome, {name}")
  </pre>
</div>

Best Practices for Displaying Code

  1. Readable Fonts: Use monospace fonts to ensure the code is easy to read.
  2. Background Contrast: Choose a background color that provides contrast with your text.
  3. Line Breaks and Indentation: Properly format code for clarity.
  4. Keep Code Responsive: Wrap long lines or make blocks scrollable.
  5. Add Borders: Use borders to separate code from other content.

Conclusion

The W3.CSS Code Classes provide a clean and simple way to style and present code on your website. Whether you’re building a coding tutorial or technical documentation, these features ensure your code is both functional and visually appealing.

Leave a Comment