Table of Contents
It’s day 7 of learning WordPress in a month, or WPinonemonth and we are going to take a quick look at what the different code languages mean. You may have heard HTML, CSS or JAVA being mentioned, but never really know what they mean. Well this is an explanation from someone who wasn’t that clued up himself until a few years ago.
HTML vs CSS – What’s the difference between HTML and CSS?
Before we try to compare them, if that is even a thing, let’s break down what it all means. HTML vs CSS? How about what even is HTML?
What is HTML?
HTML stands for Hypertext Markup Language. It’s the external framework of the world wide web. It’s what builds the sites you look at including this. If you imagine HTML is the builder. It is a sequence of instructions that puts together the files, text, features and graphics of a website that exist in other code styles.
What is CSS?
Cascading Stylesheets were a solution of ease that begun to be used more and more in the late 90s and they are a file featuring a set of design rules that the HTML page will pull depending on specific cues. The clue is in the name of what they are – stylesheets.
Rather than manually typing in font sizes each time you add a new paragraph of text or a heading, the stylesheets will tell the HTML page what to display depending on predefined rules.
A block of CSS will look something like this:
If you imagine the HTML is the builder, then the CSS is the raw materials and blueprints. In the example block above you can see a number of instructions for what the HTML should show depending on what the item is. Eg: if Span style A or B the background will be yellow. It’s better to write this once in the CSS sheet than writing background-color yellow for every instance.
Are there different types of CSS?
Yes, there are 3 types of CSS – Cascading Style Sheets, which I will explain in brief here, although there is a better description of these at Hostinger on the 3 Types of CSS.
- Internal CSS
- External CSS
- Inline CSS
What is Internal CSS?
Internal CSS is where you would add your HTML page’s styles within the main file document. In the Head section of an HTML page – as seen when you right-click and hit view source.
Pros: Well it’s easy isn’t it. Save you faffing about, you just drop the CSS along with the page you want to tweak.
Cons: It’s extra script and whitespace in your page you want the web to pull up. This can take longer for a page to load and render (paint) and can see you penalised by Google for page performance. That said, if you have a massive CSS file externally linked and it requires the site to crawl that entire file to find your relevant bit – it’s horses for courses.
What is External CSS?
The very opposite of internal CSS, external CSS lets you call your styles with the use of a string of code in the ‘head’ of your template file. It will look something like this:
As you can see in the image above courtesy of the the Hostinger article mentioned above, this type of html code is a request to pull the CSS information for this site from an externally located file. That means the CSS is not in the immediate page load code.
Pros: This structure helps a page load faster
Cons: Can be a little more involved when making individual pages, by making sure each page or each CSS styled section is correctly linked to the correct CSS file. Also if the CSS file is so large, then even having it external to the HTML of the page, can still create delays.
What is inline CSS?
Inline Style CSS is where you can allocate CSS to one specific block or passage. This is done by calling a certain code or reference tag based on what that block is. Maybe the block is called ‘rich-text-container-1’. Inline CSS styles would allocate custom styling to that specific block and not the whole page.
Pros: Inline CSS styles allow for variation within a page, great for customising the page view for different screen sizes or for whatever the need.
Cons: This can create multiple style sheet calls on page load and can slow page performance down. We know that slow page speeds can hurt SEO so the use of them can be counterproductive
So what is the best CSS to use?
The best CSS to use for your page is the one that works for your users. If you need inline styles to offer them a better user experience, it’s likely the bounce rate will be lower and the dwell-time on-site longer. This adds up to strong positive ranking signals to Google. So while limiting the use of inline styles for example can be suggested by tools such as Google Page Speed insights, at the heart of any good website, is a focus on user experience.
Backlinko a superb online resource for all things Google, have a feature piece on Dwell-Time: It’s worth a look:
If you can maintain user experience, and avoid multiple style sheet calls, to result in faster page load, then, of course, that is always preferable. But there is no right or wrong. Each site is different. Focus on UX and all will be right in the end. Want to find out more about UX and how it relates to conversion rate optimisation?
HTML vs CSS Do You Need To Use CSS?
I’m going to talk in the first person here. When I was a Uni student part of my 1st-year assessment was to build a website using HTML. CSS was new, and we hadn’t been taught that yet. This meant, we had to build a functional utility site, or e-commerce platform only using HTML.
I decided to build a music site. This site would allow people to sample short clips of music and order them. It was pretty good as I recall and I kick myself for not saving the code and publishing it. Then keeping it for posterity. It for nothing more than to look back on and laugh.
I basically built Tower Records or HMV online. I think I did it because at the time HMV didn’t sell audio music files online and for those outsides of the UK, HMV was a major brand of record stores. ‘Record Stores’ – showing my age now!
The site was tables built within tables within rows and columns and tables. There was a lot of HTML going on, which meant page load would have been appalling. There was just too much code. A lot of this code would have been duplicating styles and colours and font sizes.
Imagine if I could write one page of code that gave the instructions to call a specific style every time I gave a 10 character label. It means The same CSS file of code would be used for multiple locations across the site, and avoid me having to write pages and pages of unnecessary repetitive code within the rendered page.
Sorry, I’m using the word ‘Rendered’ a lot and I note I haven’t explained what ‘To Render’ means.
What does Rendering Mean?
Rendering is the act of photosynthesising visually the data in a computer model.
In normal-person speak, it means to paint the screen with the information it has in text and code form. You give it some code based instructions, it then paints the screen for the reader/browser to see.
Back to HTML vs CSS | Reducing Page Size
So back to HTML vs CSS, and the difference between HTML and CSS. By making use of CSS, you can reduce the code size of a website or program by defining a set of rules to play by, each time a specific short request is given.
It could be that you want your headers on your page to be smaller than normal. Some templates you use will have predefined Headers. H1, H2 and so on. Perhaps you want your H2 to be 16 pixels in size.
Rather than typing this every time you use an H2:
< h2 style=”color: black; font-size: 16px;”>Heading< /h2 >
You could instead just use your
< h2 >Heading< /h2 > 36 less characters of code each time. That would add up.
NOTE: I have added spacers in the H tags above – to render them non-working, so it doesn’t confuse the hell out of my blog editor. It seems to want to use the code to make headings. I just want to show you the difference in text quantity.
The same may be had for a type of button you use, or smaller header, or type of body text. One style sheet referenced in the head of the page, will instead just use the CSS defined styles.
This can add up to a lot of avoided code and therefore a lighter page size. So while HTML is necessary and it will never lose the ultimate battle of HTML vs CSS, CSS makes HTML load faster and potentially rank better.
Importantly, faster load times, mean a better user experience. That’s the difference between HTML and CSS.
So where does Javascript come into all of this?
What is HTML Javascript?
Javascript or abbreviated as JS, is the language on the page that controls how dynamic elements behave. That may not seem hugely clear. So I mentioned HTML is the builder and CSS is the blueprint or raw materials (kind of), well JS or HTML javascript is the tools.
When you go on a website and you fill in a widget or perhaps you’ve seen our SEO Calculator you have made use of a Javascript tool. While CSS determines how objects look, and HTML determines where and in what order they appear, JS determines if the tool has any pulse.
In short, it makes websites engaging. JS is behind interactivity and while it’s not the only tool of code that does this, it is the most commonly used one.
What does Javascript Look Like?
You may recognise Javascript if you see code like this below. It is strings of text that suggest actions to do, depending on criteria and input.
Javascript not only makes for more interesting sites, just as where we debate HTML vs CSS, from a page performance perspective, JS can help too.
How?
Imagine if you downloaded a plugin and it was loading on every page even when it wasn’t needed? Javascript can speed up your site’s load, by telling the site to not run code if the page doesn’t require it. We call that an EndIf or ElseIf statement.
Javascript has a ton of practical uses when used correctly. It is also probably the more complex of the three code languages mentioned to get to grips with. Where this WordPress for beginners guide will go is to start with demonstrating the basics of HTML, followed by CSS and then touching on a little Java. It would take more than a month to master that.
But – by understanding the purpose of it, it makes finding pre-made JS resources more simple to use and implement. That is the beauty of the web and page building is that the chances of you building something that hasn’t been done before are slim to none. Code depositories such as Github are a trove of ready to go code snippets, that simply requires you to understand what you’re looking for and where to place it.
Basically, there are code sites that have done the learning for you. Good eh?
What are the benefits of Javascript?
Pros: Javascript lets your site be more than just a brochure, but an engaging and useful web resource. It can help speed up your site and even the work you do, by using it to populate pages with text based on pre-defined requests.
Cons: It can be a sluggish bit of code and as it requires a logic problem to be solved if placed incorrectly or on unnecessary pages, can contribute to poor page performance. Think of the issues sites have with too many Plugins or Apps. This is generally an issue with too much JS.
HTML vs CSS vs Javascript Who Wins?
Well as you can imagine, they all win. HTML vs CSS was declared a no-contest as Javascript ran a query to determine that IF both codes are used, then declare a draw.
Damn you Javascript and your heavy coded usefulness.
I hope this day 7 of our WP in one month guide has given you a little more clarity on what each does and how they work. There’s a lot to learn still, but simply understanding the purpose of each makes it a little easier to know what to tweak and where to tweak it.
Where will I use HTML, CSS and JS on a WordPress site?
A brief snapshot of where you will see the code most often for tweaking, I’ll place below. It’s not going to be bang on 100% of the time, but it will help you find what you need most of the time:
- HTML – Page Level – Block Level – Most WordPress pages and posts let you edit HTML at the editor level
- CSS – Pagebuilders and going to theme editor look for .CSS files
- Javascript – You can place JS tools directly into page builder blocks such as on Elementor, but you will see much of your site’s JS at the Functions.PHP file in your theme editor section
You will see these code languages in a host of other places, but these are just some of the most common areas you will run into them. That list is to highlight that and nothing more, before I am torn to shreds by die hard Code Cops.
That’s it for our Day 7 – HTML vs CSS vs Javascript
David at Deathground
