Implementation & Tutorials
Hello, and welcome to the Implementation page! Here, I'll present everything there is to implementing each of the snippets on my page, as well as how to understand and customize them!
The Absolute Basics
Skip this if you know what HTML and CSS are. HTML and CSS are the bare building blocks for all websites on the internet, defining the elements and styling of a page respectively. For all of these examples, you need to link an HTML and a CSS file together, using the HTML element (placed in the "head" section):
<link rel="stylesheet" href="nameofyourcssfilehere.css">,
replacing the filename with your CSS file's name and leaving the ".css" part untouched. Once this piece of boilerplate code is implemented, you need to paste the code labeled under "CSS" anywhere in your CSS file and the code labeled under "HTML" wherever you want it to appear on your website. After that, the code will take effect, appearing wherever you placed it! To put extra duplicates of the element, simply add the HTML code again (or an element of the same type and class), no need to repaste the CSS! But, you may have to do some slight polishing to smooth out the edges.
Comments
Comments are extra markers implemented into code for explaining certain parts of it. Comments are indicated with
<!--THIS IS A COMMENT!--> in HTML and /*THIS IS ALSO A COMMENT!*/ in CSS. Take note of the special characters at the beginning and end of the comment. These tell the browser to not care about the comments.
While you don't NEED to care about them (as they're literally designed to do absloutely nothing), it's best practice to read them, keep their advice in mind, and then clear them when you're done with them as to not clutter up your code with instructions you've already followed.
Class Conflict
So, let's say you've implemented a tweaked element into one of your pages. But, the element doesn't show up correctly! It looks like a duplicate of something you've already programmed! Or, worse, the new class seems to OVERRIDE another part of your website, ruining the whole thing! This is what happens when a class conflict happens; two classes with the same name being defined in the same page! To circumvent this, change the class name of the tweaked element to something you haven't used before.
<p class="CLASSNAME"> (keep the quotes) is where it is in HTML, and .CLASSNAME {...} is where it appears in CSS.