This short tutorial is for anyone that is interested in starting to use HTML and CSS and is looking for a quick guide that explains the basics.
Just to be clear this guide does not explain HTML and CSS in full depth otherwise we would be reading an entire book here. What we wanted to do is to explain is the basics of how to create an HTML file, a CSS file and how to make them work together.
After this guide, you will be able to read more tutorials and add more features to your HTML and CSS files slowly.
At the end of this tutorial, you will have made an HTML file that looks like this:
Do not use word processing software, such as Microsoft Word or OpenOffice, because they produce files that a web browser can not read. For HTML and CSS, we want simple text files.
So How Does it Work?
First The browser receives instructions from (HTML, CSS …) and interprets it by displaying (correctly or not) text, images, videos, etc…
As you know we have numerous different browsers and each one of them has different good and bad qualities compared to others. The most well-known currently are certainly Google Chrome, Firefox and Microsoft Edge
So lets have a quick overview of HTML and CSS:
HTML (HyperText Markup Language) made its first appearance in 1991 when the Web was launched actually. The role of HTML is to manage and organize the content and define the type of data we want to display on the screen.
A little bit of history:
- HTML 1: This is the very first version created by Tim Berners-Lee in 1991.
- HTML 2: This version of HTML appears in 1994 and this time the rules are established by an organization, called W3C.
- HTML 3: this version dates from 1996 and there are several additions (tables, applets, scripts, …)
- HTML 4: appears in 1998 and offers several improvements (including the use of frames) and most importantly, this version allows to use CSS: the form of the page does not have to be mixed with its content.
- HTML 5: Is the latest version for us right now
CSS (Cascading Style Sheets, also called Stylesheets) allows us to manage the appearance of the data: color, size, positioning … It made its first appearance in 1996.
A little bit of history:
- CSS 1: since 1996, we have the first version of CSS. It lays the foundation for this language that allows you to present your web page, such as colors, margins, fonts, etc.
- CSS 2: Appeared in 1999 this version adds many options.
- CSS 3: the latest version, which brings features like rounded borders, gradients, shadows, flex, etc.
THE SOFTWARE TO USE
But at the end of the day, HTML and CSS code is just a sequence of data: a very codified sequence of alphanumeric orders but a computer can in no way “understand” the code that we write in HTML and CSS.
For this first tutorial, we recommend using simple tools like Notepad for (Windows), TextEdit (Mac) or KEdit (KDE). Once you these principles, you feel comfortable you can easily switch and use more advanced tools, or software such as Dreamweaver or ATOM. But, for your first CSS style sheet, it’s best that you do not get distracted by many advanced features.
So open your text editor (Notepad, TextEdit, KEdit, etc., whatever your favorite editor is), start with an empty window and type this: