Here’s the Complete Guide
This guide contains the main concepts relating to CSS and HTML codes.
HTML and CSS: What Are They?
The acronym HTML stands for HyperText Markup Language. This code is not a programming language per se but, rather, a markup language.
Being a markup language means that HTML code is used in a series of ways to identify the specific elements of a web page. Therefore HTML code can’t be considered a programming language as it’s missing the elements useful for the very act of programming. The task of an actual programming language is making the binary system transforming into a series of actions, while there is no logic behind the markup model, which can thus accurately define the elements of a page.
Indeed, HTML code features tags used to identify the formatting of the content, which can be a chart, text, title or the presence of an object – like an image or audio file – in the page. The tag is usually defined using syntax like <tag name>.
CSS is the acronym for Cascading Style Sheet, a formatting language that not only allows us to separate the content of a page from its structure, but also to define properties which, up to that moment, were available only through HTML code.
HTML and CSS are powerful tools if used at the same time; while HTML defines the content layout in the structure, CSS models its browser or email visualisation.
Table of Contents
How Does HTML Work?
HTML is one of the most commonly-used codes and, as previously mentioned, is not a programming language per se but, rather, a formatting code. It doesn’t include elements typical of programming logic such as cycles, variables, etc.… As a result, every document is standard and must follow a specific structure, for example:
- DTD (Document Type Definition) defines the set of rules and the tags used.
- Tag <html> refers to everything contained in the browser.
- Tag <head> defines the key information for a correct page visualisation
- Tag <body> contains the body of the message.
The basic idea is that when you open a tag, you have to close it once you’ve entered the content. For example, if you want to insert a paragraph into the text, you must begin it with the opening tag <p>, insert the content and end it with the closing tag </p>.
Some tags, however, don’t need to be closed. For example, to insert an image we use <img> or the tag <br> that adds an empty line.
Defining the tag of the attributes that specify the content properties enables us to increase its formatting chances in a web page.
How Does CSS Work?
CSS, on the other hand, defines style sheets – that is, additional properties not present in HTML. There are three main methods to apply CSS to a document:
- Externally – the sheet that contains the CSS information is an external file, attached with a <script> tag
- Internally – all the CSS instructions are added to the website <head> with specific tags (<STYLE></STYLE>)
- Inline – the CSS instructions are inserted as values of the STYLE attribute present in a specific tag. In this case, the CSS rule applies exclusively to the tag it’s inserted into and to any tag it may contain. For example, try to imagine a series of boxes, each one contained in a larger box. A CSS rule can be applied INLINE to the largest box and, if necessary, also make changes to the smaller boxes inside.
Two different application methods are used to develop emails:
- If CSS is applied internally, it’s defined in the head with the <style> tag
- Using the inline method means that it’s applied directly on the tag.
Instead, if CSS is applied internally, all the rules that manage the <body>, <table> and CTA visualisation are defined in the <style> tag. For example:
If you want to know what properties are contained in the <body> tag, just cite the name of the tag which, in this case, is just body. With the use of inline properties, the browser will be able to show all the content elements. This means that the text size will be 16px and the colour will be #0e0e0e. You can also define the class; in this case, the CTA and all its properties will apply only to the elements on which it’s already been defined, and we speak of inheritance. Depending on these approaches, all the properties applied to a parent element are inherited by the child elements; in this case, the CTA class inherits all the elements from the body to then go underwrite.
HTML and CSS: a Single Tool
HTML and CSS can be linked to create a powerful tool that enables you to separate the page content from the visualisation rules, which makes the code simpler, lighter and readable.
Using them together also enables you to make emails mobile-responsive as well as effective, and is suitable for all types of devices.
Any code and front-end enthusiast has to be familiar with HTML and CSS. At Epicode, no degree is required to take the classes that will teach you the right skills to enter the job market. All you need is a computer and reliable Wi-Fi to kick-start your future!
