What is HTML and CSS
HTML stands for Hypertext Markup Language, this is the language used to create the content of our email.
Our email is made up if a number of “HTML elements”. Mostly these elements are made up of an “opening tag” and a “closing tag” with some content between. For example lets look at the below code.
<h1>Hello World</h1>
Here we have an opening tag <h1> this is an “h1 element” which is a level 1 heading, the main heading of the email. Then some content Hello World this is the text that will appear on the screen. Finally we have our closing tag </h1> to say this is the end of this element.
Most HTML elements follow this structure of the element name between triangular brackets to open <element> then the same thing with an added / to close </element>.
There are some exceptions to this where some elements use “self closing tags”, the most common one we’ll be looking at is an image tag which is written as.
<img src="my-cat.jpg" alt="A black and white cat" />
With self closing tags the / at the end is optional.
On this example you can also see src= and alt= these are “HTML attributes”, these can be added to the opening tags of elements to add extra setting such as style= which we’ll cover a little below.
CSS stand for Cascading Style Sheets, this is the language used to style the content of our email.
These styles are applied to the HTML elements we’ve created to make them look how we want. There are 3 ways to set CSS;
- Linked styles - where the CSS is stored in a different file then linked to our HTML file using a
<link>element. This is not often used in email but is the most common way of doing things for websites. - Embedded styles - where the CSS is stored in a
<style>element in the same file as the HTML. - Inline styles - where the CSS is applied directly onto an HTML element inside a style attribute
style=""
CSS is written as a series of “properties” and “values”. For example lets look at the below code.
text-align: left;
Here we have the property of text-align followed by a colon : then the value left followed by a semi-colon ;. This code will set the text of this element to align to the lefthand side of the element.
The property always comes first and any spaces will always be replaced with a dash -. The colon is used to split the property from it’s value. Depending on the property used the value can take a wide range of formats, then the semi-colon is used to end the statement.
<h1 style="text-align:left; color:red;">Hello World</h1>
Here we have our h1 elements, with a style attribute setting the text to be aligned to the left and the color to be red.
Think of it like building a house, the HTML is like the structure, the walls, windows, doors, etc. You put them together and you have a house. Then the CSS is like the decoration; the paint, the carpet, the curtains, this is what makes the house looks and feel like it’s yours.