What is HTML and CSS?
Just like the maple leaf is synonymous to Canada, HTML and CSS have become staples in website development.
The starting point for all web creators is to get into Hyper Text Markup Language (HTML). It formats what they want to be displayed on the webpage and gives the webpage an early concept design of what it will look like in the future. On the other hand, Cascading Style Sheet (CSS) is all about the presentation of the website. If it was not for CSS, the process of designing more elaborate webpages would be a much bigger headache.
A nice way of interpreting the two languages is thinking of the webpage as a person. The HTML component fills the role of our skeleton, supporting and carrying the weight of our body, while the CSS component is like our skin and clothing, bringing some appeal to our appearance.
HTML: From the Beginning
It is quite interesting to see how bare-boned websites used to appear. The generally recognized first website made by Tim Berners Lee gives us a good template of a website made mainly with HTML. As you can see from Tim Berner Lee’s website, HTML can fill a webpage with headers, text, tables, lists, photos and hyperlinks [1].
HTML is a language used to create electronic documents that are interpreted by internet browsers. The language is very structural as in each part of the document is broken up with several tags. For example, to create the title of the webpage, you must declare a <title> tag in order for it to form [2]. This language is very important, for it is responsible for most of the interaction a user makes with a website.
Any text editor will do (even notepad) but it is best to install a more advanced text editor to program with HTML. Using a good text editor can provide many quality of life improvements when programing such as granting faster access to file/folder and easier inclusion with plugins. Vim is a free text editor that has been around for decades which still proves reliable in this day and age [3]. There are plenty of free courses online as well to learn from, like Codecademy, which is a great tool for beginners.
CSS: The Finishing Touches
Since the release of HTML, several web writers have complained about the lack of design options available for web pages. Simple tasks like changing the font and colors of elements did not exist during this time in HTML. Hakon Wium Lie noticed people’s criticism and later proposed the idea of Cascading HTML Style Sheets to the world [4].
One can definitely design a stunning website now with just HTML, but things could be so much easier by utilizing CSS. Once a format is created in CSS, it can be imported into an HTML and be recalled multiple times without having the need to recreate it all over. With CSS you will have the ability to add backgrounds, change font size, add colors and change text layout; a much larger array of attributes that HTML can’t even compare with [5].
For those who wish to learn CSS, it is highly recommended to learn HTML first. In order to implement CSS code, it is required to have an existing webpage. For those who are worried about learning a whole new language, don’t worry, as the two languages share many of the same elements.
Conclusion
Learning a new language can be challenging for some, especially for beginners who have done nothing of the sort before. Still, these languages are nice-to-know insight as you can find some components of it integrated with almost everything we do. Having some knowledge in programing in general will never hurt your career and HTML/CSS are a wonderful start to that knowledge. To wrap things up, let's look at the following code that will show the basic connection between HTML and CSS.
On the left is code written in HTML which controls basic formatting and all text that appears on screen. On the right is the CSS code which brings colours, adjusts margins, changes font and font size, and creates borders for the end user to see. Below is the output for the code; the left is through only HTML and the right is the combination of both languages. As we can see with the example below, HTML is very bleak without its artsy counterpart. I hope that this newsletter helps bring insight to learning this amazing language.
References
[1] World Wide Web Consortium. (n.d). HTML & CSS. Retrieved from https://www.w3.org/standards/webdesign/htmlcss
[2] Tech-FAQ. (n.d). How Does HTML Work?. Retrieved from http://www.tech-faq.com/how-does-html-work.html
[3] KeyCDN. (n.d). A Collection of the Best Text Editors in 2018. Retrieved from https://www.keycdn.com/blog/best-text-editors
[4] World Wide Web Consortium. (2016). A brief history of CSS until 2016. Retrieved from https://www.w3.org/Style/CSS20/history.html
[5] TutorialPoint. (n.d). What is CSS? Retrieved from https://www.tutorialspoint.com/css/what_is_css.htm
