Creating Stylish Code Snippets: HTML and CSS Guide

By Faraz - September 23, 2023

Learn how to create elegant code snippets using HTML and CSS. Improve your frontend skills with our step-by-step guide.

Creating Stylish Code Snippets HTML and CSS Guide.jpg

Read Also Create a Secure React JS Login Form with Validation.webp

Create a Secure React JS Login Form with Validation (Source Code)

Code snippets play a vital role in the world of web development. They are bite-sized pieces of code that can be easily shared, understood, and reused. Whether you're a seasoned developer or just starting your coding journey, knowing how to create code snippets using HTML and CSS is a valuable skill.

In this comprehensive guide, we'll take you through the process of crafting code snippets that are not only functional but also aesthetically pleasing. With the right HTML and CSS techniques, you'll be able to present your code in a way that enhances readability and user experience. Let's dive in and unlock the art of creating stylish and effective code snippets.

Source Code

Step 1 (HTML Code):

To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our code snippets.

After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.

Here's an explanation of each part:

1. <!DOCTYPE html>: This declaration at the beginning of the document specifies the document type and version of HTML being used. In this case, it's HTML5.

2. <html lang="en">: This is the opening tag for the HTML document. The lang attribute is set to "en," indicating that the primary language of the document is English.

3. <head>: This section contains metadata about the webpage, which is not visible to the user. It typically includes information like the title of the page, character encoding, and external resources (such as stylesheets and scripts).

<title>Code Snippet</title>: Sets the title of the webpage to "Code Snippet." This title is displayed in the browser's title bar or tab.
<meta charset="UTF-8" />: Defines the character encoding for the document as UTF-8, which supports a wide range of characters and symbols, including those from different languages.
<meta name="viewport" content="width=device-width" />: This meta tag is used for responsive web design. It sets the viewport width to be equal to the device's width, ensuring that the webpage adapts well to different screen sizes.
<link rel="stylesheet" href="styles.css" />: This <link> tag links an external CSS stylesheet named "styles.css" to the HTML document. CSS is used to define the styling and layout of the webpage.

4. <body>: This section contains the visible content of the webpage.

<div class="wrapper">: This is a <div> element with the class "wrapper." It is used to group and style content within it.
<h1>Here's Your Code Snippet!</h1>: This is a level 1 heading ( <h1> ) that displays the text "Here's Your Code Snippet!" as a prominent title on the page.
<p>Click below to select all. Click again to clear so you can select a portion of the snippet.</p>: This is a paragraph ( <p> ) containing some explanatory text.
<pre><code tabindex="0">function wall(x, y, width, height) { return Matter.Bodies.rectangle(x, y, width, height, { chamfer: { radius: 10 } }); }</code></pre>: This part contains a <pre> element with a <code> element inside it. It is used to display a block of code with fixed formatting, preserving whitespace and line breaks. The tabindex attribute allows keyboard navigation to this code block. The code itself appears to be a JavaScript function definition that creates a rectangle using the Matter.js library.

This is the basic structure of our code snippets using HTML, and now we can move on to styling it using CSS.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Code Snippet</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="wrapper">
      <h1>Here's Your Code Snippet!</h1>
      <p>Click below to select all. Click again to clear so you can select a portion of the snippet.</p>
    <pre><code tabindex="0">function wall(x, y, width, height) {
      return Matter.Bodies.rectangle(x, y, width, height, {
        chamfer: { radius: 10 }
      });
    }</code></pre>
    </div>
  </body>
</html>

Read Also

Simple and Amazing 5-Star Rating with HTML and CSS

Step 2 (CSS Code):

Once the basic HTML structure of the code snippets is in place, the next step is to add styling to the code snippets using CSS.

Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our code snippets. Let's break down each part:

1. *, *::before, *::after: This is a CSS selector that targets all elements (*), as well as their pseudo-elements ::before and ::after. The purpose of this selector is to set a common property for these elements.

box-sizing: border-box;: This property ensures that when calculating the size of an element, both its content and padding are included within the specified width and height. It prevents the content from overflowing its container.

2. html, body: These selectors target the HTML and body elements of the webpage.

height: 100%;: Sets the height of both the HTML and body elements to 100% of the viewport height, making sure that they take up the entire vertical space of the viewport.

3. body: This selector targets the body element specifically and applies several styles to it.

display: grid;: Sets the display property to "grid," which allows for easy layout control using grid-based positioning.
align-items: center;: Centers the content vertically within the body element.
justify-items: center;: Centers the content horizontally within the body element.
margin: 0;: Removes any default margin on the body element.
color: #5e3254;: Sets the text color to a shade of purple (#5e3254).
background-color: #dbe0e4;: Sets the background color of the body to a light grayish-blue (#dbe0e4).
text-align: center;: Aligns the text content of the body to the center.
font: 1.25rem/1 'Rubik', sans-serif;: Specifies the font properties for the body text. It uses the "Rubik" font or a sans-serif fallback if "Rubik" is not available. The font size is 1.25rem, and the line height is 1.

4. .wrapper: This selector targets an element with the class "wrapper."

width: 650px;: Sets the width of the element to 650 pixels.
max-width: 100vw;: Ensures that the element's maximum width does not exceed the viewport width to make it responsive.
padding: 5px 20px;: Adds 5 pixels of padding to the top and bottom and 20 pixels of padding to the left and right of the "wrapper" element.

5. h1: This selector targets all <h1> elements.

margin: 0 0 10px;: Sets the top margin to 0, right margin to 0, and bottom margin to 10 pixels.
font-size: 2.5rem;: Sets the font size of <h1> elements to 2.5rem (which is relative to the base font size).

6. p: This selector targets all <p> elements.

margin: 0 0 20px;: Sets the top margin to 0, right margin to 0, and bottom margin to 20 pixels.
line-height: 1.25;: Sets the line height of <p> elements to 1.25 times the font size, creating some spacing between lines of text.

7. pre: This selector targets all <pre> elements.

margin: 0;: Removes any default margin on <pre> elements.
font: 1rem/1.5 'Roboto Mono', monospace;: Specifies the font properties for <pre> elements. It uses the "Roboto Mono" font or a monospace fallback, sets the font size to 1rem, and the line height to 1.5 times the font size.

8. code: This selector targets all <code> elements.

-webkit-user-select: all; user-select: all;: Allows the content within <code> elements to be selectable by the user. This is particularly useful for code snippets.
display: block;: Sets the <code> elements to be block-level elements.
padding: 20px;: Adds 20 pixels of padding around <code> elements.
border: 2px dashed #c9baa7;: Applies a 2-pixel dashed border with a color of #c9baa7 to <code> elements.
color: #31808c;: Sets the text color within <code> elements to a shade of teal (#31808c).
background-color: #f5f4ef;: Sets the background color of <code> elements to a light grayish-yellow (#f5f4ef).
text-align: left;: Aligns the text within <code> elements to the left.
font-family: inherit;: Inherits the font family from the parent element.
overflow: auto;: Adds scrollbars to the <code> element if its content overflows its container.

9. code:focus: This selector targets <code> elements when they receive focus (e.g., when clicked).

border: 2px dashed #31808c;: Changes the border color to a solid teal (#31808c) when the <code> element is in focus.
outline: none;: Removes the default focus outline.
animation: select 100ms step-end forwards;: Applies a CSS animation named "select" to transition the element to a selectable state.

10. @keyframes select: This CSS rule defines a keyframe animation named "select."

to: Specifies the final state of the animation.
-webkit-user-select: text; user-select: text;: Allows text selection within the element.

This will give our code snippets an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  display: grid;
  align-items: center;
  justify-items: center;
  margin: 0;
  color: #5e3254;
  background-color: #dbe0e4;
  text-align: center;
  font: 1.25rem/1 'Rubik', sans-serif;
}

.wrapper {
  width: 650px;
  max-width: 100vw;
  padding: 5px 20px;
}

h1 {
  margin: 0 0 10px;
  font-size: 2.5rem;
}

p {
  margin: 0 0 20px;
  line-height: 1.25;
}

pre {
  margin: 0;
  font: 1rem/1.5 'Roboto Mono', monospace;
}

code {
  -webkit-user-select: all;
  user-select: all;
  display: block;
  padding: 20px;
  border: 2px dashed #c9baa7;
  color: #31808c;
  background-color: #f5f4ef;
  text-align: left;
  font-family: inherit;
  overflow: auto;
}

code:focus {
  border: 2px dashed #31808c;
  outline: none;
  animation: select 100ms step-end forwards;
}

@keyframes select {
  to {
    -webkit-user-select: text;
    user-select: text;
  }
}

Final Output:

Creating Stylish Code Snippets HTML and CSS Guide.gif

Read Also Creating a QR Code Generator with HTML, CSS, and JavaScript.jpg

Creating a QR Code Generator with HTML, CSS, and JavaScript (Source Code)

Conclusion:

Incorporating HTML and CSS into your code snippets not only improves readability but also elevates the overall user experience. Start applying these techniques to your projects and watch your frontend development skills soar.

By following this guide, you'll be well-equipped to create code snippets that are not only functional but also visually appealing. Happy coding!

Code by: Will Boyd

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: html, css, code snippet, web development, frontend design, source code, creating code snippets in html and css, how to use html and css for code snippets, stylish code blocks with css

End of the article

Latest Post

Creating a Responsive Bootstrap Dashboard: Source Code Included

by Faraz - May 14, 2024

Learn how to design, customize, and implement interactive Bootstrap dashboards with our comprehensive guide. Source code included for easy development.