We have learned that web servers respond to our requests by sending back various types of data.
HTML stands for HyperText Markup Language. We can think of HTML as the content of our webpage, plus some extra information which tells the browser about the content.
For example, it may tell the browser how the content is structured, or how to get from the current web page to another web page, or how the page should be displayed. In the next few lessons we’ll start learning how to write our own HTML. For now the important lesson is:
HTML is the content of our webpage formatted in a way that web browsers can understand
CSS is the next most important type of data returned by a HTTP Response.
CSS stands for Cascading Style Sheets. This is a special display language which tells the web browser how to present the content in the HTML. This is what makes websites look pretty (or ugly!).
Again, we will learn how to write our own CSS later in this course, but for now the important lesson is:
CSS tells web browsers how to display the HTML content
HTML without CSS
It is possible to have HTML without any CSS. Web browsers are perfectly happy to display just HTML, or even just plain text.
HTML also contains several ways to display text in different ways, e.g. font size, color, bold, italic, even very simple animations. However, in modern web development it is very bad practice to change your display using HTML.
This is because CSS has many advantages over HTML display:
1) CSS is much more powerful than HTML for styling
2) CSS can be re-used across many pages on your site
3) It is much easier to change your site if all the display logic is in one central place: your CSS files
It can be very very difficult to make changes to a site when some display logic is in HTML and some is in CSS, so it is considered good practice to keep your display logic purely in CSS, and keep HTML purely for content.
This is part of the software development practice known as separation of concerns – making sure that each part of your web site is responsible for only what it should be responsible for.
HTML: Content – a markup language
CSS: Display – a markup language
As we progress we will understand more how each of these types of response is generated, and how the browser knows how to request all of this data from the web server.