USING CSS IN WIX
Learn how to use Codepen Pens and other CSS elements in Wix.
Only use scripts you have permission to use. If you are using anything for commercial purposes make sure you are using it only if it has a license that allows it.
Basic HTML Structure:
So let's get you comfortable with a very basic HTML structure first:
The very first tag is <!DOCTYPE html>, which is just a way of telling the browser we are using HTML5 - the latest version with all the bells and whistles.
After that is the <html></html> tag which actually contains all of our HTML. You might also see this referenced to as markup - HTML stands for HyperText Markup Language. Notice that the beginning of a section in HTML is marked by some tag in <> and is closed off with </>.
Next up is <style></style>. This is where our CSS will go.
The <body></body> is for our purposes just where the script and actual HTML elements from the HTML Codepen tab will be inserted.
Of course there are many fantastic online resources like MDN Webdocs and W3 Schools if you're interested in learning more about any of these, but this tutorial is for the dead simply copy paste method.
Placing the CSS:
In Codepen, the middle column of script usually contains the CSS. If you see that the text next to the little cog settings icon says CSS only, then all you have to do is copy and paste everything from that column to your style tag:
If, on the other hand, the text next to the cog says something like CSS (LESS), then you have two options. The first option is to click on the Change View button, and select the .css option in the Direct Code Links section. Then you can copy and paste that.
However, if this is not an option or if it does not work as expected, you can import whichever version of CSS is inside the parentheses by going directly to the developers' website for the instructions. For example, for LESS you would do this:
<link rel="stylesheet/less" type="text/css" href="styles.less"/>
Then you can copy and paste what is inside the CSS column into your style tag.
Placing the JS:
Otherwise, in the case of JQuery, look for the .js file in the Change View tab. If you need to, you can import like this:
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
In this case, you can leave the body's script tag as-is:
Placing the HTML:
Everything in the HTML section on the left, paste between the end of the script and the close of the body tag:
If the HTML tab contains HAML or Pug, you can find a converter online to make it into pure HTML, but it is possible it will not work depending on what that particular environment the Pen is intended for.
And that's it! Quick and easy. If the maker of the Pen embedded a link to support their work, consider donating for the hassle they saved you!