Adding the CSS Exercise

[00:00:00]
>> Rodriguez: When you're styling, let's say a website, there's a couple of places you can add that CSS. All right, you can link that style sheet, which is probably the most common practice so that those there's that separation of concerns. You have your HTML file, you have your CSS.

[00:00:14]
You don't want to have to rewrite or repeat that CSS across multiple HTML files. So you have that link style sheet, you can edit your CSS there and it applies across a whole bunch of different pages. You can embed those styles in the head of our document and which we saw with that starter HTML doc, or you can have inline styles.

[00:00:35]
So this is something that up until recently, a lot of people hadn't really seen for a long time. The early days of the web, we didn't really have link style sheets. So we had to inline all of those styles. So this is using that style attribute on that whatever HTML element you're using it on.

[00:00:54]
More recently, we have things like IJSX and CSS and JavaScript that kind of incorporates that a little bit. We have things like functional CSS frameworks like I think of Tachyon or tailwind or something like that where it's using classes, but those are very descriptive classes and you're kind of training them so it feels kind of like inline styles, but it's a little bit different.

[00:01:18]
But there's these three options, three different ways we can include CSS. For the purposes of email you'll almost always use either embedded styles like our reset styles or you'll use inline styles on each individual HTML element. The main reason is that a lot of different email clients similar to how they would strip things like JavaScript in the header of our email.

[00:01:42]
They will do the same for any linked files so they won't pull in that CSS. They'll just wholesale remove or ignore that link style sheet. So if we're relying on that for all of our styles, then you're gonna see your email breaking at a lot of different email clients.

[00:01:57]
Embedded styles are good. A lot of email clients will support those embedded styles. It used to be that Gmail was the main offender where they would strip out just the head of your document. So any embedded styles wouldn't be displayed. They actually made a great update I think probably about two years ago at this point, where they added support for embedded styles which is awesome because that solved a ton of headaches for us.

[00:02:21]
We're gonna look at two different approaches to responsive email later on. One is kind of a traditional responsive approach, similar to how you would handle it on websites. And then the other one is called hybrid or spongy coding. And that hybrid coding solution was really developed as a response to Gmail, stripping out those embedded styles.

[00:02:40]
So we'll look at that. It's still useful because there's still a couple of web mail clients. I think some European or like Russian web mail clients will strip out those styles. I wanna say there might be one or two mobile clients that will do that similar thing that will just wholesale get rid of them for you.

[00:02:58]
So if you're using embedded styles, that's now it's pretty reliable across the most popular email clients, which is awesome for us. But if you need to, then there's ways to get around that using this hybrid coding solution. But for the most part, if we want a style to appear in an email, we're going to inline that on that element.

[00:03:16]
So everything for the most part is gonna be inline styles. We will use some kind of over all universal styles embedded in the head. But that's really for things like hover effects on our links or when we get into adding animations or interactivity. Some of that necessarily has to live in the embedded styles.

[00:03:34]
But inline is the way to go and what I suggest doing. You can there's tools out there that will allow you to write your CSS either as a linked style sheet or embedded in your document. Then they will inline that automatically for you. If you're using something like Litmus we have a tool called Builder, which is a dedicated coding development or coding environment for email designers.

[00:03:55]
We have a built in CSS in line or Campaign Monitor has a great in liner which I link out to on the GitHub repo. MailChimp has one as well. If you're using something like Node or more Build tools, there's a lot of different inlining packages out there that you can add in there.

[00:04:11]
I think Ruby has one called pre mailer that's really popular. But for our purposes, we're going to hand write all these styles inline on those elements, which sounds tedious. But it's not too bad and you'll get used to and that's definitely like It lets me sleep better at night knowing that I know what's going on with my CSS and my HTML in my emails.

[00:04:31]
So what CSS are we actually gonna use? What are those reliable properties that we know work across all these different email clients? It really breaks down in two categories for text elements and then for some of our block-level elements. So for texts, we can reliably use what we need to.

[00:04:48]
We can adjust the color of elements using color. We can adjust all the font settings using font family, size, style, wait, line height, super important, especially when you start linking things and want to aid readability. Text line for the same thing and kind of help out with accessibility and just overall styling.

[00:05:05]
And then we'll get into black level elements. We'll be relying on margin and padding and then width and max-width for most purposes. But beyond this, there's very little CSS you need until you start getting into a little bit fancier stuff like interactivity. Things like that. But this is what we're gonna be using for all of our styling across all these different email campaigns.

[00:05:27]
Take your email, apply some of those styles to those different elements and try to make it look nice. Looks terrible right now. So let's try to improve that a little bit. Don't worry too much about the layout, or the structure of your email. Right now, just focus on those different properties and adjust those elements in your emails.

[00:05:47]
So I'll put those back up here just so you have a little bit of reference and start playing around.