You have probably heard of The three components of the web (HTML, JavaScript and CSS), but why is CSS even needed
What is it?
CSS stands for cascading style sheets. It is a way to style an HTML document without adding inline style tags (e.g. style=”background-color:…; color:…;”) to all elements on the page that you want to change separately. Cascading means that if the whole document has the colour set to green but a button is set to red, that button will be red but the rest of the document will stay green. This means it is not necessary to set all elements to individually be green if the document is green.
Linking to a CSS file from HTML
To add styling from a CSS file to your HTML page, you need to add this code in your head section:
<link rel=”stylesheet” type=”text/css” href=”yourPathToYourCssFile.css”/>
How does CSS make styling easier?
If you have a big website with multiple pages, styling them all individually may end up being a boring copy-and-pasting task.
CSS solves this problem by making a global file that you can quickly update and have the change reflected across an entire website or even collections of websites.
Some CSS code to style all H1 tags with a font size of 50 could just be:
h1 {
font-size: 50px;
}
rather than adding a style attribute to every single h1 to make this happen.
This makes CSS much more efficient for larger websites and projects, as it means you can grow your website without having to worry about styling every single element.
CSS is a very powerful tool, as you can re-design any type of tag present on your pages and update it once and have it applied everywhere.
You can also use CSS to style an entire page, for example this would make everything blue:
body {
color: blue;
}
Classes in HTML and CSS
Classes are basically a way for you to create custom types of elements to use on your HTML pages. This means that you can go beyond simply styling different tags, and have two types of DIv’s in your document, and for example one would have a dotted border and the other one could have a solid border.
Example HTML code:
<div class=”solid”>Solid border</div>
<div class=”dotted”>Dotted border</div>
Code for your CSS file:
.solid {
border: 5px solid black;
}
.dotted {
border: 5px dotted black;
}
You could also use CSS to create a custom footer in your page:
HTML code:
<div class=”footer”>Your footer</div>
Code for your CSS file:
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: yellow;
color: black;
text-align: center;
}
As you can see from the code above, CSS files are divided into several sections to tell the web browser about each type of element you would like to change the styling of.
Example of a website using CSS
I have used CSS on the Tactile Times website (tactiletimes.org) to make styling the pages simpler and more straightforward.
I have a single ttn.css file (you can call the file whatever you like as long as it ends in .css) which controls styling for all the pages.
Even more fun possibilities
On the Tactile Times website, there is now an appearance section where viewers can choose various aspects of how the page appears to them (background colour, text colour, font size, heading colour and link colour).
This means that there is a CSS file containing all the default appearance options, but people can customize the appearance for all Tactile Times pages viewed on that device.
This uses JavaScript to automatically change style options of pages once they are loaded, and stores preferences in the browsers localStorage so that the preferences are not lost when the page reloads.
Another example of where CSS was useful
The Tactile Times hangman game (https://games.tactiletimes.org/hangman.php) uses CSS to style the interface.
It also uses classes for visible and hidden, which can then dynamically be used to show and hide elements using JavaScript.
It is very easy to set something to be hidden in CSS, you can just use:
visibility: hidden;
to hide something and
visibility: visible;
to show something (this is the default.