[CF CODE LAB]: Live session 8 - Custom CSS

And while we're doing that, just, just real quick, just so I kind of have an idea of everybody's level, if you could throw in the chat or unmute yourself and throw it out there, how. Who here is already somewhat familiar with css, what it is? Anybody know what it stands for? If I remember right, it's cascading style sheet. There you go. That is absolutely correct. And what a lot of people miss out on when they think about CSS is they miss out on the cascading piece. And that's absolutely one of the most critical functions of CSS in the first place is the fact that it's cascading. So let's go ahead and throw that up here. Cascading style sheets. Okay, so that's what cascading or what CSS is. And the most important aspect is that it is cascading. And so what that means is when you have a document like an HTML document, you have several places where you can inject styles. And so when we use individual styles and elements, we combine those things together and we call them style sheets. And simply style sheets are just a set of rules to explain to the web browser how to display a particular element on the page. We've got defaults for all kinds of elements that all browsers will follow somewhat of a standard on how to display and render all the various HTML elements that exist. But we can also take and use individual styles on individual elements, or we can use global styles, things like font size to modified the default display of a particular element on a page. And so the cascading aspect of it is we have generally three levels where we can apply styles and they cascade down the chain. So we can apply, we can apply styles at the very top level element, we can apply a font size to the HTML and body element and say, okay, this is the font size that's going to be rendered as the default for the entire page. And then each type of element, like H1 tags, H2 tags, things like that, they can override those individual styles. And then we can also have, we can have inline css, which means we put it directly into the document. We can also put it inline in a particular element in HTML. ClickFunnels doesn't really allow you to inject individual elements styles on a particular element, but if you ever inspect a funnel and look at some of the elements, a lot of styles will be embedded directly. So let me actually just pull up an example of some of these things and how they look. So we'll just pull up the CFO Tools main sales page here, and we'll just kind of inspect some of these elements. And so what we have, if we go and look at. Just inspect this font here, and this is one of the first things. And I think you guys might be all familiar with this, but the web inspector is a great way to get an idea of what's going on with your own pages as well as other people's pages. So if you're looking to say, hey, I really like the design of this other page, and I want to figure out what they've got going on, how do they get that effect, how do they get the fonts to align, how they get two elements to align together, things like that. And you can actually go and kind of inspect the HTML of the page in combination with the actual styles. So, you know, to get to this. And most browsers are the same. Most everybody's using Chrome nowadays. You just right click on the page, in fact, right click on the element that you want to inspect. So, like, I want to see, okay, what is it about this text that makes it different than this text? So what's the difference? So I can right click on an element I want to take a look at, and I can do inspect, and it will pull up this elements inspector and it'll go straight to the elements that you clicked on, and it'll kind of highlight it. So we can, you know, even expand that out and see what's beneath it. And let me see if I can blow this up a little bit. I don't know if it's gonna let me adjust this.

There it goes.

Yeah, it adjusted the size. So of course, now I lost my. There we go. So the blue highlighted thing. And you'll notice as well as you hover over different pieces, it will highlight them on the page. So. So that you can see, okay, this element I'm hovering over, what is this? So this is the wrapper element. You'll see it's the full width of our row, and then we've got our headline, and then underneath that we have a text element, and then we've got another text element in here. So we've got a few different things going on. And so we can kind of look at these things. And what we'll notice in this is that if we take a look at this headline element, you'll notice we have a style attribute. And then in that style attribute, which is this isn't a style sheet, but a combination of these rules will make up a style sheet. And so we've got here it says text align center, which does exactly what you think it might do, which is to align the text within this element to the center and then font size of 18 pixels. So we can have a default font size set for the entire HTML document and then we can override that to be different on particular elements. We, we can do that embedded or we call these inline styles. And so that's one option. So we can have a sheet that is at the very top and if we could be at the top, could be included through a link tag. And let's see where we've got them out. We need to expand our head here. So we'll see. We have if we search for CSS here, so you'll notice that we have several that links here. This one that's called Lander css. This is specific to clickfunnels. So this is a clickfunnels generated default style sheet. And then we can see that we've got a few things going on. We know from this link it's a style sheet. And then we know the media is for screen that media. You can also create styles for individual media. And it will only apply if you're in that media. So you could have a media of print and it will only apply when you're printing the document. Printing this page most often you're gonna see media screen. And the default is to apply it to everything. Anywhere this page is rendered, anywhere this content is rendered, apply this style. If you don't define a specific media, it will just apply it wherever you are viewing the document, whether that's being printed, whether it's being on screen. And then we've got an href to that actual style sheet. And so this will pull in a ton of styles. So this is kind of an external style sheet that we can pull in. And we can also do embedded style sheets within this. And this is where our custom CSS element in clickfunnels gets rendered, is this embedded style tag. And within this we've got a ton of styles here as well. And so by default or not by default, but these are tags that I've added independently. So I want to center my video, which is just at the top of the page. I want to center that. So I set an elvideo wrapper, which is a class name, and I set it to center. I've also applied a CSS for a max height of 100 for my header, which is right up here. And then we've got the logo, I've got the max height set to 82. So I've applied some custom styles via the custom CSS setting inside of clickfunnels. And then we saw we've also got a ton of other styles embedded in particular elements. So if we look at the style or inspect this element, this headline here, then we can see again, we've got a text align. We've got a font size, this one's 24 pixels. We've also got a color set, and there's a few different ways that we can set colors. This one is set with RGB, which is one of the defaults for ClickFunnels. You might see a lot of these when they're custom CSS that are defined as what we call a hexadecimal color or hex color that'll start with a pound sign and. And it'll be six characters. And they all equate to the same thing, telling the browser how much red, how much green, how much blue to apply to this color. You might also see sometimes an rgba, which is an alpha channel. And that alpha channel will just give you a level of transparency. So that'll be something like this one here. We could actually edit this directly in the page and we can say, okay, so this is rgb, but if I make this rgba, Then we can actually set a level of transparency for this element. And now you see that text got much lighter than what it was because it's got a white background and it's 50% transparent. So more of the white shows through the background. So that's another color option. And so these are inline styles, and there's a ton of different things you can do with inline styles. And the cascading aspect of, of it is it kind of goes from the top of the page down. So wherever that style was defined and included into the document, it will apply the first style first, and the second style may override the first one. So if I have a style that was defined in the head of the document, like the lander, CSS is included at the very top of the document. And then later on I want to include something in my custom css, then that would be the next thing, because that's the next set of styles that were embedded in the document. And then the next level is the inline styles. So the inline styles will. Will override any styles that were previously defined in an included style sheet. And then the next next aspect of the cascading is a tag we call the important tag. Let me get back to my Google Doc here. So the. We call this a bang. Or an exclamation point important. And anywhere you have that important defined will override anything previously that wasn't always also said as important. So we have what we call a level of specificity. So again, aspect of the cascading is a rule that's defined in line is more specific than one that was defined in an external style sheet. But if the external style sheet has this text align left set, and then in this inline style we say text align right, then the text align right is going to take effect unless in the upper level, we define the exclamation important on that upper level. Because that one says, hey, this rule is very important. Follow this if you can. So sometimes you'll see that you have an element in Click Funnels that's got a particular style applied to it, and you apply custom CSS and just can't get it to change. Well, and that might be because the default style included in one of the external style sheets has an important flag on it. And so you have to override that with your own important flag again. And that important flag also follows down the chain of specificity. It also cascades down. So you always have the opportunity to override a particular style. Sometimes you just have to get a little creative with it. And then also things like. Things like div tags. And so this div is an element. And then we've got classes applied to this element of EL headline, you know, HSSIZE2. And all of these things we'll see defined over on this side of the page. On this right side pane, we'll see that we've got an HS size 2 applied. And we can see here that HS size 2 is overridden. Let's see if we can actually get this element in view here. And so you'll notice this is crossed out. That means it's being overridden by something else. And it's being overridden. This one's coming from Lander css, which is included at the very top of our page, and it's setting the font size of 24. The difference is that we've also got a very specific font size 24 set. They just happen to be the same. But if we set this one here to something different, like 26, we can see that size gets a little bit bigger. And because we don't have an important flag here, then this font size 26 is being applied. Now, if we were to just modify this style in inline and call that one 24, but mark it important, then we can see right away that that font size changed here. And now if I go and try and change this even to 30 pixels, nothing's going to happen because we've got in this element here, which is our included Lander CSS, we've modified that font size to 24. So now, and we tagged it with important, and so that's gonna take effect unless something else comes along in the cascading chain that sets its own importance. So now if we were to take this and modify it now, we can set an important rule right here. And when you change it now, our font size has gone up. So that's something you'll want to be aware of. That that important flag plays a big role in how you can apply and override styles. That being said, it's always better if you avoid using important unless you absolutely have to, because that makes it more difficult to override it somewhere later. So if you apply a style to a particular element type, like div, or a particular class like EL headline, and then you set important on that, makes it a little bit more difficult to override that than it would for a particular element within that set. So, for example, you could have, you know, set a rule for EL headline, and we can add one right here, and we can say just in here, el headline font size 48 pixels, and make it important. Oh, boy, there we go. Then that's gonna apply to all of the EL headlines, unless there's another very specific override. But that kind of bumps up. You can see as we scroll through the page now, all of the text sizes on these elements have gone up. That may be desired. But you may say, well, I don't really want this one to be size 48 pixels. I want it to be smaller than the rest. Then that, because we've applied that important flag to it, makes it a little more difficult to override later. So we try and avoid using important tag unless we really need to. There are some places where Even in the ClickFunnel CSS, they've used the important flag without thinking of, like, okay, do we really need to do this? So then when you go and try and write custom CSS to it, then your custom CSS for some reason, doesn't seem to be taking effect. And a lot of times the reason is just because you don't have the important flag, and there's another one that does. And so you have to just be cognizant of that, how that important flag impacts the application of the rules. And just as a little forewarning as you can probably imagine, this Lesson is a lot meatier than some of the others we've been through. It's not so much strategy. It's very, very technical. So you might have to go back and kind of rewatch if you have question, and definitely if there's questions along the way, just give me a little shout in the chat and we'll try and take a moment and answer questions as we go.

All right, Jamie, I do just want to make something clear. So anything on the right hand side, it says element style. And of course, those are generated inside of click Funnels editor itself. So they're always going to override anything you put into the custom css unless you have the important tag.

No, that is not true. So this over here, just so let's break down the inspector real quick. Just so we kind of see element style. That means the styles that are applied directly to the current element. So you'll notice that these match up directly with these, this highlighted element if we got a text.

But aren't those set inside of the editor?

No, not at all. These are just the browser telling you, hey, these are the. Oh, you mean. You mean as far as they're set from within the editor. Like they're the settings that get applied. And it's not always every setting, but yes, these are the ones. So, like, if you go and set a font size for your headline elements in ClickFunnels. In fact, let's just pull up the editor here. We'll pull up the editor for this page. I thought I had. There we go. So we'll just pull up the editor for this page.

Right. If you go to that element, then. So the text is gonna be set at whatever. I think you overwrote it, but I think it was set at 24 pixels. So that's what's actually set. Exactly. Editor. But like you said, it's not for every element or not for every style.

Correct?

Yeah.

So, yeah, so if we're looking at this element, then it's going to apply these. The changes we apply here to the settings. So, like the font family, the font size, whether it's centered or not, which will come up when we actually edit the text. So if we click this, it'll be centered. So we'll get that text align center. We've got it set as text align left. So, yeah, absolutely. Those things are what we see for this element here, that what we see in element style. So the element style will show those things here. Yeah. So then you can override them with the custom css if you set specific rules on how to do so now, because these don't necessarily have, you know, and, you know, none of these have an important flag set on it. Makes it a little, little easier to override. And so. Yeah, but that's, that's how these are kind of applied. Yeah, just the element dot style is always whatever current element is highlighted. And you can also see them over here. So this just gives you a little easier way to look at them.

Can I give everyone a warning too? Because I've done this enough times myself. If you go into the Inspector tool inside of the editor and you make changes to the CSS and you know what I'm talking about, so why don't you go ahead.

Oh, I was just going to say, yeah, you can actually use the way clickfunnels works. Behind the scene is the content that's in the editor. It uses an HTML kind of protocol called Content Editable, which means when I click on this element, I can edit the text of it. And this is actually just HTML that we can inspect just the same as anywhere else. And so if I inspect this, I'll get the exact same thing as I get when I see it and inspect just the actual rendered page. So we can see here we've got that same thing. And so if I make changes here to that, then you'll see them applied. There we go. And so now we'll see that font size change here. I think on this one it'll actually pull in that new font size because that's how they're actually pulling this. So now you can see it here set to 30. The other thing is you have a setting that you. And this is a big benefit as also as a little bit of a risk. If you modify this HTML and you don't do it properly, you can entirely break your page. Because when you go and click Save now, and only when you save, when you click Save, it actually will store the changes you made to that HTML directly to the database. And so when that page gets published, you're going to see those changes. The power is that you can actually modify the HTML of this page directly through the Inspector and save those changes to the database. The downside is if you do that and you do it incorrectly, you could potentially break your page. And I have seen quite a few people that have actually gone through, hit the Inspector modified stuff to, you know, make it think that they could do what they wanted to and then save their page and then not be able to open it back up in the editor. So you just have to be Pretty judicious. I rarely ever use this to actually modify the HTML in the editor for that reason, just because there's some danger to it. And I rarely teach people how to do that because it's also a little bit dangerous. But that being said, sometimes, like, one of the big benefits is that I can actually go in here to this particular element and I can add my own class and call this Jamie's class. This is just. By the way, this is probably pretty stupid to be doing on my live page, so I generally don't recommend that. But we're gonna do it anyways just because we have it here. So. And I can set this one back to my 24, which is what I had it at before. I can use my editor to do that. I'm gonna set this back to 24, but I now have a class of Jamie's class applied to this. So now I could go in and go into my custom CSS and I'm gonna. I'm gonna get rid of this for just a second so we can see a little bit better. And now I can go in and say, dot Jamie's class. And we'll get into what the dots and the hashtags and all that stuff mean here in a minute and say font size 30 pixels. Important. And now, because this has an important flag on it, I'm gonna apply this to anything that has this class. And now if I go back here, out here, we should see that be displayed at font size of 30 pixels. And so let's do a bit bigger here. Sorry, wrong one. Oh, geez. Getting click happy. So let's say we want to make this 48 pixels. And doesn't actually look like it's applying for some reason. This is the thing where it gets a little bit tough. There might be another rule somewhere that is taking over where that's not applying it properly. And so sometimes you just have to dig through all the reasons and what's being actually applied to your elements and how it's being applied. Do we have another important rule somewhere? And so let's make sure we've got. Make sure we've got it all spelled right. Let's actually just see what this looks like at 48 pixels. Yeah, that's definitely not appliance. So we'd have to dig through. So this may not be a great example for right now. We'd have to dig through and see. Okay. Okay. Why is my Jamie's class. Is it even there? Because we should have a class we should see over in here and so it looks like that's not being applied properly. So let's actually save this page, Let's preview it and see if we get the 48 pixels. Yeah, so it's not applying my class for some reason, even though I've got a class here. So probably a poor example, a little more well timed example would be a better one. But yes, that's one thing you can do on these. If you want to apply your own class to very specific elements, then you could do that directly through the editor. But I'm going to show you a better way to do that here shortly. And I think, Dan, you're probably already aware of this one. If I remember correctly, that makes it a little bit easier to do kind of the same thing. So that gives us kind of a good jump off into one of the other topics or one of the other important aspects of cascading style sheets is to be able to use classes versus IDs versus attributes. And so if we take a look at our document here, let's exit out of this one. If we take a look at this document here, we can see we have several different ways that some of these styles are defined. And so we've got, we've got this star. The star here means apply this to all elements. The dot means apply this to any element that has a class of el, margin, zero or a class of EL headline. And so we can see several different definitions for sometimes the same class or the same type of element, but they're defined in different spots. So that's why we see different rules. They're not, it's not all, you know, el headline with position, you know, margin, bottom, padding and position in one set of rules. It's two different settings for EL headline. And so they'd be something, something like this. Get back to our doc. So you can have. Actually let me pull up my code editor for this. Be a little easier to view. So we've got this here and let's see if we can't blow this up and make it a little bigger. So for like that rule of. And we're going to set this real quick to the right text type css. Okay. And let me see if I can actually pull this up and make it visible. So if we set a class of el headline, a new style rule for EL headline. So we want to mimic this one that we just looked at, right? Which is this one here. So we've got, you know, a rule for margin, bottom and padding. We've got a rule for position. You can Write as many combinations of rules that you want. When we have margin, bottom zero. And padding zero. And so what we have here is the dot means apply to this class. The class name is EL headline. And then we open the rule with the curly braces. And so anything contained within the curly braces is going to be applied to any element that has the class of EL headline. But that doesn't mean we have to apply every rule to EL headline all in one class, because we can step right behind it and say el headline. And I think that one was position. Yeah, position relative. And so here we've got another rule for that same thing. And then this also gives us another layer of the cascading, which is top to bottom reading. So the rules at the top get applied first, and then the rules further down will get applied. And so we could also put el headline and say margin, bottom 10 pixels. And rarely would you do this. There wouldn't be any reason to do exact rules that overwrite each other with the exact same. With the exact same class and nothing extra to it. But what it does is that this gives us the opportunity to override this rule that was previously defined in this. In the same style sheet with a different value. But what we probably look at doing is if we had a another class that's applied that maybe not all headline elements have, then we can override. So, because an element. And so what we see here is this would be as if this is an EL headline. And then let's say HS size 2, let's apply that. So we'll say HSSize 2 and we want to do so this one, we do want to change the margin bottom for some reason. So what we have is when we have two sections of dots applied together, that means this is the same element. So when you've got the same element, everything's connected. So there's no spaces here. But if you put a space in between and we have an element that has a class of el headline, and, and then we look, there's a space. So that means, okay, anything within that element that has a class of HSSize 2, then apply this rule. But we're not gonna see that. But we will see headlines and clickfunnels that have this HS size 2 applied to it. And so that's a couple different ways. So this would be one by default, because this element has EL headline applied to it, then it's going to have a margin bottom of zero. But if we very specifically wanted to pick those where we have HS size 2 applied as well. And we want those to have a little bit bigger margin, then we can override that, even though we've got a setting up here for EL headline. Now we've got a more specific one lower down in the style sheet that has a different margin bottom. And then we can also, you know, use important flags. So we can also use. This one has more specific. So because it's more specific, it will override. So, you know, if we had two different elements, you know, then we'd have, you know, you can have multiple classes applied. So the more classes you set for this, so if we had one for LH3, then we could do another one for LH3, and we could even put that one up here. And so if we want to do that and dot LH3 and set it to 15, then this one is more specific than this one and this one and this one. So where we don't override anything different. So the margin bottom, even though it's set as 0 here, and we set it as 10 here, the 15 rule, even though it's above defined above the other two, which normally we read top to bottom. But it's also important to know that we're cascading in level of specificity as well. So the more things you can define about your element, the more likely it is to get applied to to what you want. So this rule with three different classes is more specific than this rule with just two and much more specific than this rule with just one. So even though it's at the top, it's gonna get applied above this one because it's more specific to the element that we're trying to override. So this is why a lot of people don't get the cascading aspect of things. There's so many different directions you can be cascading, you can use your important flags to override, unless there's another important flag, your location in the style sheet. If it's the first rule and there's not a more specific rule that'll get applied first, and then a rule later on that maybe has the exact same specificity that one will get applied versus the rule that's already been defined. And then if you have one that's more specific than yours, and this is the one where things you know, you can have a bit of a struggle with is that if you've got one that's more specific than your rule that's applied somewhere else that you know, has maybe the definition for two or three classes or a specific id, then you'll have to kind of override with important flags or make a more specific rule. And things that also become more specific is we can see like this wrapper here, which is the actual element that we're adding. So when we add a headline element, you're actually adding a headline wrapper element. And this one will have an id. So if we take this ID value and we apply that one, it doesn't matter. This one, the ID is more specific, most specific, because it should only apply to a very single element. So we can apply that one and say margin, bottom 20 pixels. And so this one will get applied before the el headline or will get applied instead of this much more specific rule than the other two. Because this one is even more specific cause it applies to a very specific element. And for IDs you should only ever have one. So it's just about as specific as you can get. Unfortunately, there's some points in clickfunnels where the rules don't apply or they aren't adhering, I guess to perfect standards. Because if you ever notice your, if you ever notice on an order form. In fact, let's just go to the order form on this page and I'll show you what I'm talking about. If we go and we look at the order form here and if we right click on this element, the radio button, we'll let it finish loading here. There we go. So right click on that and I'm going to inspect this radio button. And this is our product selector. And so we can see here that we've got an ID on this product selector of. It's going to be pid if I can find. Yeah, Here we go. ID hashtag of or it's going to be ID PID-735346 so that's the product ID, but you'll notice that's PID 735346. And so if we scroll down and do a search on that pid. So we say PID 735-346-735346 you'll notice we actually have four definitions of that. One is for a label, so that doesn't count. This is a four, not an id. But if we look again, we will have another ID of that. So now we have another input further down the page that is the same ID that's technically not valid HTML. It still works. Most browsers are forgiving enough to let that one slide. But it can be very difficult if you're trying to. Trying to override specific classes. If you've got another alternate id. This is the only place where I've actually seen this happen is with product selectors, because this is actually the form that is hidden on the page. That is what we call our CFAR form. So this is the stands for ClickFunnels AutoResponder. It was the very first, one of the very first elements created in ClickFunnels to store all the data about the contact, any purchases, affiliate IDs, addresses. All that stuff is in a form on the page and it's hidden. You can't see it unless you unhide it. So we'll notice right here that it's got a display none attribute. So if I set this to. I just want to. There we go. So if I set this to display block right here and now if we scroll to the bottom of the page, we'll see our form displayed right here. And so this is our form and this is all the data that's applied about that form. We've got name, you know, these are all individual fields, they're text inputs. And so you can see all the values that are assigned here. And so you know, we've got. And then for this we've got product IDs, and then you've got a bunch of different values. So the labels aren't displayed. But we've got all these fields that are created and that's our CFAR form. So we've got IDs up here for our product selector. And then we have matching IDs down below for the actual all the products. And that's all these radio buttons and checkboxes here. So we see this item is checked, that is that id. So if I right click and inspect on that, you'll see it will take me to my PID 735346 in the CFAR form. And so just be aware of that. You know, if you're ever trying to troubleshoot why your CSS is not going, just make sure and look in your right side and see. Okay, well, what, what. What styles are being applied to my element now? And you can kind of run down the list and see what's being applied. And any that are being overridden, you'll see that they have a line through them.

On that one in particular you just showing here, how would you then select that pid, let's say the second one, and you needed to write some CSS for that. How would you indicate which one that is?

So I would. Excuse me. So I would look at trying to find another combination of attributes or Nest it. So, and we'll see this quite a bit inside of clickfunnels again, we can get very specific. So in that case, I would look at setting a rule that is, I would look at what it's nested in. So if I wanted to, you would never want to apply a style to this stuff because it's invisible to people unless we turn it on like we just did. So we'll set this one back to display none. There we go. None. There we go. And so now it should be gone for our page, but say I want to apply. I just really only want to worry about styles for. And we'll just use products here. You don't see them on the page other than the top one. So it's not super, super important if you're just doing styles, but it will become super important when we go and look at things for the custom JavaScript. So this is another kind of way you'll see the same thing reused when we get to the next session. And that is to say, okay, so in this one we want to go and look and say, okay, I only want to apply a style to this element here. I don't want to apply it to the same elements down in my CFAR form that has the same id. So we'll just look and see if how this one's ordered. So we can see that this input here is, you know, nested within this element that has a class of el, order, product, option, product name. So we can take that, say, okay, well, I only want to apply it to products that are within that. So I can say give, give that class and then do my PID. What was like 735346, I think. And so that is much more specific. It's only going to select elements that have an ID PID 735346 that are nested within an element that has a class of el, order, product, opt in product name. So that will only apply to this one up top. Because in the CFAR form, it's not nested within something with this class. So that's how I would look at that. It's like, okay, just be more specific about your rule, find what's nesting above it and add that into the rule. Instead of just going on pid, find it where it's nested within something else. Does that kind of help make that one clear?

Oh, yeah, yeah, thanks.

Okay, cool. Yeah, so, yeah, so this is. And so we can kind of see, you know, this kind of covers a lot of the different scenarios of how you get your styles to apply. We talked about the dots are classes, the hashtags are identify an ID. So that's what that ID means. And the dot and the IDs are more specific than the classes. And you can actually combine these things. So if you need to get really specific. And again, this is just general css. Some of these things you may not use with clickfunnels, but they're good to know in case you have a specific use case. You know, for, you know, you may find a specific use case for it in clickfunnels, or you may be, you know, trying to write custom CSS for some other platform and where you do have the opportunity to use some of these combinations of classes and attributes and IDs to get very specific on the element that you're. You're trying to style. So we've got that. We've got our class name here. We've got a nest, you know, if we have a space. And that means, okay, find this first. Any element that has this class and then anything nested within that that has this id. You could continue to nest these down the road. You could say, this one doesn't have any elements within it. But let's see, I'm trying to think of any that we have where we're actually triple nested. So we could. Let's jump up one level and. Nope, not that one. I want this. So now we could say, okay, we'll go with that one. So now we'll say, okay, so find me any element that has a class of EL product, optin products, which is here. And then within that, find me any element that has the EL product, optin product name, class. And then from inside of that element, grab me the ID PID 735346. And so that's kind of what we got going here. We can nest many, many levels deep. The other thing that we can look at, and this is kind of a really cool one as well, is you can use rules that are applied to multiple classes all in one rule. So what really would be a pain is if you could only use a rule once. And for every time you wanted to use that same rule, you need to create a new set. But what you can do is say, okay for all EL headline classes and the comma here. And I like to jump to a new line to make it a little clearer to read. You don't have to. You could just do HS size 2 and the comma means okay. And I'm gonna do, I'm gonna add another selector Here. But we could say, then give me a rule. And again, I like to use the commas and then add to new lines so that we kind of see there's a comma at the end of the line, it's gonna apply. This is the start of a new selector, and that's what these are called. They're selectors. And so now we can apply that same rule. To these two classes independently of each other. So it's going to say, okay, find me any el headline element and apply margin bottom 10 and find me any HS size 2 elements and apply a margin bottom of 10. It just so happens that all our elements have those same attributes applied, but they could be different elements. And I'll show an example of how you can use this down the road with combinations of data titles. So these are our classes and IDs. The other thing we can look at is, is called an attribute. So these are called attributes. Each one of these are attributes on an HTML element. So we've got an attribute of type, we've got an attribute of id, which gives a very specific selector in cascading style sheets. So you don't really need to do this with IDs, but you can in a very, very cool way. We've got a name, we got values, We've got. In this case, we call these data attributes. So this data product label is also an attribute, but the data is usually easily represented because when we get into custom JavaScript, we'll see how we can call those things very easily. We also have things like a data product payment type. All these are attributes, so you can actually get and use the attribute values to apply styles. And so one that I use quite a bit is this Data CF product template. And so you can apply a wrapper around this, this whole, this whole element here. You do it with the class, but you can also do it with this Data CF product template. So there's a. Let's run through how to do that. So when you want to do that, you start with the square braces and then you use the. I think it was Data cf. Yeah, Data CF product template. Now we can give that attribute name, and in this case we could just use just the attribute name. We don't have to put any value with it because what we're looking for in this scenario, where you don't have a value set, it's just the name of the attribute. What this says is, go find me any element that has this attribute and apply these styles to it. Another scenario is we can use the value so data CF product template equals true is by the value. And so now it's going to say, go find me any element that has data cfproduct template equal to true. That's a little more specific way to call that thing. Then you apply your style rules just like you normally would. So this again is just a different type of selector based on attribute. You can also use these things in combination. So, and you can. So let's say. So we can. We'll pull our product ID here because that's got a ton of attributes on it. So we could say we want to look at the name. So give me all elements where the name is equal to and we'll just say this name is the purchased the square bracket scan product id. That will tell us, give me all of the product selectors. These are radio buttons. We'll always have a name of purchase product id. And so we can say name equals purchase Square braces within product id. They need to be a little careful with quotes on this one, especially since we've already got square braces here and here. But we have to put the square braces for the name inside of the quotes so that it doesn't get confused. So give me all at once that have a name of purchase product ID and a value of 735346. And so that's going to be very specific to this element. It's actually going to get you two, because we have one in our CFAR form that's the same. So that gives you. But that's a way to select a very specific element. And so this is, you know, any element, doesn't matter what type of element, any element that has a name of purchase product ID and a value of 735346. Another way to be even more specific about this that we haven't covered yet is how to select on an actual element. And so we could say, I want all divs to have a margin bottom. And I'm just using margin bottom because we've got it going everywhere else. Margin bottom of 30 pixels. So that's gonna select by element. It's just gonna go say, hey, find me any div element that has a margin bottom of 30 pixels. And so that's one way to select by element, select by class, select by id, select by data attribute. And then you can also combine all those things. So you can say select. And this, this rule says, give me any input that has a name of purchase product ID, a value of 735346. And if you wanted to get really specific to just the product selectors. Up here, I want to pick just this one product selector. I want to make sure I don't pick the product selector down in the CFAR form that has the same. Because I can also find an input element of purchase product ID down below, but I believe the one down below is actually a radio option. And so you can then also say okay, and type equals checkbox. And so you've got these combination of attributes where you can layer things together to get very, very, very specific. And so, you know, and you can use a combination of different things. So you can also say, okay, give me the input with the ID of this. So that's input. Give me any input that has an ID of this, that has a name of purchase product ID that has a value of 735346 and a type of checkbox. So you can kind of see how you can string these together and get very, very, very specific. The more specific you are, the more likely your classes are to get applied and not be overridden by some other rule. And then the last resort is to apply your important tag. So then if we had to and we just couldn't get it to get specific enough, then we can say margin, bottom 10 pixels important. And now that important flag layers onto the specificity and we'll get your CSS rule applied. So, yeah, so that's kind of the different ways that we can. We can use combinations of elements, classes, IDs and data attributes to make very, very specific CSS rules and stack on and override things at different levels. And then last resort, we can use our important flag to mark that as okay. Obviously, you know, if there's. If I can't get any more specific, I just want to apply this rule over and above anything else. Hey, Jamie? Yeah?

Could you briefly go over again the headlines above, like the difference having like the headline.hs size 2 altogether and then space and then the one with the comma.

Okay, cool. Yeah. So basically what this says right here is give me any element that has the class of EL headline and a class of HS size 2 and a class of LH3 all on the same. All on the same element. So it's the selector without the spaces between is an and. So they have to have this and this and this in order for this rule to take effect. So in a lot of cases, you might have elements, you know, a bunch of El headline elements, but not all of them have HS size 2. So you want to apply a rule that's just specifically for Headline elements that have HS size 2 and that. So that's gonna apply this rule here. So if your element has two of these, but not LH3, then this rule will get ignored. It'll fall to this rule and then the next option is this one where we have. Okay, I want to find elements that have a class of EO product optin products. And within that I want to find any product that has or any element that has this class applied. So when we have a space, it's a nest. So like find this group of elements first and then within each one of those, look for elements within that have this class applied. It's not an and, it's a nest. And then same on down the list. So anywhere we have a space, it means go down one level and look for the elements that have this class or this idea assigned to it. So it's another way to kind of get specific, but in a downline structure.

Okay, awesome. And then the comma was an and also correct.

Yeah, so a comma is a fine, but it's not an and with the classes, it's a new set of selectors. So this EL headline class is called a selector. So it's like this whole combination here is a single selector. This whole thing is a single selector. And so what this is doing is the comma says another, I'm starting a new selector now, but I want to use, I want to independently evaluate each selector and when I find the elements, then I'm going to apply the same styles to it. Okay, gotcha. Awesome.

Thank you so much.

Yeah, no problem. Commas would probably be better described as an OR statement. Yeah, that's a good call. Yeah, so you say, okay, find me any element that has this selector or an element that has this selector and apply the same rules. Yeah, good call. So, yeah, now I'll show you a quick trick just because we kind of just talked about these attribute selectors, right? And so, and we always. We also have these classes. So the definite, the reason classes exist is so that you can apply a class to a broad range of elements and be able to identify those as a, you know, kind of go through and give a quick way to find things. I have a short selector, but apply the same styles to everything. So that's why you see all these things like EL headline. Because we have a very specific set of rules we want to apply to all the elements that have that. So if I look at my. So let's just find here an EL headline. So if I want to, you know, we can See this one, we've got an EL headline wrapper, and then within that we'll have an EL headline element. We click on that, we'll notice that we've got several rules that are applied to EL headlines. And the same all EL headlines should have this rule applied to it. And then I can have other. You'll notice this one doesn't have an HS size 2 class applied to it. This one has an HS size 3. So if we look at HSSize 3, then our default size for that one is 32 pixels. Now, I'm overriding it in this particular element, Actually, it is overridden just because it's in line. It's still the same size, but. And then we have this one LH4 instead of LH3. So we could have rules that are applied to all EL headlines, but then for HS size 3, I'm going to override with a different rule, and for LH4s, I'm going to override with a different rule. So that way we can kind of get some base like margin, bottom, and padding. We always want to be zero for all EL headlines. But then if we're looking at LH4, then they're gonna have a different set of rules that are applied, so they're gonna have a line height of 1.3. And then HSSize3 is gonna have a different default font size. We're not applying those in EL headlines, we're applying those in this class and in this class. So as we combine those different selectors together, we get different sets of rules. Even though we want a kind of a base foundation of rules applied to just all EL headline elements. So you can kind of sprinkle on different classes and then still override certain things based on other additional classes. So that's what you'll see here is that when you look in these classes, each one of these is an individual class. So anytime we have a space, it separates and it's a new class. When we're trying to use them in selectors, we have to put dots in front of them. The dot just means this is a class name. The. The hashtag, the pound sign, whatever I'm gonna call it is identifying that this is an id, an element id. Anywhere where we don't have a dot or a hash is identifying an element. So that's a div. Could be a span, could be any of a hundred different types, could be an input. You know, there's hundreds of different elements inside of HTML. And one. One time I used to know what they were, but they've added on and removed so many. I don't have the. Don't have the list fully memorized anymore. And then anywhere we've got the square brackets that. That identifies an attribute on an element, you can use it without an actual element because you could have the Same attribute on 15 different types of elements, or you could get very specific and say, I want any input that has the name of this, or I want any input that has, you know, a type or value or anything else. So what I like to do with ClickFunnels, you don't have the ability right now to add your own custom classes to elements. There's no custom class setting anywhere that you can use. But what you can do is set the data title, which is the CSS title. So if we open up our page here, do I still have my editor open somewhere? Get rid of this one. Trying to be not too clunky with things here. So here I'm. So I just need to open this editor back up. Let's close this down. So if I go into my editor here, we'll open this page up. Pretty much every section, row and element. In ClickFunnels, you have the ability to set a CSS title on. So I can go to this row. In fact, you can probably see it here. I think this section has. If we open up the settings for the section, we have an icon here, the get CSS info icon, a little hashtag. If we click that and open it up, we actually don't have one applied here. So it just has a CSS title of header. Actually, no, that is a specific one. That is not the default. The normal would be section, but I've renamed this one to header. So now if I take a look at this in my browser. Close this out. We'll go to preview. So if I right click and inspect this element. Probably have to drill up a little bit, but we'll get there. No, it actually picked it right off the bat, I believe. So this is the element we're looking at. It's our container and it's also active section. So we kind of tell this is our section. But the thing we're looking for here is the data title. And so that's our rule for that CSS title that we just set in the editor. Let's see. It has a value of header. So I can't add new classes to this because clickfunnels defines all the classes that are applied. But I can use my data title as a selector. So now I can Go into my rules and I can say okay now give me all elements that have a data title equal to header and then I can apply classes to it or I can apply my styles to that. And so that's gonna, you know, I can make that as specific as I wanna be. If it's only applies to one element then I then great, I've got that. The other thing that we can do with this, that I do a fair amount, I always, almost always do this. Just have to be a little careful. If you name several different things with similar titles is I can say, hey, give me any element that has a data title that contains. I like to use the star equals as contains header. This star represents a wild card basically. But in this case it's contains. So we can say anything that contains header. And what I'll do a lot of times when I'm trying to do specific rules for certain types of things, maybe I have a rule that all my elements that I use for. I use this sometimes in custom code for applying styles to my product IDs or things like that. I can use my add on code and we'll see this in the. I use this, this kind of setup, this standard when I write all my custom JavaScript as well when I'm trying to select elements to either add something to them or move them on the page, or append something to the end of it, or take it out of the page and put it somewhere else. Then I'll use this, this concept of data title and then I just look for my certain things like CF product and I might say just CF product and that's going to say, hey, go find the, any element on the page that has a data title that contains CF product dash. And then what I usually have after that in most cases is you know, a product ID. So but I might have 15 of these product these elements tagged on the page with CF product ID something. But I can just make my rules say I want to do the same thing to all of them. So I just take off the actual number and just leave it so that I make sure that I have enough that's unique about those types of elements. CF dash, product dash. And then I can apply my rules here, margin, bottom, you know, 25 pixels. So that's another alternative we have and there's a few different combinations. I won't go through all the different combinations of. You know, we've got, we can do uppercase or the. Yeah, the little carrot, I believe that's what they called it. And there's There's, I believe there's also a tilde version. There's several different versions of these. I have found after doing 20 plus years of programming that I don't ever try and remember what all the things are. I just. If you ever need it, you go to a reference and you can find it. So you could, you know, quickly go to Google and find. Do a search for like CSS data attribute selectors and you can find a list. And so you can see here we've got attribute selectors. W3 Schools is a great reference for all these things. I mean they have hundreds and they've been around forever. They were around when I started development. So we can see we've got here we've got attribute equals selectors, we've got attribute the tilde which is. And they'll tell you exactly what that does. So it's used to select elements with an attribute containing a specified word. So that's another container. And then. And then this is an or use select elements with specified attributes starting with a specified value. Yeah, sorry, it's. This is. The pipe is usually an OR inside of code. But this one says starts with. So that could be another one where you say, okay, I only want the ones where it starts with CF dash product or CF dash product dash. So you can always look these things up pretty easily. So we won't go through and spend all the time. This is. I believe this is a. Yeah, use elements to specified values. Begins with a value. Some of these seem to be the same thing. I've got a dollar sign. It ends with that specified value. This one is attribute contains a specified value. So we've got a ton of different ways to go through this. So we won't spend all the time to go through all the different ones and what they mean because we could be here all day if we do that. But just know that you can usually find pretty quickly all the different things that you can do with CSS. W3 school is a great reference. It'll show you different ways to do a bunch of different things, but it also makes for a good reference. Stack Overflow is also another good site that, where you can go and ask questions and then a ton of people come and try and answer it. So pretty much any question you've ever had about how to do this stuff, somebody else has had that same question and it's already been answered somewhere. So Google is your best friend on this. And so that's where it kind of helps to make. To kind of know what is an attribute. Selector and what's an element selector and what is a class selector, those sorts of things. So you kind of know what it is that you might want to search for. And one other thing we didn't even talk about is our pseudo classes. And we can kind of see here it's a specific state of an element. So that's another one that we can throw in here while we're at it. Because this rule, you will actually see these applied sometimes inside of clickfunnels as well. When you do things like on hover animations for like your buttons, you can say, hey, I want this to toggle on hover. I want it to do. I want it to kind of highlight when you hover over it. Some of those are built in by default with clickfunnels to maybe slightly vary the color when you hover over a button. That's a lot of those are just automatically applied. But what you would do there is you can say, okay for a button that has a class of el button in clickfunnels, and then you can say hover. And then we can say color is. That's a. That's a hex color of gray, super beautiful color. But this says find me all elements of EL button. And when they're hovered over, somebody's actually hovering over that, then you can apply this class and once they hover off of it, the class is no longer applied because they're no longer in this pseudo state. And so you know, another one that you would probably do sometimes with that is, is to actually change. You'll see people do this for anchor tags, which are links. That's an A element. So you can do a hover text decoration underline. That's a pretty common one. That way your links are not necessarily, not necessarily underlined as plain text. Because you can also do something like this above that. Because by default, anchors or text link or links are underlined by default in browsers. And so you can say text decoration none. And so this would say, okay, by default, anchor tags are underlined and they're blue. That's just the default browser standard. It's been the default browser standard for 20 years. But I don't like that standard. And I believe clickfunnels overrides this already with this rule. But just kinda so you know how it's doing. It is we're saying okay, for any link on the page, set its text decoration to none. The problem is that way if you just set it to none and you don't give it a pseudo class of Hover, then it's gonna always be not underlined, which would make people not have any reason to think that it's actually a link. So then you say, okay, but I do want to indicate something different when somebody hovers over it. So let's go ahead and then maybe apply a little bit different color. And then we want to go ahead and underline it there. And then links out of the box have a hover state built into browsers when you hover over it. That the pointer. Sorry, it's cursor pointer automatically. If we go and find anywhere where we have a link on a page and I don't even know if I have any links on, I probably do it at the bottom. So by default, when you hover over this thing, it turns from the arrow to the finger pointer. You might not be able to see all that. Great. Cause it's very bottom. It's probably a little small. But that. That's the cursor. And the value there when it goes to the little finger is called pointer. And so we could do. And let's just do a little test with this as well. So we'll pull that up, we'll get back down to this. And we can actually go in and say. We'll say a hover. And then we're creating a row of cursor and crosshair is another style. And we'll probably have to do an important on that one because it's probably going to override. But now. Oh, now we can see instead of being the little finger pointer might be a little hard to see on the video. But see, instead of it being a little finger pointer, we're hovered over that link. And it's actually. Now instead of being the little finger, it's actually a crosshair. So that's kind of what this hover rule does. It says only apply that when we're hovered over it. So you can see when we hover out, it goes back to the default arrow. But when we're hovered over this element, the cursor changes to the crosshair. And so. And there's a couple of different options here. And this is also one that's a kind of a good tool to learn with, is that when you start to apply cursor in your inspector, it will tell you all the different things that you can actually apply. So we've got a whole list of values that you can assign to that. And I have no idea what a lot of these do as far as the values, but we know that crosshair is one pointer. Should be one we can do a progress. So let's just see what that does. So there. So now you've got your little crosshair or your little arrow with a little spinning beach ball. These a lot of times we displayed differently in different browsers and different operating systems will have a little different version. So this little spinning beach ball there is pretty specific to Mac, I believe. I think Windows has a different variation on this, but some of these don't look exactly the same across the board. But that's just. The browser manufacturers have some liberty of how they apply these things. But that's another thing that's kind of cool and to see with certain types of properties. And you can actually go. So here's a grab one. And so we can see it with this. It's the hand, but it's not the pointer hand. It's an actual whole hand. So you might want to use some of these different ones, especially if you're building UI and you want to, hey, I've got something where I want to drag and drop it. So you change your cursor to indicate a different activity. But the kind of cool thing is here that you can actually go to different. Different properties in here and see what value options there are. And so that's kind of a cool thing to be able to go through. If you're not sure, hey, what can I apply to this attribute, this style? Then just go to your list and start to add one and see what options you have. And you can also start to do, say background. Background is one where you've got a bunch of different properties. You can use background, which is a shorthand for the combination of all these different background dash elements. You can say background, repeat, background, repeat X, background, repeat Y, background size, background position. Or you can do a shorthand and just say background. And then you can layer on several different. Several different values. One might be. That's good. And we probably don't want to do this just on hover, but we could. Let's just see what we got. Oh, come on. There we go. So we can do border. And so border is our, you know, is our CSS property here. And we're gonna set, you know, set this to 2 pixel, 2 pixel solid border. And you'll notice it still fills out and it knows a lot of these. And we want to set a color. Let's set a color on this one. So we can do, you know, this one we can do. Let's do rgb. So we kind of run through how those works. So RGB takes three individual values that are integers from 0 to 255. 0 means none of this color. 255 means all of this color. So if we wanted something that was just solid red, we do 255, comma 0, comma 0. And the way that these numbers work, they match up with the letters. So R is the first letter, which stands for red, and 255 is means give me all red, all the red you can muster, throw it onto this. And then zero. The second number represents green, which is G, and then the third is B, which is blue. So that third number represents the blue, the amount of blue in this combination of colors. So if we do 255. 00, that means 100% red and nothing of anything else. So now when we hover, we get a border around that that's 2 pixels thick, and it's solid, and it's 100% red. The other thing we can do is, well, we have different types of borders. We can do dashed, and that'll give us a dashed border. So now when we hover, we get a little dashed border. And let's. Let's just blow this font size up here. Let's make the font size 20 pixels. That's only gonna apply when it's on hover. So we'll see that here we can go in. And as we hover over these, the font size gets way bigger. We've got a border. We can even probably apply some padding. So we'll do padding of 5 pixels. So now as we hover over. Looks like we don't have our padding here, probably because it's overridden by something else. So we'll just overwrite with the important. Nope, it's still being overridden somewhere. Oh, nope, missed the P. Yep. Thank you. Dan. Just saw that at the same time. So let's take off the important. Just to see if that was just what it is. And I'm sure that's probably all it was, why it wasn't being applied. So 5px, which brings me to the point of different sizes. We'll get into that here in a second. But PX stands for pixels, and then we have other measurements like EMS and REMS percentage, so we've got now 5 pixels, and it looks like it's probably gonna apply it just fine now. So we can see. Yeah, now we've got some padding there. So these are just things, you know, this is a combination of a bunch of things, and that's what style sheets are. All about, right? It's a combination, combination of a bunch of different rules and a bunch of different selectors to completely override the look and feel of things that come out of the box with the browser. And so, yeah, so you can do some pretty cool stuff to get some pretty cool effects. And so we can make this a 5 pixel and I believe dotted is another one. It's a little bit different than dash. Yep. So you can see it's just slightly different. It's actual square dots instead of longer dashes. So you got all kinds of different combinations of these things. The other thing we can do with this, say we wanna apply that same thing, but instead of applying it as one rule, we can actually apply it as the individual components of that attribute. So for border, we've got border, border, color and that was our RGB number. So we'll run through how hexadecimal colors work as well. Hexadecimal colors are a combination also of. Because you'll notice it's always six characters or three characters actually, depending on if the two are the same. So for example, I had the color earlier of cc, ccc, cc that also indicates rgb. So if you look at the first two numbers in a hexadecimal six digit hexadecimal number or color, the first two characters represent the amount of red, the second two characters represent the amount of green, and the third set of two characters represents the amount of blue. And so, and then hexadecimal colors are run from 0 to F. So they run 0 to 9 and then a to F. And so that's the, the set of numbers. And so that's why it's called a hexadecimal if you ever want to have any interest. I had to learn this stuff 20 years ago in a. One of the few college classes I ever took was how to actually define hexadecimal numbers, what they mean, how they add. That's actually a whole way to be able to do math with hexadecimal to represent different combinations of things. But it's used mostly. What you'll see it in most often is actually hexadecimal colors for things like this with cascading style sheets. So let's see. Ff I believe F is the. I will probably quote this wrong, but I can tell you some of the basic ones. So ff, FFF is all white. So if we say border color, we have to also define then so this. Yeah, and so you can see it's white here. And the, the Other end of the spectrum is 00000000, which is all black. And so here we've got a border color defined. Black's not gonna do us very much good cause we're on a black background. But if we do white, we can do it as representation of six different digits. You can also do something if you wanted to get some gray in the middle, then you could say F0F 0F0, which is gonna be pretty much half and half all the way across. So it should be a middle gray sort of color. And so we can kind of see that, yeah, we get this kind of lighter gray here. And. But now we've got a. And it keeps wanting to adjust when I mouse over. There we go. So now we've got a border color, but we have no border pixel size. So the default is no border. So we've got a border color, but we need to actually define some of the other properties that we defined above. So we had a color in there. We also had a pixel size in there. So we can do border size and we do five pixels. So what we had last. Did I not put the right pixels again, doesn't like that one for some reason. Oh, it's. I think it's actually border width. There we go, border width for your size. And that's how thick the border is going to be. And then we can do border. I believe it's style. That's the other thing. As you start to type, it'll give you all the different things. So we know border style is the attribute we can have here. If we back up and we do just do border, it'll give us all the different properties that we can use to define a border. And you can see for borders, there's hundreds of different border styles that you can apply or border properties that you can apply. So border style is the one we want to define for our dotted. So. And then for each of these again, it will tell us here's all the different values. You can. You can. You can use groove, you can use double. So we'll pick double on this one. So it's a little bit different. So now we should have a slightly gray border 5 pixels wide that has the double border. So now if we hover over, we can see that's kind of what we get. And then we could do, say middle of the road. Do something like I wanna actually define in this property. So the other thing that's kind of a shortcut here for colors is if your two characters are the same. Like if we were Doing FFFFF for all white. You can actually just do that as three characters fff. So you can. You can shorthand your hexadecimal colors if each batch of two characters are the same. Or we could do FC0. So that means 100% red, 50ish percent. It's actually like 30%. Did we swap. This keyboard's acting crazy on me and do a C. So it was like, you know, 30% ish white, I believe. And then zero is gonna be black. And so now that changes our color. And now we'll get combinations. So you can see this is a yellow color just because it's the combination of the red and the green and the blue to set that up. Or that would be the same or the equivalent of FFCC00. So that's a full expression, but it's the exact same color. And so. And then you obviously can change each individual element if you wanted to. So that's kind of how hexadecimal colors are defined versus RGB colors. The other thing we can do with colors here is use RGBA. And that could be our same 25500. And then we have a fourth character now, which is our A. And this one stands for alpha transparency. And so then. Oh, wasn't done. So we've got 255, 0 comma, 0 comma. And we do say 0.5 on this one. This one's expressed in decimal. So 1 is 100% opaque and 0.5 is 50% transparent or 50% opaque, depending on how you look at it. Kind of a glass is half full, half empty. You know, 25 is more transparent, 75 is more opaque. And so I always put those in. You don't have to have the zero in front. It just has to be either one or some decimal point lower than one down to zero. Zero is 100% transparent and one is 100% opaque. So now we've got a red kind of. It's gonna end up as a little bit of a pink. That's almost visible red. Actually, you know what? This probably won't work out very well because. On a black background. So that's going to fill in as we make it transparent. But yeah, you can see you definitely get a big color difference there. So it's more black. If you had this on a white background, it would be more white. So let's see if these. Yeah, that's actually on a red background. So this actually we've got this applied to just any anchor tag that we Hover over this one. I've got some other styles, so we can kind of see it animate a little bit. But yeah, so that's kind of what we got going on there. And now I think I lost my rule because I clicked on something else. So. But that's how we can apply combinations of different things in different ways. So you can use shortcuts or you can use long hand, like individual properties. One of the other things that's kind of cool about borders that I do like to use quite a bit. And you'll notice that you can set it with click funnels in a lot of places. Sometimes it's not. It's more than you want. A lot of times it's 5 pixel increments of things, but maybe you really only want 3 pixel increments. So we could do something else. Like if we were to, you know, want to change our border on these links that we're looking at down below, you can actually go in again in your editor, you can apply a new rule here that only applies as you're viewing it here. It doesn't actually get saved anywhere. It's just like, hey, I want to test this out. And this is why I really use the inspector a lot. It's like, hey, I want to. I have an idea of what I want this to look like, but I want to. I want to test it out and see before I actually go and write the custom CSS and add it to my page. So, for example, we've got rounded. I've got this bar here that's got the disclaimer in it. So let's look at that one. And so that's our. This is black. I want to make sure I get to the right element here because I believe this is going to be applied on my row. Yes. So we can see on a row here we have some rules applied. We got margins and we've got padding. We've got padding bottom, and we've got a border, some borders applied here.

And.

All kinds of different rules. But what I want to say is I want to. I want to mess with this box here. I want to change a few things about it. So I'm going to go ahead and add a new row. This one's going to give you. It's going to automatically pick the most specific thing. So I want to give you. Apply this to my div. That has the ID of row 61979. So which should. Should apply just about everything. So now for this one, I want my border radius you can see it's kind of rounded here. I'm actually going to give it a. I'm going to give this a background color first. Background color of white. Nope, it didn't like that. Probably because it's got a background color set. There we go. Do that as important as well. I'm gonna have to change the font color deeper in. So you notice I have white, white text on. So let's just. To make this. So we can actually see something. Let's change this to cc. Cc, cc. So that's a slightly, slightly lighter gray than what was there before. So we've got a couple things going. One thing that we want to touch on real quick is color here. Color always represents one thing. And as the font color, there's no property for font color. Color just represents font color. So your text color and where we've got other specific. Where we represent color, it's like background color, border color, you know, so we've got background color here. Got a bunch of different things going on there. But when you talk about color, color always represents the text. Color. Color was one of the first properties ever created. And so it just. We didn't have all the different background colors and border colors and all that stuff previously. So color just always represented the color of the text. You could say, hey, by default my link color is blue. I want to override that color of blue to purple. Then you would write A. And then the properties within that would be color purple. That's other. One other thing we could do here is instead of having a hashtag, we could actually write the color. And say yellow. Or when you have color specifically, you'll get a whole list. There's a ton of predefined colors that you can choose from here. So you don't have to actually put in digits, characters, rgb, hexadecimal, or anything like that. You can actually pick one of these colors and say, okay, I want it to be aquamarine. Or I could use that same thing here. You'll see a little, little representation of this here. You can click it, actually open a color picker if you want to, and you can see the same color. This is the hexadecimal value for aquamarine. If you want the rgba, this is the RGBA representation of aquamarine. You can pick the hsla, which I would never recommend using for web stuff. You can pick the hex color here. You also have some palettes colors here. You can drag and, you know, kind of play around, find a color that you want you can mess with the transparency. I have actually never seen a transparency value applied to a hex. I don't believe that will work inside the browser. I could be wrong. Maybe it does. I wouldn't find that to be very consistent because generally you'd want to go with like an RGBA on that and you'll notice it changes there. So you go, give me red and go that way. You can give me solid red if I drag over this side. So now we'll see. We're at 252. Probably have to drag all the way up. So There we go, 255, that's solid red. Go somewhere in the middle and be there. We can drag this around. So kind of the same thing you can do with inside clickfunnels with picking some colors you can do here as well. And then you can actually find colors that you like. And you can also do dropper to say, hey, what color is this? Okay, so that's this color. That's the color I want to apply to my, my. To my fonts, to my links. So that's, you know, another way that you can use the Inspector. Pretty cool. You can look at somebody else's page and find out what colors they're using quickly and then copy those into your own rules. And so we've got different things we can do with those colors. And again, we can. We could just get rid of the hash here and we could do yellow. We probably have to get rid of the importance so that it knows that I'm just trying to pick a background color so it knows by the property what things can be applied. We can do background color of cadet blue, whatever that is.

Hey, Jamie, one thing on the Inspector tool.

Yeah.

Click back into one of the colors again. Let's say you make it RGBA and you got the four digits in there. Notice. I'm sorry, click on the back into the inspector. There you go. Save that and easily copy it into clickfunnels. Just click the big blue dot, copy it as rgba and then you can just paste it directly into clickfunnels. A lot easier than having write it down.

Yep. Awesome. Good tip, Good tip.

And also want to let you know your. Your voice is going fluctuating again. Your volume is. And it seems to start about an hour and a half in every time where it starts to fluctuate. So I don't know if it's a memory issue or what.

Yeah, it could be. That's. That's kind of weird. Yeah. I tried to set up my microphone as close to my voice as possible. So hopefully that will resolve itself. It seemed to get better for a while, but now don't like that. So I'll put it as close to me as possible and see if that helps a little bit. Okay, so now we can set. So we've got rid. We don't really need our color. What we want is our background. Background color. And let's just make this. Yeah, we made this like C CCC important. There we go. So now we got a background color. And you can kind of see from this that we have this rounded edges here. These rounded edges are what's called a border radius. We don't actually have a border color or we've got a background color applied, but we don't really have any border applied here. But we do have a border radius. So that border radius is one that will apply to the element regardless of, you know, actually have a border applied. But that might be a little too much. I don't like that border radius. I wanna maybe. I wanna try that a little bit smaller. So let's say border radius of 3 pixels. You can see it's got just a little bit of an edge to it, but not a lot. If we do 10 pixels now, we can see we've got a big radius there. And so, you know, sometimes you want just a little bit of a rounded. You know, that's. Yeah, it's not much. It looks almost square there. So maybe four pixels. That's definitely got a little bit of a rounding to it, but not a ton. Let's say five pixels. So that's. Yeah, that's better. So that's five pixels. You definitely tell it's rounded but not as round as it was. I think that. I think the default is too 10 pixels here. I think what I've got set as 10, but you can try it all the way to, you know, 50 pixels if you wanted to. It gets it kind of around there. Oh, totally messed that one up. So now we can say a hundred pixels. And it's really not gonna get any more round once you hit a certain point. So that's about as round. You know, that is a hundred percent round there on that side at the edge. So you can just apply that. I think you can also do these in percentages. That's definitely not what we want in this case. These are some of the most common things that you'll play with. You know, colors, borders, border radius. So like that 50 pixels. And so we've got that going. That gives us Kind of that round edge. We've got a bar there. We can still apply here. There's no actual border applied, so there's no different border color or anything like that. But we can apply one and we can say border. And we'll just do a 2 pixel. We'll give it a color of yellow and we'll call it solid. Is a border color where it's actually solid. No dash, no dot, no whatever. So you see, now we have an actual border applied. Yellow obviously is not the greatest color, but we could right click, you know, and we could get a different color there if we wanted to. So let's, let's do that. Actually, it'll be hard to do in here when you're doing the short, what's called shorthand property definition. Then you don't get all the handy selectors all the time. Some of them will pop up, some of them won't. If I've already picked a. If I already picked a style.

And.

They kind of need to be redefined in certain orders. So if I've already picked this style, now we'll see. It's giving me my colors. And now if I go in here.

And.

We'Ll just do that. Now I can go and say, okay, border. Now I can use my color selector and say, okay, I want to do my eyedropper here and I want to use. Come on, I want to pick this color and that's the one I want. So now that's gonna be applied and then I can give it. Now I have to give it an actual border style that's kind of hard to see. So I'm gonna actually make it 5 pixels. So now we've got a 5 pixel blue, same exact color as what I have up here with a solid style. I want it to be dashed. So now I've got a dashed blue. Now the dash here, because I have a background color behind this, the border is actually applied in the background, reaches all the way to the edges. So that's something to kind of bear in mind there. So, yeah, so those are just some things that you can play around with. So again, good use of the Inspector. Thanks, Dan, for some of those tips too, on color picker and things like that. How to use it with click funnels, make it a little bit easier to grab some of your values. The other thing you can do, if you go to some place and you find a style that you really like, like, okay, I want to, you know, this. For some reason it has all the styles I want. Or this. Let's Pick my BG cover here. You can actually, in this selector, copy this entire rule. Even if it's. Even if it's sliced through the. The hash through it. The line through means it's not actually being applied. Generally it means it's overridden somewhere else. Same thing with like the border color here. So that border light that I have applied is being overridden because this element has a border border light on it. Yeah, border light, border two pixel, border solid. Those are all different classes and they all have different things, different rules around them. But because I've got this one up above that is div row 61979, it overrides all my other border definitions. So you'll see this. Border solid, border two pixel. Both of those rules are overridden because I've got my own border definitions that are overriding the width and the style. So 5 pixel and dashed versus 2 pixel and solid. So these things are overridden, but we can take this entire thing here and copy it and go over to our style sheet now and we can just paste those in. So now it gives me the exact same definition. So that's another way. If you've got a page that you've used before, or page from one of the templates that comes from clickfunnels, or a page that's totally outside of clickfunnels entirely, and they've got some sort of a set of definitions that you like, then you can copy and paste those. And then you might have to. If it comes from outside clickfunnels, you're probably gonna have to modify the class or the selector that those things get applied to. But you can easily grab all the properties and apply them for your own styles. I'm gonna take a. How's the. How's the audio doing now for you, Dan?

It's still going up and down pretty good. In fact, it's probably the worst that it's ever been. But does it come out good on the recording?

You know, I've never listened to that point in the recording to see. I'll have to double check that after this recording and see if it comes out okay there. My guess is it probably is not. And it seems like somebody's mentioned that in the past that it's. It's on the recording as well. So.

Okay. Yeah, I haven't. Sorry.

I have noticed it a little bit.

On the recording as well. Yeah.

Okay. Okay. Yeah, so, yeah, definitely. Maybe a memory issue or some sort of an issue with Zoom that's chopping it up or maybe I'm just messing with y' all and I'm just going really going my voice up and down and just making you think it's a tech problem. Okay, so. So is this all making sense so far? You guys kind of all getting and seeing the power of like the combination of things. Is there any questions that I can answer why we're here? We're getting close to two hours. I want to make sure that it all makes sense and that we kind of fully understand it. And then we'll start, we'll jump in a little bit and I'll run through some of the things that I use quite often with clickfunnels. We've already covered on a couple of them, but I want to make sure that we kind of COVID the basics and you have a good understanding of the cascading effect of things as well as the different types of selectors and some of the properties that you can actually go through and apply. Any questions I can answer real quick?

Well, one thing I put into the chat was when you're talking earlier about putting a space between the two selectors, the two classes. Sorry. You can also put in there, you know, the right arrow or a plus sign or a tilde. And if you do that, then it obviously has a different effect. And I don't know if you want to go through that or not.

Yep. So let's. Those are called combinators, if I remember my terms correctly here. And so we've got really. So we'll just kind of walk through. This is again, be a good one to go through and kind of look at the W3 schools. They've got a great reference on this. And so the space is your descendant selector. And so it's. The descendant selector is kind of like this. So if we go back and look at some of the. Some of our elements here. So we've got this concept of. Okay, so we've got a class of container on this element that's usually our sections. So we've got a section there and then underneath that we've got a container inner. Then we've got a row. Underneath our row we're going to have columns and underneath columns we're going to have el headline wrapper. Well, I could say, okay, so I want to grab my section here. You know, I could use a combination of classes there. I could use my data title of section. I could use. I probably want to make this a specific one if I'm going to start with that. And then. But I want all the headlines Underneath of this, this particular section to have a particular style to them. So that is what's called my. So that is my descendant selector. So that's going to be, you know, so that's like what is our class here? That's container and then el headline. So el headline is a descendant of container and so that's our space. And then we've got our child selector, which is the arrow, which means it's a direct descendant. It's not a not. It's not a three layers down descendant. It's actually a direct child.

That.

So in that case we'd look and say, okay, so if I want to grab a child of container, well, the only child that I have of container is container inner. So if I said, you know, grab me all children of container that are that are row. Well, you're not ever gonna find anything because rows aren't a direct. They're not a child of container. They're a child of container inner. But container inner is a child of container. Does that kind of make sense? Did I explain that? Okay, so row is a descendant of container, but it's not a child of container. Kind of like, you know, you've got, you know, you've got, you know, grandpa and then dad and then son. Son is not a child of grandpa, he's a descendant of grandpa. But son is a child of dad and dad is a child of grandpa. Does that kind of make sense? So that's where that arrow comes in. And then adjacent sibling selector is two children that are directly next to each other and then general sibling is just they're nested within the same parent, but they're not necessarily adjacent to each other. So I rarely if ever use the plus and the in the. So the sibling selectors rarely use those. They come in handy every once in a rare moon where you have to get really, really specific something. But usually there's an easier way to get there. The child selector you do get to every once in a while. I use this for the for one specific rule and that is with the order bump because you have an element that is directly, directly a child of the content container for the bump. And it's really hard to get to that text except if you use this child selector because the way things are nested, So I do use that one. And sometimes when we don't have control over the HTML or adding classes and things like that, it's hard to get to things. So that's one that I do use within clickfunnels is this one here. And I could probably even pull up. Let me see if I can actually find this on one of my other screens here. One way that I have often used Child Selector is if I want to select all the same kind of elements within a parent class, not necessarily in clickfunnels, but in general I want to apply something to every div that's within.

Another div with a certain class.

Yeah, yeah, for sure. And so I'm going to see if I can pull up my order. So bump content. No, it doesn't look like I have it here. I just know that's the one where I've actually used that is for the order bump. I'd have to find some custom code. We'll probably go through it more next week when we go through. Actually, it'll probably not be next week, but then when we go into the next section, which is going to be the custom custom JavaScript stuff. Because a lot of these same things, and that's kind of what's cool with this. A lot of these same rules, a lot of these same selectors we use for CSS, we'll also use inside of jQuery because that's how we can select certain elements within jQuery to apply certain rules to them or take action on them. So. And we've got a few different things there that we can go through. And so, yeah, so that would be. That's kind of the difference between these. You know, space is the one you'll most often use. Child Selector. You can. There are definitely times when it comes in handy. The adjacent sibling can also come in handy if you can find the first element first and then find. Okay, I want any elements that's adjacent to this. You can use that one. But. But this page will kind of go through too and look at these things. So this child selector selects elements or children of the specified element and then this one is all elements that are adjacent siblings of a specified element. So if you had. And so, you know, if you had, especially if you can get by ID and then do this one say, okay, I want all paragraphs that are adjacent to a specific id, then you can find things that way. Does that kind of help a little bit, Dan, with what those different ones are?

Oh yeah. I just wanted to have you pointed out because occasionally you run across those and I just, you know, I was confused for a long time. I actually have a sticky note on the front of my computer just to remember them.

Yeah, cool, cool. Yeah, they definitely come in handy. But in general, general terms, the space is the one that definitely gets used more often than anything. And then, yeah, child selector would probably be the next most. They're probably honestly the most useful in the list. The way they're listed here. The child selector probably probably the next most useful in certain scenarios. Okay, Any other questions I can answer? Okay, sounds like we got none. So the next thing I want to jump into, I'm going to close this one out is let's talk through some of the things that come in handy the most often inside of click funnels specifically. And I'm gonna leave this page open. So, yeah, so we can go through this one and I'm actually gonna. We'll preview. Excuse me, Preview this one out again. So the things that we kind of walked through earlier. The tool that I use the most often to make things easier for me to actually apply styles to because we don't have the whole custom class ability, is to use that CSS data title because then we can use that. So always use that when you can. The thing that I always look at here, and this is why I use the contains, the selector for that one is you can apply multiples here. I just put a space and so you could also use dashes if you wanted to. You can put commas in there if you want to. Just want some way to actually be able to separate things. I use spaces when I'm doing it most often for my custom code. So this is my header, but it's also, you know, my logo container. It could be, you know, you know, just anything. Jamie's cool thing. And then just consider these to be a list of classes they're gonna apply differently. We have to select them differently. But then we could use them in combination. So then we could go in and say, okay, now I want to apply. I want to find data title contains Amy cool thing. And I want to apply one set of rules to that. And we'll do background color. And we'll just do again, I love my cc. There we go. Then we could do a different one because we're using contains instead of being an equals. Then we can do multiples. You can also just, if you ever need to, you could use a doesn't equal or you can use contains. And when you string these together, You can find contains two of them but not anything else. And so get this one is the. Literally find the element has a data title that contains header and data title contains Jamie cool thing. So that's one combination of things you could do. And you could set a different background color for those things. Now at this Point, we only have one of these, right? We only have one of these elements, so it doesn't make a lot of sense. But when you get to the point where you have maybe you want to apply, you know, and we can just do this like a custom class. Data title star equals cool custom class. And you can apply that to multiple things. And that one, we could be, you know, font size 48 pixels important, And we could take that and apply it and go in here and say, we're going to add that to our custom css. I'm just going to replace this one here. And so then we could go in and say, okay, now I want this to have. What do we say? Cool custom class. Of course, that's being overridden by some importance and some inlines and other things here, so probably not. I again, seems like font sizes are always a pain, but we can apply that same thing to a different element. So that was applied to a section. I can also now go and apply that same thing to a headline. And I can apply that same thing to, you know, another headline. So now I can take and add that custom client. It's not really a custom class, but it's a way to do kind of your own custom classes with inside of clickfunnels. You can apply that to different types of elements, different levels of elements, wrappers, you know, sections, rows, headlines, images, all kinds of stuff. So if you wanted to change and put border around border radiuses around different things, you can, if you wanted to do box shadows behind a bunch of different things, you can have a box shadow class that has, you know, that defines the, like the shadow that's defined here. If you wanted to put that behind text, if you want to put that behind images, if you want to put behind an entire section or an entire row, you can do that. And so that's actually a good one. Let's see if we can get that to work. So we've got a box shadow behind this element here. This is my video element. I use Cloudflare's stream product for that. But let's see if we can just get the box shadow that's behind that. Gotta get to the right level element. This is not often if I'm looking for something specific, I use the computed tab and be able to look for the specific style that I'm trying to find and it will tell me where that style is defined. Yeah, cool. Yeah. So, yeah, you've got several different tabs here. Some of these. So styles and computed apply to the actual styles that are on an element event listeners is more JavaScript. Dombreak points is JavaScript. So what we're talking about here is this style. So you can see, this will show you how much padding's being applied, how much margin, what the actual dimensions of the element are based on, what's selected over here. And then underneath you can see. Okay, so. Okay, so this element has a font family of Roboto. It's a border box. It's got a color for this. This is the font color again. We've got an outline color. You know, there's all kinds of things that you can find from here. You can actually filter down on different things. So computed will show you what's actually being applied to the elements you have selected. And if you toggle the show, all you'll see the things that are being applied, they'll be grayed out slightly, but it will show you like everything and what it. Where it's defined is being defined for that element. Yep. So yeah, we've got a box size in here that's actually being applied. Yeah, so. So yeah, definitely a cool tool if you, you know, really need to drill down to something specific you want to find. I. You do that most often if I can't find out what actual font something is, I can't see it when the. In the styles for that, you know. Cause sometimes it's a little hard to find here you're like there and you're like, man, I know I've got my right thing. I just want to see what fonts actually applied to. This might be a little hard to find. You might have to drill through a ton of this. But if you just go to the computed, then you can actually pretty quickly see the font family. So this font is rock salt. Okay, cool.

Or.

And if rock salt doesn't exist on your, on your computer or it's not being loaded properly through, you know, Google Fonts or something like that. Then it'll default to Helvetika and just basic sans serif, which all computers have. And so, yeah, so that's one quick way to find things like fonts, you know, if you can't see them in the styles very easily because here. Oh well. Yep, I finally find it. My data, my el headline wrapper data H type of headline has font family applied to it. But you know, that's like way down the list. But sometimes it's easy to scroll past it, but computer will show that. So yeah, so we've got. This is actually the. So this again, if we drill down, we'll find the box shadow definition. We can do that. It's actually the EL custom JS element. So why is it not taking me there?

Jamie, did you say you're serving that video through Cloudflare?

Yes. Yeah. Cloudflare has a new service that's called. That is called Stream. And so you can pay them instead of hosting with YouTube or hosting with Wistia, or you host them with Vimeo, you can actually serve it directly through Cloudflare and they give you the custom embed code and then you can modify. It's basically give you a full API to their player so that you can actually use that to custom build. So that's why I did this. I wanted to be able to do. And this was before some of the other services were using this. The ability to have the click to turn on sound, the big play button that overrides it, and actually have it loop in the background with no audio so that all browsers will accept it. And then when you click to play, it will actually restart the video back at the beginning and then you can pause it from there. So that was the big one I wanted, is I wanted to be able to scroll back to the beginning when some. Whenever somebody clicks on the play.

Okay. Do you like that better than Vimeo or Wistia?

Actually, after I built this out, Wistia added pretty much the same features to theirs. So the right combinations of play buttons and controls and Autoplay and versus being muted and all that will actually get you the same feature within side Wistia now direct. So it's definitely much easier to use Wistia and then, you know, and set the settings so that they do the same thing. But I do like that. Let the video, let the motion play in the background with no sound. But when I click Play, then I want it to go back to the beginning of the video if it's not been played before. Because what you'll have a lot of times with the default settings will be to autoplay if possible, which means in most cases you're gonna start without sound. But you know, if somebody's sitting there for 30 seconds on the video before, before they actually click Play, then the default settings will actually start playing the sound at that point and just carry forward. But they have, they may have missed what was actually said. They may have missed the big hook at that point. So I like to skip it back to the beginning of the video so they hear it from the, from the beginning forward. So Wistia is good for that now. But they weren't When I built this for mine, because they didn't have that option, this was. I rebuilt this kind of right when YouTube was making some major changes and browsers were making some major changes for not allowing autoplay with sound when the. When the page first loads. So, yeah, so we're looking for the EO custom JS element on this. I know that's where it's at. It's not going straight there for whatever reason. So I just want to do. Where's my file? Why is my find not coming up here? There we go. Yeah. So here we go. So here is my video element, right? And so I've got a box shadow applied to this. So I want to say, I want to find that same box shadow. And let's see, is it played to that JS code? Here we go. So it's my el, this class, this element is where I've got that applied. I've got EL custom JS code. I've got a box shadow that's applied. I've got my big old 10 pixel thick border applied and I've got a border radius of 5 pixels. So that's my rounding at the top. But I want to use this box shadow. I kind of like that, that type of shadow. So I can actually grab this box shadow and grab that. I'm going to just grab the text of that and I'm going to go in to my editor here and we'll put this in. And I want to say data title star equals box shadow. And I want to paste that in. And so one thing that we'll notice here, you may see this, if you're ever doing inspecting on your pages and trying to figure out what's going on, is this one actually has three definitions. There's a WebKit box shadow, there's a Moz box shadow, and then there's just a plain box shadow. Some of the special properties in CSS aren't necessarily always supported in the same way. So WebKit is Chrome, Moz is Firefox, and then box shadow is just. If I can't apply either one of these directly, then apply this one. And so sometimes the way they're handled is slightly different in different browsers. So this is going to be what gets applied. If you have it defined and you're in WebKit, which would also be Safari, I believe, then you're going to have. You can slightly change the rules. In this case, they're all the same, but this just gives you a little better control. And you'll also notice that when we look at these rules. That WebKit, Box Shadow, Moz, box shadow are not being applied here. It's the box shadow that's actually being applied. So these are kind of ruled out because this one is supported directly as just box shadow. So we're gonna apply that one. So if you ever notice that, that's why this is kind of a specific rule specific or webkit. This is a rule specific for Moz, which is Firefox again. And so. But box shadow is there. It's the latest one in the list. And so that's the one that's actually applied. The other two are overridden by this one. And so but now we've got a custom rule that we can apply to multiple elements on the page. So if we go back into our editor and say, hey, I wanna apply that box shadow to this whole row, or let's say this whole section, I can go in and I can say, that's my video top. I can say box shadow and update that and then take my rule and grab that rule and go into custom CSS and go down to the bottom and hope this one doesn't make me look like a jerk again, which it doesn't. So now we have that box shadow applied to that entire section. And now if we want to do that same thing for this section, we could go and do that same thing. Click update. And now we've got that box shadow around that same thing. And you'll notice that, you know, hey, I kind of like this box shadow. I built it specifically. It's got the shadow just above and on the sides, but not down at the bottom. And so I kind of like that style of it. And I want to apply that to all my different things. So this gives me a way, you know, I could do. Okay, well, I want to do that to, you know, this section, you know, so you can just kind of apply that same thing in multiple areas and only have one rule, which makes it really nice. And it's, you know, outside of clickfunnels, it doesn't, you know, some of these things don't. You can't do with clickfunnels directly. So the other thing I could do is add me. Well, hey, I wanna add a border radius. It's like instead of, you know, I wanna change that same thing, I wanna add border radius to all of them. Instead of having to make that change multiple times, I can actually go in and change my rule once and just say, okay, for my box shadow, anything that has my box shadow element here, I wanna do A border radius of, you know, say 10 pixels and do that. And now I can grab my rule and go back in here and go into my custom CSS again, and I just want to rewrite that rule. And now that's applied, and now I should see that I get a border radius, and I've got it. Now the default for border radius is to actually apply it to the entire element. So I've got applied my border radius here. You'll notice it's at the bottom as well. And it gives you kind of this weird overlap because we've got this, you know, the next sections there. We can fix that by just changing the top margin of this. So now we've got this radius applied there. So maybe I don't want this. I don't want, you know, maybe I want it applied at the top to be rounded, but I don't want at the bottom. What we can do now, because we've gotten this radius here and we don't have the radius on the other things around it. We don't have, you know, we can actually do border radius. That is so. Or the. Yeah, so we can do border radius and break down. So let's actually play with that. These are just things that I'm throwing out there, so that kind of aware of what the options are. So now we've got this border radius here that's set to 5 pixels, but we can also do border radius. It might be border. Yeah, I think border radius will support up to four options. So. And I believe it's been a while since I've done this. I think the. I think the top. I think it's top left is first. So 10 pixels. So it kind of goes clockwise, right? So top left, top right, bottom bottom right, bottom left. So we would just want it to be at the two top corners, right? And then we want it to be 0 and 0. So now if we apply that and take a look. Now, these are square, but the top two are rounded. If we wanted to do 10 pixels, I believe another shortcut way to do this is also to say 10 pixels and 0, so that the first one is the top left and top right, and then the second one is zero, which is the bottom. So maybe not. Maybe that doesn't apply on this. Oh, it's actually opposite. So we can kind of see that that goes 10 pixels zero, and then 10 pixels zero. So in this case, we don't want that. We want. So we're gonna define specifically 10 pixels and 0 and 0. But if we did it opposite and make this one 10 pixels. We could also have it rounded there. So now we got three corners rounded. So we've got some options and a lot of things where you've got containers, boxes, radiuses, all that you can actually apply different levels. Padding is another one. Just so you know, padding and margin are the same way. So if you've got an element in this one, say we wanted to apply padding to this element. We can do it as this one. It starts at. It starts top and then right and then bottom and then left again clockwise. But we can do individual settings and say, padding, top of 20 pixels. And now we'll notice that we've got padding up here. Or we can do it just padding. If we do just padding. And we want the padding to be 20 pixels, that's gonna be all the way around on all sides, it's gonna have a padding of 20 pixels. But another thing we can do is say, okay, so if I wanna set padding independently between top and bottom and left and right, I can say 20 pixels. And zero will apply 20 pixels of padding to the top and the bottom. And then second one is the left and the right. So 20 pixels. If we just have two numbers, that's what you get, 20 pixels and zero. Then we could say, also if I want maybe more on the top and less on the bottom, I can do 20 and 0 and 10, which is gonna give me 20 up at the top, 10 at the bottom, and 0 everywhere else. Or if I want, say Maybe I want 5 pixels on the right and 0 on the left. Then we'll get 20 pixels at the top, 5 pixels on the right, 10 pixels on the bottom and 0 on the left. So these are some shortcut places where you take numbers where you can, a lot of times reference multiple numbers and different things. We'll notice that also on the box shadow, each of these represents a different number, the different aspect of box shadow. And if you look up the reference on box shadow, we have like the distance, the blur, the. Yeah, I forget what all four of these are, but you can actually look through these. And then obviously we have our color of the shadow. We can also change that if we wanted that to be a different color for the shadow. You can make a red shadow if you wanted to. Yellow shadow, green shadow, blue shadow, whatever you want. You have options for that on the shadow. But you'll notice that the four different numbers represent different aspects of how the shadow is generated. So, long story short on that one is that we have a ton of different properties, and a lot of times you can shorthand those and define them all in one place. Or in the case of padding, in the case of box shadow as well, you've got. You could do box shadow, I believe there's a box shadow blur, there's a box shadow distance, there's a box shadow thickness. There's all kinds of different things. So you can look at those. But basically, this rule of padding all in one space is doing the same as padding top 20 pixels, padding right of 5 pixels, padding bottom of 10 pixels, and padding left. Oh, boy, left of zero. And so you can take all four of these rules, combine them into one. You can do the same thing with border. You can take in border shorthands, accepts certain properties. I think there's three or four that you can put onto a border, or you can just define, you know, a hundred different border settings all individually. The other thing you could do is say, okay, for this one, I'm gonna make my padding 20 pixels. Let's go ahead and get rid.

Of.

Ah, there we go. Okay, so I want padding all the way around, except for on the bottom. So we'll just do default as padding. I want padding 20 pixels. And then I want to say padding bottom zero. And so this is again, shows just kind of the cascading effect of this is we've got one rule that sets the padding all the way around all levels of the padding on this element to 20 pixels. But then I want to override that, a very specific one to just for the bottom, I want to replace that 20 with zero. So then I can call out and just say pattern bottom zero. And so all the other ones stay applied. But I've got padding bottom is overridden. So that's the cascading rule top to bottom, because it goes the other way. And you can see it's overwritten here. So if we say we want this padding bottom to be zero and padding be 20 pixels. Now we have 20 pixels at the bottom, which we don't want. That's because padding bottom is set to zero here. That comes before the padding, which is overriding the padding on all levels, including bottom. So this is another feature of the cascading effect. So the rule that gets defined first will be overridden by the rules that come after it, unless they're more specific or they use the important flag. So in this one, we could say zero important and now notice our padding bottom goes away. So again, just another example of how cascading applies even in within individual groups of styles and how it's applied. And so that was a long way to say you can use these sorts of things just like you would classes. So the CSS title is something I use on a daily basis. I use it in custom CSS as well as within my custom JavaScript. I use the same data title aspect to help me find things on the page in a specific way and to be able to find multiples of things in a specific way. So I use that quite a bit. So let's get rid of some of this stuff while I'm thinking about it. Clean this up. So get rid of that. And that shows too the other thing that you can see, which as soon as I got rid of this from the custom css, it was gone. We can see that all those styles that I already find on this page in custom CSS where I've got valid selectors and everything else, they're being applied, I can do a lot of things with that. If I set this max height here, I can also comment that out. This is how you do comments in CSS is by doing a slash and a star and then a star and a slash. So that creates a comment. And you can comment individual things. And you'll see when I start the comment there, it blocks out everything after it. But then I want to end it. This is still being applied. So you can block out specific rules. The other thing you can do is say I want to. I had one up here, I thought, yeah, so like this one, you can comment into comment, comment out individual pie. So now instead of being, hey, find me all the el order product opt in products and then this class, you could comment out that this extra in the middle and then it would just skip over it. And then so now it's going to find the PID 735346 within this element. It's not going to look for this element as well. You can do that also to comment out additional selectors in here if you wanted to. So knowing how to comment and where to insert the comment sometimes comes in handy. If you don't want to totally destroy things and lose it entirely. You just want to test it, turn it off for a moment and see if things still work. See what turns off, what turns on that sort of thing. The comments kind of come in handy as well. And so you see that. And yeah, and Dan just threw in the chat there for the border radius. We Got border, top, left, radius. That's another. Another shorthand way or the long form way to do the thing that we did with the shorthand. And then Aaron wants to know, can you use CSS to make a single word in a line of text a different color and be extra large to stand out? Not unless there's a way to select it. And that's the problem with ClickFunnels is you don't really have a way to wrap a specific word with something else. But what you can do with clickfunnels to do that sort of thing is use the text block element instead of using a headline. So down at the very bottom rarely gets used, but it is one that actually has a ton of power is the text block element. So when you insert this element, you can actually go in and open text editor. And this gives you a WYSIWYG editor inside of your WYSIWYG editor. So then you can go in and we can say, okay, we'll make this all a bigger size. So we wanna make this 20 pixels. But for this Vivera Lorem said we want that to be even bigger size. So we want that to be 30 pixels. And then you can even apply a different color to that one if you wanted to. So you can say, okay, I want that text to be red. As long as they're still supporting that which doesn't look like that one may be a little wonky now with clickfunnels.

Yeah, Jamie, I was gonna say every time I've tried to that it's been really wonky. The best thing I found is to go into the code in there or just to use a custom JavaScript box and just write the. Just write the HTML from scratch.

Yeah, and you can actually. Yeah, definitely for that. You can, you can definitely use custom JavaScript for that. The one reason I, you can see, I Rarely use custom JavaScript elements on the page because you end up with this like, I don't even know what that is. I know it's my video element because I know that what that's supposed to be. But sometimes when you're looking at the page, it's a little more representative if you can see the actual thing. So that's when I rarely use the text block element as well. I just try and craft my design and everything so that it doesn't need it or do things as individual headlines and stuff like that. So each line is a specific font weight or color, whatever, and maybe vary those. But you can do in here as well, just so everybody kind of is aware when it works properly. So we can do a lot of things with this, but you can also open the text editor here and you can actually click on the little, little tag icons here, the little HTML and view the actual HTML that's generated. And so here you can actually go in and we can see, okay, we've got a paragraph, we've got a style applied, we've got a style inside of that or a span applied and another inside that span. We've got our text size. We can actually do our color red here. Red like red, not red like read and apply that here and then do an update and then go back and now we have our red applied. So if you know the styles, you can actually put element, you know, put your own spans in there and give them styles directly in line. And that's another way to do it. The other way we could do it is go in here and put, instead of putting the color here because we may want to change it later and we don't have to come and come back and change or we may want to change it in a bunch of spots and we don't have to do that on every one of these elements. We can actually go in here and do a class equals red text and put that there. And now again, we can click our update and now it's gone back to black. But now I can go in and go to my custom CSS and put dot red x color red. And we'll probably need to use important on this one. And yeah, something's overriding that. Right? I didn't put the right class on it. Well, Jamie, I was going to say.

That also you could just use a regular text element and then you could bold the one word. You could change the color inside of the editor and then you could target the B tag and make it a larger font size.

Yep, you sure can. You can do that as well. Yeah. And then so that you've got obviously the building tools to do the color for your headlines based on bold. You know, you get bold color and text color and bold color. But yeah, if you want to do the size independently, yeah, you could just, you could use the same color for both the text. Well, you wouldn't even have to use the same color. You can make one, one word bold, you know, bold, make it that bold and set a color on it and then just do a font size on the B tag.

Now, my question would be, let's say you had two B tags, two different words separated that had V tags around them. Is there A way to target just the second V tag in the line.

Yes, there should be. And I think it is our nth child selector. If there's not directly with custom css, there definitely is with jquery in combination with it. And so let's just build that out as an example why we're here.

Are you guys saying B tag?

Yeah, B as in bold.

Okay.

Oh, okay. Okay, gotcha. Okay. Because I've done like the.

When you're changing the text color with.

A bold and stuff. But yeah, no, because I like that. Thanks, Dan. I like that idea of doing that B tag.

Would you also be able to change the font for that, like, single word inside of, like the HTML?

Yep, you sure can.

Okay, awesome. Awesome.

Yeah. So let's get rid of this here. So we'll delete this element out and then let's throw in a little different headline. We want to throw in a headline, Make these all not bold. And then we'll call this one bold. We'll call this one bold. And so now we've got our headline here and we got a bold tag wrapped around this one. A bold tag wrapped around this one. And then what we can do. And this is what I was gonna look up real quick. I forget the exact selector for nth child css. Inth child. And yeah, so we'd say inth child two. So we can say, do a little custom CSS here. We'll say. And what I'd probably do on this one is give this particular headline CSS title. There we go. And so we'll call this bold headline test. We'll update that bold head test again. Remember that? So data title star equals old head test. And then we do inth. Actually, let's do. Let's just leave. We'll do B within those. So we're going to select all the B elements within this container and we're going to set their font size to 2em. This is something we hadn't covered yet, but we were get to 2em is a way. Instead of saying a particular pixel size, you can say this says basically two times the default font size for the element that wraps it. So two times the default font size of its. If there's a font size defined for this thing or of its parent, it will kind of look up the chain until there's a font size it can find that needs calculate, and it will set it to two times that. So we'll say for these B tags within this, they're going to be two times the normal size back within Here, go to custom CSS and we'll scroll down. Go ahead and get rid of this. And so now we've got that bold head test B. Oh, probably need to make that important. And you don't have to do this in a separate editor if you don't want to see us. You can do it within here. I just find it's easier to get it a little bit bigger where I can read it and set it up. And it's still not applying the font sizes in here. Like to mess with me. Seems like every time I try and override a font size in here, it doesn't work properly. And I don't want to change this page while we've got it live. So I'm gonna pick another funnel here and we'll just do this as a test and figure out how we can override it. Make sure that it works. No, I love it when the kit and you'll notice this, the CSS decided to not show on this page for some reason. So you can see this is what the pages look like when you don't use cascading style sheets. Oh, and it's not applying anything. So let's try this a different route. See if I just had a minor freak out. There we go. That's what should happen. And now we can create a new funnel and we'll just do a collect emails. Oh, geez. Kind of lagging. So I'm having trouble typing too fast. Okay, we'll put CFCodelab on this one. We'll build the funnel. And I like doing just super simple here. We just want something with a basic headline here. Let's just use this one here. This is one of the old go tos. And we'll go and edit this page. And we'll use we'll say this one. We want to be bold. And now we'll get the colors. And then we want this one in the middle. That's another bold span here. We got, you know, that wraps around this whole thing. We want that to be extra big. So that would be our nth child. And so we'll save this one and then we'll preview it. And now instead of going and doing this whole thing, we'll just do on the el headline. El headline B. Let's make sure it's our B tag that's actually being applied to these. If we look at this here and inspect it, then yeah, so we've got a B tag here and then we've got the B tags here. And so that's what we Want to target on. Right, so we want to look at that. And let's see, if we were to just do this in here. And so we want it to be EO headline B. We want font size of that to be 2emporant. Okay, so now we can see that. Okay, that makes both of these sections of V tags twice as big as the default size. So probably don't need twice as big. Maybe we just want it to be like 1.1 em, so slightly bigger, maybe 1.5 em. So that's a good bit bigger, maybe 1.3. So we'll do 1.3 on that. Okay, but we don't want it to apply like, I think it was Dan that was asking, can we apply this to just like the second one? So that one we say, okay, well, we don't really want it to be both of these. We just want it to be the second one. And so what we can do here is in our definition, we use the nth child selector with a value of 2. And now we notice that our first B tag is the same font size, but the middle One is the 1.3 EM. So this is bigger. So, and then, you know, if we did it here, we could say three, but there is no three. So then it's not gonna apply to either of these. But if you had, you know, where you had multiples. And you can also use this as to just select this. And so now if we go, the first word is modified, and if we do believe it is this. No, I think it's this plus in this one. So this might be an example of. No, I think that's because these are actually both children. So I was trying to pull up an example of the actual selectors where you could use to grab just the first element, first child within that element. But it might not work in this case. But yeah, so in that case, you just use your Nth child to select a specific element. Since we can't, you know, actually apply a specific class or a specific wrapper other than B around these and we have multiples of those, then that's how you would get to that second one. Yep, yep. Jeremy says that's another type of pseudo selector. Yep, sure is. Yeah. And there's a bunch of them. And there's some that you can use in jQuery that we'll go through that will work in jQuery that don't necessarily work in. In CSS directly. And we'll kind of go through some of those. Another one, I think that should work here. That's a pseudo selector as well as first child. So you'll see that one works as well. So that selects just our first B but not the second one. It's just basically a shortcut to the nth child one. But that's another option that you have. And so, and it's the. The way this applies is el headline give me the B element that is the first child or give me the B element that is the nth child to of el headline. Does the last of kind work in css? I'm not sure what you mean there, Dan.

Isn't there something in jQuery at least that's like you can select it like first of kind or last of kind.

Maybe I got the wrong that that's possible. I've not used that one directly. You can do a dot first. You can do a bunch of different things. But yeah, I'm not sure if that's. I've never used that pseudo selector in jQuery. But yeah, that doesn't appear to be one in CSS at least that direct child. Direct descendant selector is. That's a case where I would use that I would use the ID for that element and then direct descendant of is B so that it didn't do it on any other of the other, you know, bold tags on the rest of the page.

Right.

Correct. Yep. Yeah. So yeah, if you wanted to select, you know, yeah. B tags of just this just underneath here, then you could. Yeah, so. So yeah, so there's definitely some cool things that you can use CSS for that just don't seem that simple otherwise when you're trying to, you know, modify headlines colors. But you know, you can do a lot more than just color because we could also say that we want the color on this one to be different. And we're gonna need the important there. Yeah. So that's, you know, another option. You can use a different color for that one and you know, there's. There's a ton of different things that you could do here. So. So yeah, so hopefully that answers that one. Aaron and Dan as well how to get to the, you know, a specific child element within a list of selectors. So let's see here. What else do we want to cover? Any other questions you guys have while we're kind of going through this. Sorry, somebody's knocking at my door right now. I'm not sure who that is. Let me take a quick look. See my drive? Anybody in my driveway? Generally that around here is door to door pest control. So not sure on that one. But yeah. Any other questions? To change the font? Is it just font? No, Aaron, it is actually font style or font family. So if we look at this one, we can see that we've got should have on this headline element a font family applied somewhere down the chain. No, we'll just use our computed got font family is just basic sans serif. So if we wanted to do something different on this one, we could go and say font style. So where's our roo? We want that and that will give us our rule here. So we wanna do font family. And then you've got all kinds of different ones you could pick from. These are just basic font families. So we could do a serif font on that one. Let's get rid of this yellow. Let's make this red or something else, because actually it's purple different. There we go. So we can see that a little bit better. So that's just a basic font family. You could also do specific. So serif is just super basic. It's not a specific font. It's just whatever the default serif font is for your browser for your operating system. Sans serif is, you know, do the same thing. That's what it's already applied to. We could do cursive. So this is just like picking the default font for the style on your operating system. But you can also do ones like Helvetika. Helvetica. I don't know how you want to pronounce it. That's a different one. You could do Roboto might be one that we have built in, you know, Arial. Banana. So you can kind of apply different specific fonts that are built in. And the other thing is, if you import your own fonts, then you would. You can actually just call out that font family name. So, and that's. That's probably a good one to go through. If we wanted to do, say we wanted to import our own font that's not part of, you know, not part of Google Fonts or is not one that's included by default for clickfunnels, you can actually go to Google Fonts. And let's see, Google Fonts. One that I like to use is Montserrat. So we can go to Montserrat here at Google Fonts and they make it super easy to import this into your style sheet because they kind of will do all the hosting for you. So we want to select this font. And let's see here we want to go. This is kind of like the little cart. And then we have the ability to embed this font. And so it's. So we want to do an import. So the standard is to actually include a link tag, which you can do, and you can put that into your header codes. So that's one way, but you can also do it with an import in your CSS file directly. And so then all we really need here is just the port rule. We don't need the style tags because those are already built into the page. But I do want to grab the port and then I can go into my style sheet. Actually I can just go straight to my custom CSS in this case and I want to go to my custom CSS and I like to do all the imports up at the top. This one, we have nothing else, so we'll just do it there. And what this says is, hey, go to this URL and pull in this as a font. And then we have that font now available on our page. So we'll. It's not actually gonna apply it anywhere, but it's at least available on the page to be used. So we can use custom CSS to add, add that font. And so now let's refresh this so we'll get back to our basic, basic display. Okay, and now we can do that same thing. We can go in and say, hey, I wanna, I wanna look at bold tags. And the reason I'm going and doing this is so that we actually. It's gonna select that element. So we'll see the rules still apply. You may notice sometimes if you just add a class and it's not a class that you actually have selected over on the left hand side or not an element you have selected on the left hand side, then as soon as you're done adding the class, it'll just go. You won't see it in the Inspector anymore. And that's just because it's only going to show you the rules for the element that's currently highlighted. So in this case, we're on this B tag, but we want it to be the el headline B int child. Actually we did. We want it to be that first one. Right. So we'll do first. Child. And then we want font family and we want to put Montserrat. If I spelled that right. Yes, there we go. So that's. And then you could have a default. So the. With font families, you can actually have several listed and commas, as many as you want actually listed in commas. And it will just go down the list looking for the fonts that you have included. So if we didn't include Montserrat there, then it wouldn't. Then it wouldn't apply. If we didn't import it and we applied. Tried to apply it here as font family, it just wouldn't do anything. But then if we put Helvetica after that, Helvetica, however you want to pronounce that one, then it will try and apply that. And so you can see here, now it's changed to Montserrat. Because. Because we have that. We have that one on. But now if I go and I change this and so let's do that. Let's take that rule that we just applied here. It's like, okay, yep, I like it. Now I'm going to copy it out of here. And now I'm going to put it into my custom CSS and I'm going to go custom CSS. And I'm gonna go headline B. First child font family Montserrat. So we've got that. But now if I take. And so let's just test that first, make sure that's all looking like it. Doing what it should. Okay, so now I'm gonna refresh the page and we should see it come back exactly the same. Yeah. Once it loads. So now we've got a custom CSS loaded. So now we see. Okay, yep, that. That looks like what we expect. It's what we just had the applied. And now if I remember this correctly, Montserrat is not one of the default fonts that's pulled in for our pages. So I'm just going to comment that out and we'll see what that looks like when we don't have that font installed. It's possible. This is. I don't think I have this actually installed on my system. So now we should see that showing up as Helvetika. Once it finishes loading. Yeah. So now you'll notice we don't have that Montserrat applied. So let's do inspect and look at the computed on this particular element. And so we see Montserrat and Helvetika, but we know that it changed because we don't have Montserrat installed. So it's using Helvetika instead. Yeah, so that's kind of how that works. Now, if we just take off our comments and import that font again, then we can see that reapplied. So now when it loads, the font's loaded now. So now we're back to including that font. So that's how you can kind of change the font styles using the font family. And there's a few others that you can use. So one of the other things that we can look at is say we used. We used the bold tags here to select these to basically just to give us a way to tag onto one of the pieces of text within here. Right. So we use the B tag and first child to grab the first thing that's bolded or the. Yeah, the first element that has a B tag on it or the first B element inside this. But what we can do is we can actually. Because everything else is not bolded. Right. The rest of the text is not. We've got these two that are bold, but maybe we don't want this to really show as bold. We just wanted a way to make it a different color and way to modify the font size. So we can actually go to our custom CSS here. And I'm going to pull this up in this editor because it's a little bit easier to see. So we'll give out B. Oh, boy. B And first. Well, let's do this. Let's do B first and then font weight. In this case, we don't want it to be bold. We want it to be normal. And so we can do that here. And we can apply that rule to our custom css. So now we're saying all the B elements within this headline make them font weight normal. And so if we save that, We may have to go back and add the important flag on this one. Nope, we got it. So now they're all the same style. All of the text is not bolded. But we got our colors different, and we can do our different font size on this one. So if we go back now and look and say, okay, but I want that first child to be bolded. Want here, let's do it in here. So it's a little easier to see. So now we can go back in and say el headline, B, first child want weight bold. And we want to make that one to be. We wanted our font family, the Montserrat. Helvetica, so we've got that. And then we want the font size to be our 1.3 EM. And we'll have to do the important on that. And now we can grab that code and we'll just go in and put that in here. And so now we should get back to where we have. Once it finishes loading, our font family will be Right. What did we miss? So our B tags, font weight, normal. Font weight bold, Montserrat. I don't think it likes this not being in quotes, even though it doesn't display that way in the browser. There we go. Because the. The default ones that built in to your system, they don't have to be quoted, but I like the ones that are not part of the. And ones that have spaces in them, which some. Some of the Google fonts do. They have to actually have quotes around the font family name. So let's see if that fixes our issue.

You also have an extra semicolon on the third line after the curly brackets. I don't know if that'll kill it or not.

Oh, yep, it sure will. That's exactly why it wasn't working. Thank you for that. It's always good to have a second set of eyes. Okay, there we go. And now we should be back to where we want to be. So we'll try profession this now. And now we should have. The first one should be bold, bigger size. And now it's also a different font. So kind of combining those things all up, doing, you know, using the. Use the cascading prospects. Yeah. Properties of cascading style sheets to apply rules to spec. Very specific elements. So we're saying all B tags should be a font weight and normal. But then for the first child B tag, we want that one to be bold. We want that one to have a different font family and that one have a different font size. So. So, yeah, so there's. Those are some things that we can do to help kind of override specific features of clickfunnels that, you know, they don't give us a way to apply custom classes or highlight a specific word within that, other than using the V tag that's just coming out of the box with clickfunnels. But we can still override some of those things very specifically. And Dan says what. What I was thinking of was the be first of type or be last of type or be nth of type. Yeah, I'm not familiar with that one at all. I'd have to even look up the docs on that one, but I'm not familiar with that one. Let's do just a quick Google over here and see what we got. Css. Oh, come on. And see if that's just a legit CSS selector. Yeah, looks like it is. Int. Last of type. Last of type. Int last of type. Yeah, it looks like we got a bunch of different ways to use that one. That's. That wasn't one that I'm familiar with. I'm wondering if that's a. Maybe a newer. Newer selector, but I've not used that one. But certainly could. And.

I've used it in jQuery before in a survey element so that when somebody got to the last survey element that was the last of type and then I could inject some code to. I forget what I did. Open up some, I think is what I did.

Yeah. Yeah, that totally makes sense. Yeah. And pretty much anything that you can use as a selector in CSS you can also use in jQuery. There are just a few that work in jQuery that don't work in CSS because jQuery adds a few to make it a little bit easier to find things. But. And they're usually, you know, they're just kind of shortcuts to a built in function somewhere. But pretty generally they're, they're pretty close as far as selectors and the structure of how you would find things. And we'll definitely see more of that when we go through the custom JavaScript section coming up in the next. The next session. So. Yeah, so that's a good one. That could definitely come in handy. Similar to, you know, nth child. Nth of type or whatever. Yeah, that. That can definitely help. So. Okay, cool. Any other questions I can answer along the way? I think we've covered a lot. We're almost three hours in right now. We'll go through probably a lot because so many of the things that we do in CSS will also carry over into how we select elements and how we modify elements Inside a custom JavaScript in jQuery. That will land on even a few more things when we get to the next session. But hopefully this has been a really good primer on what's available, what to do and how it applies in the cascading aspect aspects of cascading style sheets to kind of get a pretty good foundation of this. So any other questions that anybody has did this. Do you feel like this covered the things that you would want to know? Do you feel like you have a little more power now to go and modify some things in clickfunnels and your pages with css? And Richard says how would you upload and use custom CSS non Google fonts? And so if you've got a font say that you've purchased and you want to use that font in your page, you'd basically go through the same process as we have here with the, that we have with the import. The issue is that you're gonna have to host that yourself. And so you know, we can do an import here and this is all just calling a URL. This is just Google is hosting this font family and they actually host all of the CSS you need and everything else for this font directly on their server. So you can import it from there. If you have your own font that you've downloaded and you know, purchased somewhere, something like that, then you can actually take those that file set and load it to your own server somewhere. A lot of times It'll use Amazon S3, you can load it there, make sure it's publicly available and then do the same thing, do an import for that. And sometimes they'll give you an actual snippets of styles. So you'll reference a font and then they'll have some CSS that you can use depending on your service and you can actually host it yourself that way. And then you would just do again an import there or an import and copy in the custom CSS that they give you. So hopefully that makes a little bit of sense. Fonts can be a little. Yeah, they can be a little tricky to deal with. That's why I really like using services like Google Fonts that give you, you know, they just do all the hosting for you. It makes it super simple. And honestly, I think unless you have a very specific reason to use a certain font that maybe is not available in Google fonts, like your brand, your logo or whatever has a very specific font used and you want to continue that through, I would recommend just sticking with Google Fonts. They make it super easy. And you can even customize things here and you can include so out of the box, it's just including for this, the regular 400, but you can include different, you know, different styles. And then you can use these things directly from within here. Obviously the more font weights that you include, the longer it takes to load. But even then it's still pretty, you know, pretty fast. And so, you know, a lot of times if you want a bold one, you can just include the black 900 here and do extra bold 800, whatever that you want to use as your bold. And then you can. So that customizes your embed and we'll notice it adds Montserrat 400 and 900 to this. And then we can include this and go back into our custom CSS here. And now we just wanna change out that, that list. So now we're including two different font weights of this 400 and 900. And so then we can also go into this and instead of saying font weight bold, which really, if we look at this, it really didn't make this bold. It's the same font weight 400, because it's only including that one font weight. So now we can say font weight 900 because we've included the 900 font weight of that font. And you'll notice right away that even within here we now have that much, much thicker. So that's something you can do with Google Fonts. They make that super easy to do, super easy to include the specific font weight you need and customize that, and then you can use that to customize the actual font weight. So that's something else you can play with to really customize those fonts. You just have to make sure that the font weight that you want to use is actually included. Because out of the box, they only include usually the regular font weights. Some depending on the actual font they may include, others they may have much less available. So they include them all. But that's something else to be aware of with Google Fonts. Again, I would highly recommend only using fonts that you can get through Google Fonts if you're going to do your own custom fonts that aren't part of ClickFunnels.

Well, and Jamie, that file you were talking about, I think they can probably upload that to digital assets too.

Yeah, could probably do that as well. Not tried that, but yeah, I would imagine you probably could. And then Richard asks, when you upload your own fonts, will it show up as a font family? As far as it will not show up in clickfunnels or anything else different as a font family, but you'll still reference that font family name when you say, hey, if you've. Say if you've done your own, you know, roboto font, which is actually one of the defaults in clickfunnels, but say you've embedded that and you want to use that one, you would still use the font family property to use that font family name to actually change your text to that font. Hopefully that makes sense selection. And specifically we should be aware of. To make custom CSS changes, the order bump formatting. Okay, Collins was just asking about. Let me do this. I'll actually, I'll probably put a separate video into the Facebook group with this one. I'll have to go find the code that I have to use the child selector with with the. With the little arrow of how I use it to modify the bump offer text. So I'll do a separate video on that one. I'll try to do that later today. I'll do a loom video on that one and I'll throw that into the Facebook group so that everybody can find it there. But yeah, that's. That's one place where I've actually used that because it's a little difficult to get to that text unless you can use that actual child selector element. So because you need in that case to. To grab the first P tag, I believe. I think there's a couple of in there. And so you could use the Nth child. You can use the direct. The child selector. But yeah, I've had to do that. It makes it a little bit easier that way. So I'll do a quick video on that one so that we know exactly what we're talking about there and then any other questions I can answer why I got you on today?