The Three Types Of CSS: A Beginner’s Guide
I’ll be honest, I was a complete novice when I started the software engineering bootcamp. I’m not being self-depreciating, I knew even less than Jon Snow. Coding bootcamps move at a speed that would make most F1 or NASCAR drivers reach for the brakes and because of this, I made a habit of taking processes which I was introduced to and repeating them without exploring if there were other ways or methods…simply because there was a lot to learn and I had to keep up!
One of those aforementioned “processes” was CSS and my CSS introduction was as “external styles” or “external CSS”. I assumed it was the only way to style and display HTML till I watched an unrelated YouTube vid that had CSS in the most bizarre, unusual way! The CSS was in the HTML tag!, also called “inline CSS”. “What’s this madness?”, I thought. So, I did some much needed retrospective research and here’s a break down of the different ways to use CSS.
CSS (Cascading Style Sheets) is a stylesheet language that can be used to style a HTML document. It defines the appearance and style of the website. It controls the fonts, colours, spacing and can even control the structure of a webpage.
There are three ways to implement CSS:
- Inline styles
- Internal styles
- External styles
Inline Styles
For Inline styles, the CSS is written directly in the HTML tag. Whatever CSS is written will only affect this HTML tag and not the entire page.
<p style="color:teal;">Hi, My name is Nemo!</p>This style can be useful if you have very minimal CSS to add to a document, you wouldn’t need to create a separate CSS file. However, if you need to apply CSS to your entire document, this is can be very time consuming and for that reason, should be avoided. Having to style multiple HTML tags will result in long lines of code which will lengthen the load time for your page and make maintaining the website messy.
Internal Styles
Internal styles requires that a <style> tag is added in the <head> section of the HTML document.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: white;
}
h1 {
color: red;
padding: 60px;
}
</style>
</head>
<body>
<h1>CSS - Brazilian Rock Band </h1>
</body>
</html>If you’re styling a single page, this is for you. If not, then this could be time consuming. Less time consuming that the Inline style but still requires a lot of work.
External Styles
This is how I was introduced to CSS and the style most modern websites use. This requires that the CSS is written in a separate file and then attached to the different web pages. In the main file, you’ll need to add a <link> tag which will connect the page to the CSS file, like below:
<link rel="stylesheet" type="text/css" href="css/style.css">In the .css file, you can code the desired CSS like below (example):
.Unauthorised-body {
background: black;
}.Unauthorised-home-page {
display: flex;
justify-content: space-between;
align-items: center;
height: 100vh;
width: 100vw;
overflow: hidden;
}
This style is the most popular as it leaves your code cleaner, it’s easier to maintain and depending on the complexity of your site, you can create one .css file and apply it to multiple pages.
