This is Sasha and welcome to another CSS training video where I share with you how to make and modify your business pages when it comes to CSS. Now today, we’re going to take a look at some of the better practices when it comes to CSS, and I’ll give you some tips along the code. Let’s take a quick look.
I have some basic CSS set up in fact on a straightforward page. I have an H1, H2 and H3 set up and here’s just our basic website with some paragraph tags and a video. What I want to do is show you the power of CSS and how to combine things. When your writ8ing CSS code, everybody has their style.
In this case and example, you’ll notice that I have a few items that are the same in all sorts of classes, right or all kinds of types of elements. In this case, we have to underline on a few of them. We also have uppercase on a couple of them.
--------------------- HTML CODE ------------------
Welcome to my Website!
Now on your website there might be a place where they go ahead and enter their name and their email address.
There could be a video above that explains why. It could be that you take them to a lead page or a landing page
but in either case this is your email address collecting area.
My Business Products
-
- Start Trading Stocks
-
- Business Launch Pad
-
- 100 Stock Trading Tips
About Me
Now on your website there might be a place where they go ahead and enter their name and their email address.
There could be a video above that explains why. It could be that you take them to a lead page or a landing page
but in either case this is your email address collecting area.
My Schooling
Now on your website there might be a place where they go ahead and enter their name and their email address.
There could be a video above that explains why. It could be that you take them to a lead page or a landing page
but in either case this is your email address collecting area.
--------------------- CSS CODE ------------------
h1 {
color:red;
text-decoration: underline;
text-transform: uppercase;
}
h2 {
color:blue;
text-decoration: underline;
text-transform: uppercase;
}
h3 {
color:#39ad73;
text-decoration: underline;
}
Here we have different colors though, so the colors are different on all three versions. What you typically want to do when it comes to CSS is always compress your code as much as possible. That helps to load things up a little bit faster. The more you can shorten your code ultimately the better and that’s what you’re trying to do. There’s a small balance that happens between compression and readability and that eventually comes down to you.
There are also some code compressors that can compress CSS code that once you’re done writing your code like this, what you can do is go ahead and re-output it for the things that you use on the web in a compressed version which I’ll show you in a little bit.
In either case, what you want do is – the point behind this is if you notice like you have these heading tags and all we’re doing is playing with these. I have three different colors but the text upper – is uppercased on both of these H1 and H2 tags. What I might want to do is go ahead and combine these. I can go ahead and connect the text-decoration on both of these and the text-transform property on both of these.
I can go ahead and do something like this, okay, and get rid of this like that where the color is blue on all of them and red here for the H1. If I refresh, it’s no different. The code has not changed. Then what I can do is instead of on multiline, I can go ahead and compress this code to be a little bit more like this, okay? That’s another thing that I can do.
--------------------- HTML CODE ------------------
Welcome to my Website!
Now on your website there might be a place where they go ahead and enter their name and their email address.
There could be a video above that explains why. It could be that you take them to a lead page or a landing page
but in either case this is your email address collecting area.
My Business Products
-
- Start Trading Stocks
-
- Business Launch Pad
-
- 100 Stock Trading Tips
About Me
Now on your website there might be a place where they go ahead and enter their name and their email address.
There could be a video above that explains why. It could be that you take them to a lead page or a landing page
but in either case this is your email address collecting area.
My Schooling
Now on your website there might be a place where they go ahead and enter their name and their email address.
There could be a video above that explains why. It could be that you take them to a lead page or a landing page
but in either case this is your email address collecting area.
--------------------- CSS CODE ------------------
body {background: #fff;}
h1, h2 {
text-decoration: underline;
text-transform: uppercase;
}
h1 {color:red;}
h2 {color:blue;}
h3 {
color:#39ad73;
text-decoration: underline;
}
If I had another thing where H3 tag is also underlined, here’s what happens, because H3 is underlined but it’s not uppercase so what you could do here in this case, so you could go like this and do text underline for everything but the transform is only for the uppercase for just the H1 and H2 and then I can get rid of this underline right here.
--------------------- HTML CODE ------------------
Welcome to my Website!
Now on your website there might be a place where they go ahead and enter their name and their email address.
There could be a video above that explains why. It could be that you take them to a lead page or a landing page
but in either case this is your email address collecting area.
My Business Products
-
- Start Trading Stocks
-
- Business Launch Pad
-
- 100 Stock Trading Tips
About Me
Now on your website there might be a place where they go ahead and enter their name and their email address.
There could be a video above that explains why. It could be that you take them to a lead page or a landing page
but in either case this is your email address collecting area.
My Schooling
Now on your website there might be a place where they go ahead and enter their name and their email address.
There could be a video above that explains why. It could be that you take them to a lead page or a landing page
but in either case this is your email address collecting area.
--------------------- CSS CODE ------------------
body {background: #fff;}
h1, h2 {text-transform: uppercase;}
h1, h2, h3 {text-decoration: underline;}
h1 {color:red;}
h2 {color:blue;}
h3 {color:#39ad73;}
You can see, the code is still the same. Ultimately all I’m doing and the main difference between this is really just the colors. You can see how I’ve compressed that code.
There are code compressors, and I want to show you one of those code compressors so you can see but ultimately if you go to Google and when you’re on Google, you can type in CSS code compressor and find one that you like. There’s different once, and I can’t tell you which one is better because they’ll change from time to time.
You can see there are different variations where you can see highest, no readability, smallest file size or low, higher readability. If you say higher readability, look at what it does, is it just expands the code, and it makes it easier to read. But I go ahead and compress it, let’s go to the standard where it’s a balance, now you can see where it removes that addition spacing, okay?
The other thing that you can do is go to even more compression high, moderate readability. Here, you could see how it’s compressed. It’s all on single lines and the highest as you can see, it’s all together.
If I take this and go like this, it’s one line screened together. There are no spaces here in between or anything like that which is ultimate. If you’re taking a large file size and let’s say you have thousands and thousands of lines of code let’s say 50,000 lines of code and you can get it into maybe just 1,000 lines, or you’re removing, let’s 20%, 30% of those characters, it speeds up that website especially if you’re doing that, let’s say millions of times like Facebook.
--------------------- HTML CODE ------------------
Welcome to my Website!
Now on your website there might be a place where they go ahead and enter their name and their email address.
There could be a video above that explains why. It could be that you take them to a lead page or a landing page
but in either case this is your email address collecting area.
My Business Products
-
- Start Trading Stocks
-
- Business Launch Pad
-
- 100 Stock Trading Tips
About Me
Now on your website there might be a place where they go ahead and enter their name and their email address.
There could be a video above that explains why. It could be that you take them to a lead page or a landing page
but in either case this is your email address collecting area.
My Schooling
Now on your website there might be a place where they go ahead and enter their name and their email address.
There could be a video above that explains why. It could be that you take them to a lead page or a landing page
but in either case this is your email address collecting area.
--------------------- CSS CODE ------------------
body{background: #fff;} h1, h2 {text-transform: uppercase;} h1, h2, h3 {text-decoration: underline;}
h1 {color:red;} h2 {color:blue;} h3 {color:#39ad73;}
That’s starts to add up on your server resources. You can see how that code is a lot smaller and some of these compressors as I go ahead and do the this expansion here, you can see here I have H1, H2, H3, so let’s go ahead and paste that in right there.
If I just do high, you can see it’ll go ahead and combine some of those things actually for me. Actually in this one, it doesn’t. But certain code right here, they may even compress – they may even optimize and compress things together like here this code does not read and combine like H1 and H2, the text transform and text decorate together.
That’s something you have to do manually. Some others may be able to do it like here, let’s see this one, high compression even this one does not, so anyways, what you can do is you can take a look and see some of these and see if we input some CSS, let’s minify and this one actually kind of does, let’s see if it doesn’t.
This one does do it a bit because you can see it adds the commas here, H1, H2, H3, text decoration, underline. This one does go ahead and compress that a little bit better, and some of them do combine the attributes, the properties, and the elements and others do not.
In either case, the whole goal is ultimately to go ahead and compress your code as much as possible as you write and it’s also just a gentle stream or flow for – as you go back and make changes. You know, if you have all your buttons like a primary button and you want a border around every button then you go ahead and set that up for all buttons at first that way you don’t have to rewrite the same line of code time and time again and then you make subtle little changes.
That happens in my buttons when I have like a blue button and green button and red button on my website. If you go to like let’s say the rise to learn website here and we go into the books, okay, so here as you take a look at the books, these buttons, the code is all identical. The only difference here is the color and the icon that’s there. But otherwise, the buttons themselves are the same.
All I change is just the color. I may go ahead and have, you know, you have the button code right there. Let’s say this was our button code class and then what I would do is let’s say this would be button yellow and then I would have like a different color here and all my button code really is all in this one button and then I have a yellow code right here.
Then I might have another button that’s, let’s say, small and then I have like the width that’s a little bit different here like let’s say 300 pixels and font size of 12 pixels then I might have a button medium right there and a button large. What I will do is I’ll put in like a button class. Here, let’s do a quick little example.
Let’s do one quick example. If I type in a class right here, so I’ll say button and then button yellow and button small, okay? I’ll do this. This is a button. This is button yellow, button small.
We’ll go ahead, and we’ll do a quick little button, and we’ll do a border 1 pixel solid red and background we’ll do, let’s say, this color and this background, we’ll do yellow right here, yellow, okay? Then small, we’ll do font size 15 pixel, padding 20 pixels, okay? There’s our button code, let’s see here.
--------------------- HTML CODE ------------------ Hey
Now on your website there might be a place where they go ahead and enter their name and their email address.
There could be a video above that explains why. It could be that you take them to a lead page or a landing page
but in either case this is your email address collecting area.
My Business Products
-
- Start Trading Stocks
-
- Business Launch Pad
-
- 100 Stock Trading Tips
About Me
Now on your website there might be a place where they go ahead and enter their name and their email address.
There could be a video above that explains why. It could be that you take them to a lead page or a landing page
but in either case this is your email address collecting area.
My Schooling
Now on your website there might be a place where they go ahead and enter their name and their email address.
There could be a video above that explains why. It could be that you take them to a lead page or a landing page
but in either case this is your email address collecting area.
--------------------- CSS CODE ------------------
body{background: #fff;}
.btn {
border:1px solid red;
}
.btn-yellow {
background:yellow;
}
.btn-small {
font-size: 15px;
padding: 20px;
}
You can see there’s our small button, okay? If I go ahead and do, let’s say, a buttoned green, we’ll do a button background that’s green here and a button big, I could do font size 25 and pixel 30, okay? What can I do – what this allows me to do? I have a yellow button, a green button and then I also have a small button and a big button.
I could now change this to a green button that’s small, and you can see it’s green there it’s not styled perfectly, or I could change it to a big button. You can see there, that button is more prominent so I could mix and match or I could do a yellow button that’s also big, you know, and of course, if I want all the buttons to have a text color that’s white, I could just go ahead and do it this way.
--------------------- HTML CODE ------------------ Hey
Now on your website there might be a place where they go ahead and enter their name and their email address.
There could be a video above that explains why. It could be that you take them to a lead page or a landing page
but in either case this is your email address collecting area.
My Business Products
-
- Start Trading Stocks
-
- Business Launch Pad
-
- 100 Stock Trading Tips
About Me
Now on your website there might be a place where they go ahead and enter their name and their email address.
There could be a video above that explains why. It could be that you take them to a lead page or a landing page
but in either case this is your email address collecting area.
My Schooling
Now on your website there might be a place where they go ahead and enter their name and their email address.
There could be a video above that explains why. It could be that you take them to a lead page or a landing page
but in either case this is your email address collecting area.
--------------------- CSS CODE ------------------
body{background: #fff;}
.btn {
border:1px solid red;
}
.btn-yellow {
background:yellow;
}
.btn-green {
background:green;
}
.btn-small {
font-size: 15px;
padding: 20px;
}
.btn-big {
font-size: 25px;
padding: 30px;
}
That one’s white or if I do a green one, that one’s white. You can see how this works out well mixing and matching and then including multiple classes to just define the look that you want within the HTML and that’s how you do the compression and the code and the optimal way of ultimately writing this code so that way everything starts to look better.s
The same thing, if you want a border radius, so now I could do border-radius or let’s say 15 pixels. You can see, actually let’s do it even larger so you could see that right there. Here is our button, okay?
There you go, there’s your button right there and let’s get rid of the border, let’s make this black instead of yellow and now, what you can see is – okay, so I can change this to, let’s go to – we’ll turn the class as well. I’ll do black here, and I’ll change this to black. There, so you can see now it’s rounded whether I do a black one, it’s rounded if I do a green one, you know, and I can make it big right now, or I can make it – I can go small, and there’s a small button right there.
--------------------- HTML CODE ------------------ Hey
Now on your website there might be a place where they go ahead and enter their name and their email address.
There could be a video above that explains why. It could be that you take them to a lead page or a landing page
but in either case this is your email address collecting area.
My Business Products
-
- Start Trading Stocks
-
- Business Launch Pad
-
- 100 Stock Trading Tips
About Me
Now on your website there might be a place where they go ahead and enter their name and their email address.
There could be a video above that explains why. It could be that you take them to a lead page or a landing page
but in either case this is your email address collecting area.
My Schooling
Now on your website there might be a place where they go ahead and enter their name and their email address.
There could be a video above that explains why. It could be that you take them to a lead page or a landing page
but in either case this is your email address collecting area.
--------------------- CSS CODE ------------------
body{background: #fff;}
.btn {
border:1px solid red;
border-radius: 55px;
}
.btn-black {
background:black;
}
.btn-green {
background:green;
}
.btn-small {
font-size: 15px;
padding: 20px;
}
.btn-big {
font-size: 25px;
padding: 30px;
}
In either case, that’s how you mix and match, and that’s how you do the code compression because then we’re always using the same code time and time again and you can do that with heading tags, with links, you can do it with buttons with form fields, just constantly reusing things time and time again.
For some people, they go crazy with this so you don’t want to get too obsessed with it to the point where you can say like color W like CW would be color white so that way you’re pulling the color white from here and then padding top 50.
I’ve seen people define like padding 5, 10, 15, 20, 25 and then they can just write padding top 50, padding right 20, padding-bottom 5, you know, they’ll do this kind of code, and sometimes that becomes a little redundant and counter-intuitive because you’re putting everything in this classes. There’s a balance between overdoing it on the class’ side or the CSS.
Kind of, I would say, three or four classes at most is all you really want within the HTML like this button example is a good example but if you have a little bit more that’s okay too depending on which you’re working at but once you start, you know, writing a bunch of things like padding top 20, bottom border radius of 30 then text decoration none, you know, so you can do this and it’ll work but it’s not as efficient.
Keep that in mind. There’s just a balance you want to optimize your code for speed of working in it but also speed of loading time as well and for your audience. In either case, I hope that gives you some insight into working within the code within HTML and CSS putting it together on how to optimize some of that code.
